28200 sujets
CSS et mise en forme, CSS3
le but cest de creer un site entré avec un menu a droite et gauche fixe..le centre fixe aussi mais des background image de droite et gauche qui descende qui continu au fur et a mesure que le texte du contenu centran descend...puis un footer ...c est classiuqe mais je n arrive pas a gerer ces baxkground image de gauche et droite qui napparaisse que si on met du contenu dedans ou alors seulement sous FF...
le but c est que a gauche et a droite ca fasse comme sur le site de la boite d alsa colonne de droite pas de contenu en bas mais le fond suit
http://www.alsacreations.fr/solutions.html
( site qui est tres beau sobre ..une belle charte garphique du beau boulot ...qui va tres bien ds la constuinite du .com....on reprend du citron et hop on fait si qui a de la guele : chapeau pour le design et le vectoriel...)
voir ma page :
[/url]http://www.lalibellule.com/maquette11.htm
merci vraiment si quelqu un peut m aider....
sam/
le but c est que a gauche et a droite ca fasse comme sur le site de la boite d alsa colonne de droite pas de contenu en bas mais le fond suit
http://www.alsacreations.fr/solutions.html
( site qui est tres beau sobre ..une belle charte garphique du beau boulot ...qui va tres bien ds la constuinite du .com....on reprend du citron et hop on fait si qui a de la guele : chapeau pour le design et le vectoriel...)
voir ma page :
[/url]http://www.lalibellule.com/maquette11.htm
merci vraiment si quelqu un peut m aider....
sam/
masprod a écrit :
bon personne pour me donner un coup demain..
faut ptete que je reexplique plus simplement.?.?.?
bonne soirée![]()
sam/
Le problème, c'est que tu veux faire des colonnes. Mais des colonnes, c'est dans un tableau, pas avec des <div> ! Donc voilà : c'est tout bonnement pas possible, car une <div> prend :
- en largeur, toute la place disponible (sauf si on lui donne une largeur fixe, à laquelle elle se tiendra) ;
- en hauteur, uniquement la place nécessaire pour l'affichage de son contenu.
Donc pas de contenu = pas de div.
Une div qui prendrait la même hauteur qu'une div adjascente, ça s'appelle des colonnes, et ça demande d'utiliser un tableau. Si vraiment c'est indispensable, un tableau à 3 colonnes pour le gabarit de la page, ça peut aller. Cf site Framasoft, par exemple.
Si on veut absolument utiliser des divs, alors il faut ruser. Par exemple :
- en donnant une hauteur fixe à la "colonne" :
height: 400px;
... mais c'est un peu rigide, et ça ne marche pas comme une colonne (hauteur dynamique en fonction du contenu le plus long pour toutes les cellules d'une même ligne).
- en utlisant la solution d'un "bloc-conteneur" expliquée dans ce tutoriel (Alsacréations !) : Des blocs de même hauteur sans tableaux... précisons tout de même que ça ne force pas les <div> à se comporter comme des cellules de tableau, mais que l'on utilise plutôt une ruse de type "trompe-l'oeil".
merci beaucoup pour cette reponse complete mpop et du temps consacré à la rédiger...
le but est pour moi de realiser cette page en css.
je ne pensais pas que ca allait etre aussi compliqué...
mon maquette de page d accueil est pourtant tres classique donc je pensais qu elle etait facilement realisable.
je vais me pencher sur la piste du tutoriel d'Alsacréations.
merci.je reviens pour j espere pouvoir inscrire un petit "résolu".
bonne soirée,
sam/
le but est pour moi de realiser cette page en css.
je ne pensais pas que ca allait etre aussi compliqué...
mon maquette de page d accueil est pourtant tres classique donc je pensais qu elle etait facilement realisable.
je vais me pencher sur la piste du tutoriel d'Alsacréations.
merci.je reviens pour j espere pouvoir inscrire un petit "résolu".
bonne soirée,
sam/
salut,
Concernant le min-height, ça ne marche pas avec IE, mais ce dernier donne à la propriété height le même comportement qu'à "min-height". Donc il y a des solutions. cf FAQ : Min-height sur Internet Explorer
Pour qu'il n'y ait pas de vide entre div#droite et div#pied, tu peux ajouter une image de fond au #conteneur, en la positionnant comme il faut.
Concernant l'image de fond des « colonnes » (divs #droite et #gauche), par exemple http://www.lalibellule.com/slow_03.png, ne serait il pas plus logique séparer le "pied" de l'image que tu mettrais en image de fond dans une div en bas de #droite et #gauche (ou simplement en image de fond, position verticale bas, aux listes). Ainsi, quelque soit le contenu dans ces "colonnes/div", et donc leur hauteur, cela s'afficherait ajusté et fermé en bas. (suis-je clair ?...)
Modifié par Alan (17 Jan 2006 - 11:38)
Concernant le min-height, ça ne marche pas avec IE, mais ce dernier donne à la propriété height le même comportement qu'à "min-height". Donc il y a des solutions. cf FAQ : Min-height sur Internet Explorer
Pour qu'il n'y ait pas de vide entre div#droite et div#pied, tu peux ajouter une image de fond au #conteneur, en la positionnant comme il faut.
Concernant l'image de fond des « colonnes » (divs #droite et #gauche), par exemple http://www.lalibellule.com/slow_03.png, ne serait il pas plus logique séparer le "pied" de l'image que tu mettrais en image de fond dans une div en bas de #droite et #gauche (ou simplement en image de fond, position verticale bas, aux listes). Ainsi, quelque soit le contenu dans ces "colonnes/div", et donc leur hauteur, cela s'afficherait ajusté et fermé en bas. (suis-je clair ?...)
Modifié par Alan (17 Jan 2006 - 11:38)
merci Alan c' est tres clair...
pour
C est que j ai trouvé comme solution et que ke met en place ce matin reste la solution que tu me proposes à la fin de ton post...
mais comment fait ton pour que l image de fonds du conteneur du menu de droite par exemple s etire est s allonge avec la longueur du div sans repeat mais en s allongeant....
merci Alan...
sam/
pour
Pour qu'il n'y ait pas de vide entre div#droite et div#pied, tu peux ajouter une image de fond au #conteneur, en la positionnant comme il faut.
C est que j ai trouvé comme solution et que ke met en place ce matin reste la solution que tu me proposes à la fin de ton post...
mais comment fait ton pour que l image de fonds du conteneur du menu de droite par exemple s etire est s allonge avec la longueur du div sans repeat mais en s allongeant....
merci Alan...
sam/
Salut Sam,
Même si tu pouvais étirer l'image, cela déformerait ton motif de fond.
J'envisagerais de découper l'image, et de ne faire répéter que la partie centrale.
Ton image dont j'ai donné le lien ci dessus fait 572px de hauteur. Je la découperais ainsi :
- La partie haute, environ 300px, où figure le motif de fond et l'effet de dégradé.
- la partie centrale, juste 1px de haut, en répétition
- Le pied, 2px de haut ou un peu plus.
Sinon tu peux aussi ne garder que la partie haute et définir les bords juste en css sans image, mais dans ce cas par d'arrondi pour IE..
Même si tu pouvais étirer l'image, cela déformerait ton motif de fond.
J'envisagerais de découper l'image, et de ne faire répéter que la partie centrale.
Ton image dont j'ai donné le lien ci dessus fait 572px de hauteur. Je la découperais ainsi :
- La partie haute, environ 300px, où figure le motif de fond et l'effet de dégradé.
- la partie centrale, juste 1px de haut, en répétition
- Le pied, 2px de haut ou un peu plus.
Sinon tu peux aussi ne garder que la partie haute et définir les bords juste en css sans image, mais dans ce cas par d'arrondi pour IE..
Salut,
Ce n'est sûrement pas possible de mettre différentes images de fond dans une même div.
Il faudrait au moins ajouter une DIV pour la partie haute avec le motif et le dégradé.
div#gauche : l'image de 1px de hauteur qui se répète
div#menuGauche : La tête de l'image, sans répétition
pour le pied de l'image : comme dans l'exemple, une nouvelle div avec une hauteur de la taille de l'image qui sera en fond (par ex 2px). On doit pouvoir s'en passer mais bon..
J'ai tendance à ne pas être très économe, donc faut voir si on te propose d'autres solutions.
A+
Modifié par Alan (18 Jan 2006 - 12:06)
Ce n'est sûrement pas possible de mettre différentes images de fond dans une même div.
Il faudrait au moins ajouter une DIV pour la partie haute avec le motif et le dégradé.
<div id="gauche">
<div id="menuGauche">
<ul>
..
</ul>
<div id="gauchePied"></div>
</div>
</div>
div#gauche : l'image de 1px de hauteur qui se répète
div#menuGauche : La tête de l'image, sans répétition
pour le pied de l'image : comme dans l'exemple, une nouvelle div avec une hauteur de la taille de l'image qui sera en fond (par ex 2px). On doit pouvoir s'en passer mais bon..
J'ai tendance à ne pas être très économe, donc faut voir si on te propose d'autres solutions.
A+
Modifié par Alan (18 Jan 2006 - 12:06)
a écrit :cest bien ce qu il me semblait...
Ce n'est sûrement pas possible de mettre différentes images de fond dans une même div.
merci Alan ...j applique ta solution demain et revient mettre le fameux résolu ....merci encore pour ton aide et bonne journée...
a écrit :
J'ai tendance à ne pas être très économe
c est pareil pour moi...

sam/
je pensais que c etait résolu mais non ...désolé...
sous firefox décallage en haut que n arrive pas a resoudre et surtout les le conteneur des deux menu gauche et droite qui ne s agrandissent pas avec la longueur des liste a l interieur..voir la differnce sous ie ou la ca tourne ...
qu en pensez vous ???
Mpop si t es la ??
page visible ici:
http://www.lalibellule.com/jeudi.htm
merci beaucoup
sam/
sous firefox décallage en haut que n arrive pas a resoudre et surtout les le conteneur des deux menu gauche et droite qui ne s agrandissent pas avec la longueur des liste a l interieur..voir la differnce sous ie ou la ca tourne ...
qu en pensez vous ???
Mpop si t es la ??
page visible ici:
http://www.lalibellule.com/jeudi.htm
merci beaucoup
sam/
Bonjour,
Problème 1) il s'agit d'un cas normal de fusion des marges
Pour résoudre ce problème, tu peux remplacer dans div.texthaut le margin-top: 7px; par padding-top: 7px;
Problème 2) comme expliqué dans les messages ci-dessus, il faut utiliser la propriété "min-height" pour que tes div possèdent à la fois une hauteur minimale et puissent s'étendre en fonction du contenu. Pour le cas particulier de IE (qui ne prend pas en charge min-height), voir la solution dans la FAQ : http://forum.alsacreations.com/faq/#item60
Bonne continuation
Modifié par Alan (24 Jan 2006 - 11:42)
Problème 1) il s'agit d'un cas normal de fusion des marges
Pour résoudre ce problème, tu peux remplacer dans div.texthaut le margin-top: 7px; par padding-top: 7px;
Problème 2) comme expliqué dans les messages ci-dessus, il faut utiliser la propriété "min-height" pour que tes div possèdent à la fois une hauteur minimale et puissent s'étendre en fonction du contenu. Pour le cas particulier de IE (qui ne prend pas en charge min-height), voir la solution dans la FAQ : http://forum.alsacreations.com/faq/#item60
Bonne continuation
Modifié par Alan (24 Jan 2006 - 11:42)
MERCI Alan
j aurais pu trouver le probleme 1 seul heureusement que tu es arrivé a la rescousse
par contre pour le probleme 2 je galere ...
en fait mon cas est particulier a moins que j e n ai rein compris à tes sources...
moi ca fonctionne sous ie et ca ne fonctionne pas sous mozilla...
bizarre ...j ai utilisé les solutions proposées et lu les ressources mais ca tourne pas ??
sam/
j aurais pu trouver le probleme 1 seul heureusement que tu es arrivé a la rescousse

par contre pour le probleme 2 je galere ...
en fait mon cas est particulier a moins que j e n ai rein compris à tes sources...
moi ca fonctionne sous ie et ca ne fonctionne pas sous mozilla...
bizarre ...j ai utilisé les solutions proposées et lu les ressources mais ca tourne pas ??
sam/