28173 sujets

CSS et mise en forme, CSS3

Div flottantes (onglets) et positionnement vertical

Bonjour à tous.

J'aimerai avoir l'avis des spécialistes du CSS qui parcours ce forum sur mon "soucis".

En fait je veux faire un système d'onglets qui se positionnent au dessus de mon contenu pour faire un système de navigation intuitif. Ca ne m'a pas posé de soucis car j'ai fait des div à largeur fixe (200px) avec float: left.

Mon soucis c'est surtout que si j'ai beaucoup d'onglets et une résolution pas terrible, mes onglets s'affichent comme sur ce screenshot :

upload/8873-exemplecss.jpg

Ca n'est pas choquant mais ce que j'aimerai beaucoup faire, c'est que plutot d'avoir les onglets "en trop" qui se mettent au dessous, j'aimerai qu'ils se mettent au dessus! Il n'y aura pas cette vilaine démarquation. Et là j'avoue je vois pas trop comment faire... Vu que je veux faire qqch de propre qui s'adapte bien à la résolution des utilisateurs, je n'ai aucun moyen de savoir à quel moment le saut de ligne va s'effectuer; je ne peux donc pas "préparer" mes onglets en amont pour les ranger comme il faudrai.

Est-ce que qqun aurai une idée pour faire ce que je voudrai?

Je vous remercie; bonne journée!
Est-ce que je peux pas juste changer ma facon de faire? Il n'y a aucun moyen en CSS de faire cette sorte d'empilage vers le haut sur des div?
Modérateur
bonjour,
si tu as un nombre d'onglet impair , alors une marge droite ou gauche d'un pixel sur le premier onglet empechera la premiere ligne d'avoir un nombre d'onglet equivalent a la seconde (sauf si un seul bien sur Smiley smile ).

si le nombre est pair il faudrait , en usant des comportement naturels , faire en sorte que les onglets aient des tailles differentes. les premiers plus larges que les suivants.

++
gcyrillus > le problème étant que si j'ai 15 onglets et que j'en ai 14 sur la première ligne, en avoir 2 sur la deuxième ligne ne m'arrange pas plus que ca ^^ ca tombe bien pour mon exemple tu as raison mais il faut bien voir qu'en général il y aura beaucoup plus d'onglets sur un espace plus large
Modérateur
bonsoir , bon une autre piste encore moins controlable , mais la reponse t'a deja etait donné , ce que tu recherche n'est a prioiri pas possible , le flux de la page est du haut vers le bas et il n'est pas possible d'en modifier ce comportement des plus basique et important.

un essai pour rire :
<!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>
<title>liste desorganisée</title>
<style type='text/css'>
.droite {
	float:right
}
.gauche {
	float:left;
}
li {
	display:inline;
}
a {
	display:table-cell;
	padding:1em;
	margin:1em;
	width:50px;
	white-space:pre;
	background:#eee;
	zoom:1;
}
ul {
	text-align:center;
}
</style>
</head>
<body>
<ul>
<li><a href='#' title='#' >lien 0</a></li>
<li><a href='#' title='#' class="droite">lien 1</a></li>
<li><a href='#' title='#' >lien 2</a></li>
<li><a href='#' title='#' class="gauche">lien 3</a></li>
<li><a href='#' title='#' >lien 4</a></li>
<li><a href='#' title='#' class="droite">lien 5</a></li>
<li><a href='#' title='#' >lien 6</a></li>
<li><a href='#' title='#' class="gauche">lien 7</a></li>
<li><a href='#' title='#' >lien 8</a></li>
<li><a href='#' title='#' class="droite">lien 9</a></li>
<li><a href='#' title='#' >lien 10</a></li>
<li><a href='#' title='#' class="gauche">lien 11</a></li>
<li><a href='#' title='#' >lien 12</a></li>
<li><a href='#' title='#' class="droite">lien 13</a></li>
<li><a href='#' title='#' >lien 14 </a></li>
<li><a href='#' title='#' class="gauche">lien 15</a></li>
</ul>
</body>
</html>


Je te souhaite néanmoins de trouver une solution avantageuse.

bonsoir
Modifié par gcyrillus (10 Nov 2006 - 18:50)
Yep Yep, une autre solution (tu voudras pas forcément l'entendre celle-la), c'est tout simplement de réduire le nombre de lien...15 liens dans un menu, c'est du massif tout de même...Tu ne peux pas simplifier ta structure?? Tu y gagneras sur tout les plans, aussi bien en souplesse qu'en maintenabilité...A+
Sujet clos
Aller à