Bonjour,
Dans cet exemple d'Alsacréation :
http://www.alsacreations.com/articles/modeles/g_fixe.htm
Sauriez comment faire pour que la hauteur de la colonne menu 'pousse' également le contenu ?
Je souhaitairais que quelque soit la hauteur du contenu de menu ou de la partie centrale, les css correspondantes permettent de mettre le footer aprés le calque qui a la hauteur la plus large (menu ou partie centrale).
Merci pour votre aide !
Version complète: sur le forum Webmaster Hub : Css qui 'pousse'
Si j'ai compris ta question, il te suffit d'ajouter clear:both; aux propriétés de ton footer : le calque se placera de manière à ne pas empiéter sur les autres, quelque soit leur hauteur...
Loupilo.
Loupilo.
Hello Loupilo,
Le problème est plus complexe, j'ai un menu à gauche qui doit faire environ 600/700 px de hauteur avec le contenu que j'y ai mis, et la partie centrale contient à peine pour 200px de hauteur de contenu.
Le footer est ok, mais mon menu qui est en position absolute sort du cadre du conteneur global. J'ai essayé de mettre aussi du coup un clear:both; dans le css de la partie centrale, mais non
Le problème est plus complexe, j'ai un menu à gauche qui doit faire environ 600/700 px de hauteur avec le contenu que j'y ai mis, et la partie centrale contient à peine pour 200px de hauteur de contenu.
Le footer est ok, mais mon menu qui est en position absolute sort du cadre du conteneur global. J'ai essayé de mettre aussi du coup un clear:both; dans le css de la partie centrale, mais non
Ca ne sera pas possible avec la technique utilisée sur alsacreations.
Pour faire ce que tu veux, il faut utiliser le positionement flottant (que *je* trouve bien plus souple et efficace que le positionment absolu pour la mise en page)
Le principe général :
Voilà pour la structure HTML, qui doit être sensiblement identique sur alsacreations.
Ensuite pour le principe du code CSS, tu met les 2 parties menu et contenu en flottant (avec float: left
elles se mettent ainsi en colone, et ensuite, tu applique la propriété clear: both; au pied de page pour le faire passer sous les éléments flottant.
Et voilà, ensuite si tu veux avoir un effet d'extension du fond identique pour le menu et le contenu, tu appliques une image de fond au conteneur avec la technique des fausses colones expliquée ici :
http://www.alistapart.com/articles/fauxcolumns/
Wala pour l'idée générale
-edit- en réponse à Loupilo, le clear: both; n'a d'utilité que pour les élément en float le précédent, pas pour le positionement absolu
Pour faire ce que tu veux, il faut utiliser le positionement flottant (que *je* trouve bien plus souple et efficace que le positionment absolu pour la mise en page)
Le principe général :
CODE
<div id="conteneur">
<h1>Titre de la page</h1>
<div id="menu">
<h2>Titre de la rubrique</h2>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<h2>Titre de la rubrique</h2>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
<div id="contenu">
<h2>Titre de la page</h2>
<p>Ton contenu</p>
</div>
<p id="footer">Pied de page</p>
</div>
<h1>Titre de la page</h1>
<div id="menu">
<h2>Titre de la rubrique</h2>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<h2>Titre de la rubrique</h2>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
<div id="contenu">
<h2>Titre de la page</h2>
<p>Ton contenu</p>
</div>
<p id="footer">Pied de page</p>
</div>
Voilà pour la structure HTML, qui doit être sensiblement identique sur alsacreations.
Ensuite pour le principe du code CSS, tu met les 2 parties menu et contenu en flottant (avec float: left
elles se mettent ainsi en colone, et ensuite, tu applique la propriété clear: both; au pied de page pour le faire passer sous les éléments flottant.Et voilà, ensuite si tu veux avoir un effet d'extension du fond identique pour le menu et le contenu, tu appliques une image de fond au conteneur avec la technique des fausses colones expliquée ici :
http://www.alistapart.com/articles/fauxcolumns/
Wala pour l'idée générale
-edit- en réponse à Loupilo, le clear: both; n'a d'utilité que pour les élément en float le précédent, pas pour le positionement absolu
Hello ElMoustiko,
La solution avec le float:left; semble bien fonctionner pour me créer les deux colonnes (comme l'ancienne d'ailleurs, mais j'ai plus de liberté on dirait pour positionner les élements).
Seul souci, l'affichage est différent avec entre ie et firefox ..
Je travaille en plus de mes calques de positionnement avec le css d'invision power board par défaut qui pourtant lui passe sur les deux. Je vais vérifier mes classes.
La solution avec le float:left; semble bien fonctionner pour me créer les deux colonnes (comme l'ancienne d'ailleurs, mais j'ai plus de liberté on dirait pour positionner les élements).
Seul souci, l'affichage est différent avec entre ie et firefox ..
Je travaille en plus de mes calques de positionnement avec le css d'invision power board par défaut qui pourtant lui passe sur les deux. Je vais vérifier mes classes.
Pour la différence avec IE, ça vient peut être des marges utilisées ? IE double les marges sur les float va savoir pourquoi
Une solution parmi d'autre :
Mais c'est pas sûr que ça vienne de là, je te dis ça un peu à l'aveugle
Une solution parmi d'autre :
CODE
margin: VALEUR FIREFOX !important;
margin: VALEUR IE;
margin: VALEUR IE;
Mais c'est pas sûr que ça vienne de là, je te dis ça un peu à l'aveugle
Effectivement, j'avais pas vu le position:absolute
La différence avec IE peut venir de margin et de padding.
J'utilise toujours le * {margin:0;padding:0;} en début de CSS.
Certes, il faut redéfinir les marges ultérieurement pour les élements qui en ont besoin, mais cela élimine une grande partie des différences IE/FF/OP...
Quelle(s) différence(s) vois-tu ?
La différence avec IE peut venir de margin et de padding.
J'utilise toujours le * {margin:0;padding:0;} en début de CSS.
Certes, il faut redéfinir les marges ultérieurement pour les élements qui en ont besoin, mais cela élimine une grande partie des différences IE/FF/OP...
Quelle(s) différence(s) vois-tu ?
Génial, merci pour vos conseils, j'ai réussi à tout placer comme il faut avec des float:left.
Me reste plus qu'un petit probleme de centrage du calque global qui devrait se solutionner rapidement.
thx !
Me reste plus qu'un petit probleme de centrage du calque global qui devrait se solutionner rapidement.
thx !
CITATION(Siddartha @ jeudi 20 janvier 2005, 03h04)
Me reste plus qu'un petit probleme de centrage du calque global qui devrait se solutionner rapidement.
Il faut que tu spécifie une largeur déterminée à ce calque (width) et que tu lui appliques ensuite les propriétés margin-left:auto;margin-right:auto; en ayant au préalable attribué un text-align:center; au body (pour que ça fonctionne avec IE).
Pour annuler le text-align:center sur les autres calques, tu peux soit spécifier à chacun de ces calques text-align:right; soit transformer ta balise <body> en <body id="page"> et, en dessous de la règle de centrage du body, appliquer un text-align:right à #page.
a+
Loupilo.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.