28172 sujets

CSS et mise en forme, CSS3

Problème de saut de ligne avec un menu ?

Bonjour,

J'ai un petit soucis sur un menu, lorsque le texte est trop long, celui-ci passe à la ligne mais l'espacement entre les deux lignes est trop grand.

http://img221.imageshack.us/img221/1606/exemplevw2.png 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Menu CSS Horizontal</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<meta http-equiv="content-language" content="fr"/>
		<link rel="stylesheet" type="text/css" media="screen" href="index.css"/>
	</head>
	<body>
		<div id="conteneur">
			<div id="menu">
				<ul>
					<li><a href="#">orgkroi oi fgof g</a></li>
					<li><a href="#">mofjkmf pfo fp</a></li>
					<li><a href="#">ouidoiu f fuf</a></li>
					<li><a href="#">duih dfoi foi f rou oduiy dioydf</a></li>
					<li><a href="#">iufiu f foifo f</a></li>
					<li><a href="#">uhf fo foiuf of o f dfiuyfoiufo </a></li>
					<li><a href="#">pofj f fpo fpf</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>




body
{
	background-color	: #8C90BF;
	font-family			: Tahoma,Verdana,Segoe,sans-serif;
	font-size			: 11px;
	margin				: 0;
	padding				: 0;
}

#conteneur
{
	background-image	: url(index.jpg);
	background-repeat	: repeat-y;
	height				: 30px;
	left				: 50%;
	margin-left			: -400px; /* moitié de la largeur */
	margin-top			: -15px; /* moitié de la hauteur */
	position 			: absolute;
	top					: 50%;
	width 				: 800px;
}

#menu
{
	margin-left			: 13px;
	width				: 800px;
}

#menu ul
{
	list-style-type		: none;
	margin				: 0;
	padding				: 0;
	text-align			: center;
}

#menu li
{
	float				: left;
	margin				: 0;
	padding				: 0;
}

#menu li a
{
	background-color	: #FFFFFF;
	color				: #5F649F;
	display				: block;
	height				: 30px;
	line-height			: 30px;
	margin-right		: 3px;
	text-decoration		: none;
	vertical-align		: center;
	width				: 108px;
}

#menu li a:hover
{
	background-color	: #1A2276;
	color				: #FFFFFF;
}


Ci-joint mon code : http://cjoint.com/data/lmpSVfv4zC_menu.zip

Merci pour votre aide,
Mathieu
Modifié par mrousse83 (14 Nov 2008 - 09:25)
Bonjour

Tu indiques une valeur de 30px pour line-height (hauteur de ligne) et tu demandes pourquoi ça fait 30px ? Smiley cligne
Bonjour,

C'est la ligne que j'ai enlevée car elle me provoquait un disfonctionnement lorsque la ligne est plus grande que la largeur comme je l'ai expliqué dans mon premier post.

Merci,
Mathieu
salut,

Une piste...

#menu li a
{
	background-color	: #FFFFFF;
	color				: #5F649F;
	display				: block;
	min-height				: 30px;
	margin-right		: 3px;
	text-decoration		: none;
	width				: 108px;
}

#conteneur
{
	background-image	: url(index.jpg);
	background-repeat	: repeat-y;
	left				: 50%;
	margin-left			: -400px; /* moitié de la largeur */
	margin-top			: -15px; /* moitié de la hauteur */
	position 			: absolute;
	top					: 50%;
	width 				: 800px;
}


mais voir sous ie6 ... pour le min-height Smiley cligne

Ou un bon vieux tableau "des familles" ...
Modifié par ghost (14 Nov 2008 - 20:41)
Modérateur
Bonsoir,

Bon comme dit précédemment le petit tableau et sa roule tout seul.

Sinon , si tu ne veut pas de tableau , parce que c'est un CMS qui te genere cette liste , un script que tu maitrise pas , ou que tu veut pas avoir a revirer ce tableau dans 6 mois quand tu fera une mise a jour ... Alors quelques piste en css tout de même sont envisageable.

1) le float ne permettra pas d'alignement vertical . chaque élément se cale a coté de l'autre sur le haut de la ligne ,ou passe a la ligne.

2) vertical-align:middle s'applique a l'intérieur d'une cellule ou align 2 éléments de type inline ou inline-block dans le flux (ces valeurs par defaut de certains éléments peuvent être appliquée par le biais du CSS a d'autres).

3) au choix peut-être display : inline-block ou table-cell.

allons pour inline-block sur li .
IE devra recevoir un CC avec display:inline ; et zoom:1; pour activer le layout en mode de rendu standard.

FF2 pourra recevoir : dispaly:-moz-inline-stack; la balise a enfant servira d'élément tampon (ou fixateur ) pour se parer de son defaut de stackage (empilement).

Les autres :inline-block;

A ce niveau la , on a reglé l'alignement vertical sans véritable bidouille , on prend juste en compte 2 navigateur récalcitrant.

.Pour l'effet hover (couleur de fond) , une bidouille s'impose en s'appuyant sur les marges négatives , des bordures et un overflow:hidden .
Si on veut des images de fond au lieu de couleurs , on s'arrête la et on retourne au tableau Smiley smile .

exemple en ligne : http://gcyrillus.free.fr/essai/index-mrousse83.html ,
IE6 , lui n'appliquera la couleur de fond que sous le texte , le lien ne fait pas forcement la hauteur du menu , le click n'est possible qu'au dessus du texte . ...

En partant sur un choix display:table ; IE7 et inférieur aurons besoin de l'alternative inline et zoom pour conservé un alignement vertical , le float lui restera une bonne alternative sans l'alignement verticaux des textes.

Finalement au choix avec des résultats différent:

inline-block pour tous (et correction css) (zone cliquable réduite et inégale , peu intuitif)
table et table-cell + alternative inline/zoom (zone cliquable réduite et inégale , peu intuitif qui perdure dans IE , ailleurs on peut l'étendre et la rendre égale d'un lien a l'autre)
table et table-cell + alternative float (zone cliquable que l'on peut étendre et rendre égale d'un lien a l'autre )

Le tableau le plus simple a mettre en œuvre voit aussi sa zone cliquable réduite a la hauteur qu'occupe le texte .

En dernier lieu , une petite surcouche en javascript peurrait mettre tout le monde d'accord avec un onmouseover sur la cellule de tableau ...


GC
Bonjour,

En effet, je pense me retourner vers le tableau qui est plus simple à mettre en ouvre.

Merci,
Mathieu
Sujet clos
Aller à