28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit problème d'utilisation des listes. Je pourrais résumer
cela de cette façon : le ul ne s'étire pas. Mais comme une image
vaut mieux qu'un long discours, voici un petit screenshot ainsi que
le code source associé.

Merci d'avance pour votre aide.

http://zefri.free.fr/shot.gif


<html>
<head>
	<title></title>
	
	<style type="text/css">
	<!--
	
	.nav {
		margin-bottom: 7px;
	}
	
	ul.listNav {
	list-style-position: outside;
	list-style-type: none;
	background-color: #FF8000;
	border: 2px solid #000;
	height: 1em;
	clear: both;
	}
	
	ul.listNav li {
		float: left;
		width: 250px;
	}
	
	ul.listNav li a {
		color: #fff;
		display: block;
		border: 2px solid #FF0000;
		background-color: #000;
		padding: 3px;
		margin: 0 3px 3px 0;
	}
	//-->
	</style>
	
</head>
<body>
	
	<div id="page">
		<div class="nav">
			<ul class="listNav">
				<li><a href="#" title="">Item</a></li>
				<li><a href="#" title="">Item</a></li>
				<li><a href="#" title="">Item</a></li>
				<li><a href="#" title="">Item</a></li>
				<li><a href="#" title="">Item</a></li>
				<li><a href="#" title="">Item</a></li>
			</ul>
		</div>
		
		<div>
			sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg 
			sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg 
			sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg 
			sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg 
			sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg sdgsgsd gs gs dgs dgsg sg s gsg 	
		</div>
	</div>
	
</body>
</html>

Modifié par zefri (23 Nov 2006 - 11:15)
RE...

Si je rajoute un <div style="clear:both;">&nbsp;</div>
entre mon div qui contient la liste et mon div de charabia
je resoue le probleme d'alignement du texte du charabia
qui se positionne bien en dessous mais ca ne change pas
le fait que le UL ne s'étire pas.
Salut BugsZilla

Merci beaucoup pour ta réponse et pour le lien. Je pensais justement utiliser cette méthode lorsque je déclare clear:both; dans mon css pour la liste UL. Car je ne pense pas que ce code soit correcte sinon :

<ul>
<li>jkkjkjkj</li>
<li>jkkjkjkj</li>
<li>jkkjkjkj</li>
<li>jkkjkjkj</li>
<div style="clear:both"> </div>
</ul>

En effet, introduire un DIV dans une liste UL est-ce correcte ?
Un liste ne doit-elle pas contenir que des LI ?
Effectivement, ce n'est pas très valide Smiley smile

Une autre solution au problème de sortie de flux pour les elements flottants est de donner une proprieté overflow au bloc conteneur (ul) :


ul.listNav{ overflow:auto; }


C'est la solution la plus simple dans pas mal de cas, dont le tien je pense
Salut MrPatate,

Merci beaucoup pour ton aide car tu m'as mis sur une sacrée bonne piste là ! Smiley smile

Me reste à régler un nouveau problème lié à mon height:1em;:
si je le retire de mon CSS, alors le UL ne s'étire plus sous IE. Mais si je le laisse alors j'ai un hauteur toute petite et une barre de scrolling sous IE et FF...
Bah c'est bizarre maintenant si j'enlève le height:1em; ça fonctionne nikel...

En tout cas merci énormement à vous deux pour votre aide précieuse.

Bonne journée à vous toutes et tous Smiley smile