28173 sujets

CSS et mise en forme, CSS3

Float et Clear, la taille ne suit pas.

Bonjour à tous,

J'essaye en vain de faire en sorte qu'un conteneur, qui a un clear: left; prenne systématiquement la taille du menu de gauche (#left, qui lui est en float: left) quand celui-ci est plus grand que le texte.

Voici une screenshot.

http://pix.nofrag.com/3d/1e/9bd8858907079fa3bbf1ae0228a5t.jpg

Et enfin le code CSS :


body {
	background-color: #666666;
}
#cont {
	background-color: #FFFFFF;
	border: 10px solid #333333;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
	width: 1000px;
	clear: left;
}
#left {
	width: 250px;
	border-right: 1px solid #999999;
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 3px;
	padding-right: 10px;
	font-size: 14px;
	color: #585347;
	float: left;
}
#menu ul {
	margin: auto;
	text-align: center;
	list-style: none;
	padding: 0;
}
#menu li {
	clear: right;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 7px;
	width: 70%;
	background-color: #DFD7CF;
	border: 4px solid #A7A19F;
}
#menu li:hover {
	background-color: #E9CBB5;
}
#menu a {
	display: block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	text-decoration: none;
}
#left p {
	width: 250px;
	padding: 2px;
	border: 1px solid #CCCCCC;
	margin-right: 2px;
}
#left p:first-letter {
	font-size: 16px;
}
#right {
	margin-left: 263px;
	padding: 4px;
	padding-top: 0;
	border-left: 1px solid #999999;
}
#now {
	height: 82px;
	border: 2px solid #333333;
	background-color: white;
	z-index: 2;
	margin-top: 100%;
	bottom: 2px;
	left: 2px;
	position: fixed;
}


Merci.
Modifié par Dolerho (08 Oct 2006 - 11:07)
salut

en retouchant un peu la feuille, en virant les clear et en passant la taille du container principal, j'obtient çà :

upload/1942-breizh.jpg

le css retouché


BODY {
BACKGROUND-COLOR: #666666
}
#cont {
BORDER-RIGHT: #333333 10px solid; PADDING-RIGHT: 10px; BORDER-TOP: #333333 10px solid; PADDING-LEFT: 10px; MARGIN: auto; BORDER-LEFT: #333333 10px solid; WIDTH: 800px; BORDER-BOTTOM: #333333 10px solid; BACKGROUND-COLOR: #ffffff;
}
#left {
BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 10px; PADDING-LEFT: 3px; FONT-SIZE: 14px; FLOAT: left; WIDTH: 250px; COLOR: #585347; FONT-FAMILY: Arial, Helvetica, sans-serif;
}
#menu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: auto; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center;
}
#menu LI {
BORDER-RIGHT: #a7a19f 4px solid; PADDING-RIGHT: 7px; BORDER-TOP: #a7a19f 4px solid; PADDING-LEFT: 7px; PADDING-BOTTOM: 7px; MARGIN: 10px auto; BORDER-LEFT: #a7a19f 4px solid; WIDTH: 70%; PADDING-TOP: 7px; BORDER-BOTTOM: #a7a19f 4px solid; BACKGROUND-COLOR: #dfd7cf;
}
#menu LI A:hover {/*sans le A tu n'as pas l'effet recherché*/
BACKGROUND-COLOR: #e9cbb5;
}
#menu A {
DISPLAY: block; FONT-SIZE: 16px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}
#left P {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 250px; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid;
}
#left P:first-letter {
FONT-SIZE: 16px;
}
#right {
float: right; PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 0px;
}
#now {
BORDER-RIGHT: #333333 2px solid; BORDER-TOP: #333333 2px solid; MARGIN-TOP: 100%; Z-INDEX: 2; LEFT: 2px; BORDER-LEFT: #333333 2px solid; BOTTOM: 2px; BORDER-BOTTOM: #333333 2px solid; POSITION: fixed; HEIGHT: 82px; BACKGROUND-COLOR: white;
}

c'est mieux?
Modifié par keran (07 Oct 2006 - 16:03)
Dolerho a écrit :
J'essaye en vain de faire en sorte qu'un conteneur, qui a un clear: left; prenne systématiquement la taille du menu de gauche (#left, qui lui est en float: left) quand celui-ci est plus grand que le texte.

La propriété CSS clear: left; dit à ton bloc conteneur de passer à la ligne après tous les éléments flottants à gauche. Ça ne prend pas en compte (et tant mieux !) les flottants à l'intérieur de l'élément lui-même.

Voir à ce sujet :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
< dolhero

a écrit :
Pour moi ça fait un truc tout moche en remplacant le CSS.


avec quel navigateur, quel système?

en gros, vire les clear et utilise float sur tout les container principaux.la copie à était faite avec ie6 en 1024x768.

pense aussi que le code xhtml doit être retouché en conséquence.
Sous Mac OS X avec Firefox.

Problème reglé grâce au lien de mpop.

Il suffisait de rajouter display:table; dans le conteneur principal.
Modifié par Dolerho (08 Oct 2006 - 11:06)
Dolerho a écrit :
Il suffisait de rajouter display:table; dans le conteneur principal.

Le display: table est cité à des fins de test, mais je ne le recommenderais pas comme solution à utiliser en production. Les deux méthodes qui me semblent les plus fiables sont le clear: both (s'il y a dans le contenu un élément approprié) et le oveflow: auto|hidden.
Sujet clos
Aller à