28173 sujets

CSS et mise en forme, CSS3

[Résolu] Mes flottants prennent l'eau

Je vous explique rapidement: j'ai un menu, largement inspiré des tutos d'Alsacréations, fait de flottants, mais IE a un comportement étrange, en tout cas incompréhensible pour moi, et mes recherches ne donnent malheureusement rien, c'est pourquoi j'ai recours à votre aide.

Voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">

.menu li
{
	float: left;	
	list-style-type: none;	
	margin: 0.2em;
}

.menu a 
{
	padding: 0 0.1em 0 0.1em;
	text-align: center;
	border: 0.1em solid #000;
	text-decoration: none;
	color: #000;
}

</style>

</head>

<body>

<ul class="menu">
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="#">Ceci est un test</a></li>
	<li><a href="#">Ceci est un test</a></li>
</ul>

</body>
</html>


Comme d'habitude, c'est IE qui me pose problème. Il m'est malheureusement impossible pour le moment d'uploader une copie écran, donc en deux mots: le dernier élément de la ligne n'a pas assez de place en longueur pour tout afficher, donc il s'étend en hauteur pour tout affichant, balançant par-dessus bord l'alignement des éléments de la liste (il faudra peut-être jouer sur la largeur de votre écran ou ajouter des li.

Question subsidiaire: pourquoi la bordure n'apparaît-elle pas correctement sous IE? Elle n'apparaît pas sur le haut et le bas.

[EDIT: ajout de copie écran]
http://img175.imageshack.us/my.php?image=captureqf6.jpg
Modifié par Vikchill (07 Sep 2006 - 01:09)
bonjour,

Ben revois les tutos ...
Essayes ce code et surtout pourquoi le tien ne fonctionne pas 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<meta http-equiv="Content-Language" content="fr" />



<style type="text/css">

ul {
list-style-type: none;
margin: 0;
}

.menu li {
float: left;
}

.menu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

</style>

</head>
<body>


<ul class="menu">

	<li><a href="www.lol.fr">Ceci est un test</a></li>

	<li><a href="www.lol.fr">Ceci est un test</a></li>

	<li><a href="www.lol.fr">Ceci est un test</a></li>

	<li><a href="www.lol.fr">Ceci est un test</a></li>

	<li><a href="www.lol.fr">Ceci est un test</a></li>

	<li><a href="www.lol.fr">Ceci est un test</a></li>

	<li><a href="www.lol.fr">Ceci est un test</a></li>

	<li><a href="#">Ceci est un test</a></li>

	<li><a href="#">Ceci est un test</a></li>

</ul>


</body>

</html>
Merci d'avoir pris le temps d'étudier mon problème,

en réalité c'est quasiment la même chose, la seule différence entre les deux c'est que je n'attribue pas de height ni de width, car le but est justement d'avoir un bouton qui s'adapte en fonction de la taille du texte. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">

ul {
list-style-type: none;
margin: 0;
}

.menu li {
float: left;
}

.menu a {
margin: 0 2px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

</style>

</head>

<body>

<ul class="menu">
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="#">Ceci est un test</a></li>
	<li><a href="#">Ceci est un test</a></li>	
</ul>

</body>

</html>


Firefox le fait très bien, n'y a-t-il pas de moyen pour qu'IE en fasse autant?
Bonjour,

Ce n'est pas top mais tu peux mettre tes dimensions en em ...

width: 0.8em; par exemple
Je m'exprime mal: avec une taille définie en em, les boutons seront "élastiques", mais tous de la même taille, tandis que si on ne définit pas de taille, les boutons sont censés s'adapter au contenu: plus celui-ci est long, plus le bouton s'étire.

Si dans un bouton 1 j'ai "test" et dans un bouton 2 j'ai "test bis" et que je définit leurs height et leur width (même en em), les deux boutons auront la même taille. Ce que je souhaite c'est que ça réagisse comme sous FF: que le bouton 1 soit plus petit que le bouton 2 parce que son texte est plus court.
Salut,

J'ai compris (Suis un peu long ...)
Pour cela utilse le même code que mon 1er post et modifie 

.menu a {
margin: 0 2px;
line-height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}


Pour FF, tes blocs flottants prennent la dimension de leur contenu (c'est l'équivalent de width: auto; qui est la valeur par défaut) sauf pour IE qui lui donnera à tes blocs la valeur width:100% uniquement si ces éléments dispose d'un layout conféré par les propriétés width ou height.

Donc on supprime width et pour le height on le remplace par line-height donc plus de layout pour IE et valeur par défaut pour FF .
J'avais pensé à ce fameux layout, mais sans trouvé de solution (je ne maîtrise pas trop le sujet :s).

As-tu testé ce code? Ta solution donne le même résultat chez moi, IE ajoute de la hauteur au lieu de revenir à la ligne. Smiley sweatdrop
Modifié par Vikchill (06 Sep 2006 - 16:00)
Ton histoire de retour à la ligne m'interpelle !!
J'ai pas tout comprenu

D'après ton 1er code et les modifications , j'ai un menu horizontal avec les tailles des boutons qui s'adaptent à la taille du texte !
C'était pas le but recherché ? sinon je ne vois pas bien l'histoire du retour à la ligne sauf si le menu doit être vertical et là Oups !! c'est plus le même code ...

upload/5854-test.jpg
Désolé, je suis très brouillon dans mes explications.

Je parle du dernier élément de la ligne:

http://img333.imageshack.us/img333/9214/captureot8.jpg

Tu vois à quel point c'est disgracieux Smiley langue L'absence ou la présence de line-height n'y change rien pour IE, sous FF pas de problème: il renvoie à la ligne au lieu de s'étendre en hauteur.

En tout cas, une fois de plus, je te remercie de te pencher sur mon problème Smiley smile
Modifié par Vikchill (06 Sep 2006 - 18:55)
Bonjour à tous,

@Vikchill

Merci d'utiliser l'option "Générer un aperçu" au moment de joindre une image dont la largeur risque de gêner la lecture du topic !
Smiley cligne
Salut Vero,

désolé pour le désagrément, j'ai édité mon message pour passer l'image en lien. J'le refera pu Smiley confused
Ben moi avec ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">



<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
ul {
list-style-type: none;
margin: 0;
}

.menu li {
float: left;
}

.menu a {
margin: 0 2px;
line-height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

</style>
</head>

<body>
<ul class="menu">
	<li><a href="www.lol.fr">Ceci est un test bla bla bla</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="www.lol.fr">Ceci est un test</a></li>
	<li><a href="#">Ceci est un test</a></li>
   <li><a href="#">Ceci est un teeeeeeeeeeest</a></li>
   <li><a href="#">Ceci es1111111111111111t un test</a></li>
	<li><a href="#">Ceci est un te33333333333333333333333st</a></li>
	<li><a href="#">Ceci est un test</a></li>
</ul>
</body>
</html>


j'ai ça upload/5854-test.jpg

Que je ne trouve pas magnifique mais bon

<edit> exact ça bugge sous IE autant pour moi </edit>
Modifié par ghost (06 Sep 2006 - 19:03)
Désolé pour ce petit temps mais il a fallut un peu travaillé et puis il a surtout fallut que cela me revienne ...

.menu li {
float: left;
white-space:nowrap;
}


Modifie le code dans ce sens, ça devrait le faire pour IE.

Bon courage,
Ne t'excuse pas, tu ne me dois rien!

Au contraire, c'est moi qui te suit redevable: ça fonctionne parfaitement! Je ne connaissais pas cette propriété, je suis allé voir media-box pour en lire plus, et je crois que sans toi j'aurais mis longtemps avant de trouver.

Merci beaucoup pour ton aide! Smiley biggrin
De rien, la prochaine c'est toi qui aidera quelqu'un d'autre ...
C'est me semble t'il le sens de ce forum.

A plus
Sujet clos
Aller à