28173 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai un gros problème de mise en page, qui me prend la tête depuis plusieurs jours:

C'est un site dynamique dont voici la structure essentielle:

<div id="corps"> conteneur principal
   <div id="lateral"> colonne latérale
      <ul id="menu">...</ul>
      <div id="news">...</div>
   </div>
   <div id="contenu">...</div>
   <div id="pied">...</div>
</div>

Cette structure est évidement modifiable...
voici le site... Pour l'instant, les colonnes sont en float et chacune allonge la hauteur totale du site en fonction du contenu... (j'ai déjà galéré pour arriver à ça)
Mais voici ce que ça doit donner:
1-Le tout à une hauteur minimale
2-la colonne principale "contenu", à gauche, doit s'allonger en fonction du contenu
3-la colonne latérale, à droite, contient le menu, puis les news. Le menu ne bouge pas. Les news, s'il y en a beaucoup, doivent faire apparaitre un scroll, et ne pas allonger le tout comme le "contenu".
4-cependant, et c'est là que ça fait mal, lorsque le contenu allonge le site, le scroll des news doit disparaître et celles-ci doivent s'afficher entièrement... Smiley biggol
Suis-je clair?
Je précise encore que le cadre bleu est en image background répétée (avant, c'était des bordures et des marges des éléments, encore plus galère...)
Modifié par BlindeKinder (15 Nov 2007 - 14:56)
salut,
un conteneur ne peut pas être extensible avec des éléments en float . Ton menu doit etre en float comme c'est le cas mais aucun interet pour la partie centrale "contenu" a qui il suffit de mettre une margin-right. La propriété min-height est à éviter car non compris par ie6
merci jeremw,

a écrit :
un conteneur ne peut pas être extensible avec des éléments en float
oui, sauf si on y met un spacer... le pied de page ici en l'occurence.
a écrit :
Ton menu doit etre en float comme c'est le cas mais aucun interet pour la partie centrale "contenu" a qui il suffit de mettre une margin-right

oui, il y a plusieurs possibilités pour ce résultat, mais comme expliqué, je voudrais mettre ce satané scroll sur les news... j'avais essayé avec le div.lateral en absolute et relative... mais rien ne fonctionne Smiley fache
a écrit :
La propriété min-height est à éviter car non compris par ie6

Ok, mais je fais comment pour avoir une hauteur minimale qui s'allonge avec le contenu?
oui la propriété clear-both sur ton pied de page te permet un conteneur extensible effectivement.
Pour q'un conteneur soit extensible il faut tout simplement ne pas lui mettre de taille.
Faire disparaître le scroll sur les news si ta zone de contenu augmente ne me paraît pas faisable en css
jeremw a écrit :
oubli les absolutes et compagnie lol
pour scroler ta partie news
une taille fixe + overflow:scroll

J'évite j'évite...
mais si je met une taille fixe, lorsque le contenu allonge le site, les news reste dans cette taille et le scroll avec...
C'est en fait là tout le problème...

Pour info: j'ai essayé sur explorer 5 mac, tout va bien sauf, effectivement, le min-height: lorsque les deux colonnes ont peu de contenu, le site s'arrête en bas des news et il est tout rikiki... c'est pas trop joli mais c'est acceptable...
jeremw a écrit :
Faire disparaître le scroll sur les news si ta zone de contenu augmente ne me paraît pas faisable en css

vivement css 3... Smiley confus
je comprends bien que si ton contenu s'alonge, tu n'apprécies pas que ton menu soit vide. A ta place je mettrai un scroll sur ta zone de contenu pour eviter ce désagrément.
Un scroll horizontal pourrait etre sympas ! avec un petit systeme de numérotation pour acceder a l'article souhaité. ce n'est qu'une idée bon courage à toi

ex: http://www.ankama-web.com/blog/
Sympa le scroll latéral...
Mais disons simplement que c'est pas moi qui décide... Smiley rolleyes Smiley cligne

En tout les cas, c'est une des grandes limite actuelle en CSS2 que le comportement/positionnement vertical ...
Impossible de faire ce truc simple "2 colonnes: l'une s'agrandit l'autre suit, et vice versa" avec les bordures... j'ai fini par tricher et mettre un backgroundl-image répété...
Je vais oublier ce scroll je crois...