28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous Smiley smile

J'achève en ce moment la création d'un site pour une association, et j'ai un petit problème. J'aurais voulu mettre une bordure tout autour de la page (sauf en haut), qui entoure donc le logo, la bannière, la page, le menu, etc... Mettre le tout dans un cadre en somme.

Seulement je n'y arrive pas. Si je le fais sur ma div #contenant, cela ne descend pas tout en bas. Si je le fais sur la balise HTML (c'est pas très sérieux ^^), IE ne le comprend pas comme il faut... Bref, je ne comprends pas où mon code cloche. Vous pouvez voir le code sur le site, mais je mets tout de même une version "résumée" (bien plus lisible je pense, j'y ai enlevé tout ce qui ne sert pas à mon problème) ici :

Le HTML :

<div id="contenant">

	<div id="logo">Logo + banniere</div>
	<hr>
	<div id="menu">
Le menu
	</div>
	<div id="page">
La page
	</div>
	<div id="copyright">footer en somme</div>
	

</div><!-- 	/ #contenant 	-->


Le CSS :

html,body {margin:0; padding:0;}

#contenant {width:715px;height:100%;margin-right:auto;margin-left:auto;}

#logo {width:715px;height:71px;padding-left:7px;} 

#banniere {margin-left:40px;margin-bottom:4px;}

hr {width:694px;border:1px solid #2665A0;margin-bottom:10px;margin-top:7px;}

#menu {width:174px;height:100%;float:left;}

#page {width:520px;height:100%;float:left;}
#page li {line-height:25px;}

#copyright {width:520px;float:right;margin-right:5px;margin-top:5px;font-size:9px;}



J'ai l'impression qu'il y a des petites choses qui ne vont dans mon CSS, mais je ne sais pas quoi. Le fait que "contenant" n'englobe pas tout en réalité (quand on y met une bordure elle descend à peine) me gêne un peu...

Merci d'avance pour votre aide Smiley smile
Modifié par Clemdups (28 May 2007 - 11:54)
Bonjour,

Clemdups a écrit :
J'ai l'impression qu'il y a des petites choses qui ne vont dans mon CSS, mais je ne sais pas quoi. Le fait que "contenant" n'englobe pas tout en réalité (quand on y met une bordure elle descend à peine) me gêne un peu...

C'est probablement un problème de dépassement des flottants :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Les height: 100% dont tu as truffé ton code sont par ailleurs non fonctionnels et donc inutiles en l'état. Voir la FAQ du forum pour une hauteur de 100% (que l'on remplacera avantageusement par une hauteur minimale de 100%).

Bonne continuation. Smiley smile
Excellent, merci beaucoup !
J'ai utilisé un : <div style="clear:both;"></div> et ça marche. Je ne me rappelais plus de l'astuce... J'ai honte, car c'est un membre de ce forum qui me l'avait donnée en plus Smiley confused

Merci encore pour cette réponse rapide, et ce lien intéressant !