28172 sujets

CSS et mise en forme, CSS3

Affichage sur deux lignes ?

Bonjour à tous,

Je ne sais pas si ce que je souhaite est réalisable alors je viens le demander directement ici, après quelques recherches sur Google.

En fait j'ai une liste à puce avec des liens alignés : un menu en l’occurrence. Les liens sont de type "block" afin de garantir l'alignement. Lorsque je mets un "width" à ces liens, ils ont une largeur fixe mais, forcément, lorsque le texte est trop grands le lien se retrouve sur trois ligne.

A l'inverse, si je ne mets aucune largeur, il se retrouve sur une ligne mais beaucoup trop long.

Ma question est-donc : existe t-il une propriété "transitoire" permettant d'afficher un lien sur deux lignes, et donc avec une largeur fluide. Ca m'étonnerait mais on sait jamais ^^

Merci d'avance Smiley smile
J'avais songé à quelque chose comme ça, mais min-width n'agit pas Smiley sweatdrop 

<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>liens largeur fluide</title>
	<style type="text/css">
ul {list-style-type: none; padding: 0;}
ul a {
display: block;
min-width: 10%; max-width: 33%;
margin: 1em 0; color: white; background-color: gray;
}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">foo foo foo</a></li>
		<li><a href="#">foo foo foo bar bar bar</a></li>
		<li><a href="#">foo foo foo <br>bar bar bar</a></li>
	</ul>
</body>
</html>
Bonjour,

tu peux éventuellement te pencher sur display: table-cell; . Tu peux te renseigner sur alsa, ou sur ie7nomore.

Ça ne te permettra pas de définir le nombre de lignes, mais c'est très utile pour gérer la répartition des éléments dans la largeur.

Bonne continuation !
Bonjour et merci de vos réponses Smiley smile

Malheureusement je n'y parviens toujours pas, que ce soit en "inline" ou en "table-cell" =/
Je suis arrivé à ce résultat pour le moment :

upload/502-screnn.png

C'est loin d'être satisfaisant évidemment =/
Voici le code CSS :


#menu_top ul {
	margin: 0;
	padding: 0
}
#menu_top ul li {
	display: inline
}
#menu_top ul li a {
	width: 150px;
	background-color: #ffffff;
	color: #336699;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	margin: 2px;
	padding: 3px 5px;
	display: inline-block;
	font-weight: normal;
	text-align: center;
	text-decoration: none
}


Si quelqu'un à une idée pour résoudre ce soucis "basique" ce serait vraiment sympa. Smiley smile
Merci d'avance Smiley smile
Sujet clos
Aller à