Bonjour.
Je refais un site pour une association (en secret sans leur dire, et aussi pour m'entraîner), que vous pouvez voir ici.
Comme vous pouvez le voir en allant par exemple dans la partie equipement, le menu a gauche s'arrête. J'aimerais une solution pour qu'il arrive toujours en bas de page (par rapport à mon div #corps).
Voalà, j'espère que vous m'avez compris, merci d'avance pour votre aide.
On peut faire un height: 100% mais ça ne marche que sous ie. Sinon il faut mettre un min-height pour firefox :
height: auto !important;
height: 100%; //pour ie
min-height: 500px; //pour ff
Ca me plait pas du tout de faire des trucs qui marchent que sur certains trucs et pas sur d'autres.
Y a pas une solution autre ?
En plus avec ça ca me fait un menu fixe pour FF, ce qui me convient encore moins.
Merci quand même
Et bien, sous IE normalement ça descend jusqu'en bas. Sous firefox ça ne résoud pas franchement l'affaire.
J'ai une solution, je vais manger et je vous explique. (je l'ai appliquée là si vous voulez : http://votrelecture.com.free.fr/ ; le menu de gauche sera toujours aussi long que le contenu [question d'apparence])
Moi j'ai trouver une solution provisoir. J'ai appliquer à #fond (le div qui entour tout les autres div) une image de fond qui correspond au menu. comme ca sa donne l'impression que ca ralonge
C'est bon
Je vais vous faire ça version tuto (j'en ferrais peut-être un ):
P.S: ne vous énervez pas s'il y a plein de détails superflus, c'est pour être sûr d'être bien compris
1. on fait un div central de la page.
<div id="conteneur">
on lui applique un css, en supposant qu'on veut un site fixe : on lui met un width défini, et un margin:0 auto; pour centrer le contenu de notre div.
On lui met un fond particulier, c'est toute l'astuce de la chose :
disons que l'on veut organiser le site avec un menu à gauche de couleur noire et un cadre central (pour le contenu) en rouge. L'image de fond sera donc ici :
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
En gros, on met le fond tel qu'il doit apparaître lorsqu'on fait une capture écran.
on applique un background-repeat: repeat-y; à ce fond, pour qu'il se répète en longeur.
2. on insère dans ce div ce que contiendra le menu gauche
<img src="/images/menu1_item1.gif" alt="" />
<img src="/images/menu1_item2.gif" alt="" />
<img src="/images/menu2_item1.gif" alt="" />
par exemple. On peut choisir une largeur à ce menu, en mettant tout le contenu dans un <div id="menu"> avec un css width:200px; par exemple.
3. on insère dans ce div le div pour le contenu de la page
<div id="contenu">Le texte de votre contenu</div>
et on lui applique un float:right dans le css pour qu'il se positionne à droite de notre menu.
On définit la largeur du cadre, en supposant toujours que l'on veut un design fixe.
4. On constate
On referme le div conteneur, et là on lance la page. Si on met beaucoup de texte dans notre div contenu, le div conteneur va s'étendre en longueur, et ainsi afficher le fond des menus tout du long. Le menu quand a lui, ne sera pas plus long, mais ça ne change rien puisque c'est le div conteneur qui se charge d'afficher son fond.
Jusque là j'ai expliqué ma technique pour faire un design fixe, pour faire un design extensible, je pense qu'il faut utiliser la même méthode mais on enlève le margin:0 auto;, et on met un background-color au div contenu, et on ne définie pas la taille du div contenu. Pour un site extensible de toute façon, seul les blocs de division s'allongent, les menus restent les mêmes.
Dites moi si je suis à côté de la plaque c'est très probable !!
bonjour,
On oubli facilement que pour pouvoir appliquer un height:100%; sur un element (autre que dans IE, qui lui prendra la hauteur de la fenetre en reference ) il faut aussi donner une taille de 100% a html et body (+ le min-height, pour l'extensibilite a l'element que l'ion veut etirable).
Et la c'est encore IE, qui fait la mauvaise tête, il se bornera au 100% de la fenetre si le contenu est court alors que les autres prendront bien les 100% de hauteur de page.(sinon, jeter un oeil aux gabarit de ma signatures, peut-etre qu'il en a un adapter a tes besoins)
reste alors la solution de l'image en arriere plan pour simuler des colonnes de même tailles en css.
Je pense que beaucoup de monde va apprecier ton tuto Jokester !
Merci Je verrais si j'ai le temps de le faire.
Oui j'avais oublié de spécifier, que le width 100% doit être mis sur tous les blocs qui précèdent le bloc qui doit avoir une hauteur de 100%, tout juste gcyrillus !
Un ami m'a aidé et en effet la solution qu'on a trouvé est celle-ci, le seul problème étant qu'on a plus l'image en bas de la colonne menu mais un fond uni.
Pas grave je préfère ça.
En tout cas ça fonctionne, faut peut-être bidouiller un peu ensuite selon le design, bref bonne technique.
Merci à tous, bonne journée.
[CSS] Menu gauche
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui