28172 sujets

CSS et mise en forme, CSS3

[CLOSED] Reproduire sur FF le comportement "width:100%;" de

Bonjour,

Je fais actuellement un menu avec des onglets composés de div sur lesquels j'ai mis
"float:left;" dans un fichier css.
Il y a environ 10-15 onglets, si bien que sur les grands écrans l'ensemble ne fait qu'une ligne mais sur des écrans plus petits, les onglets s'organisent sur deux lignes. Et c'est tant mieux car c'est le comportement recherché.

Seulement, ma deuxième ligne n'a souvent que un ou deux onglets, ce qui laisse un grand espace vide sur la droite et donne l'impression que la première ligne flotte dans l'air. (voir l'image jointe) upload/17593-tabFF.gif

J'ai donc mis un onglet vide (c'est pas très juste sémantiquement j'imagine mais c'est tout ce que j'ai trouvé pour avoir un bon rendu) qui doit prendre toute la place restante. Comme sur l'image ci-dessous :
upload/17593-tabIE.gif

Le problème c'est que FF ne comprend pas de la même façon la propriété width:100%; et donc j'ai juste un tout petit onglet comme ceci : upload/17593-tabFF.gif

Y-a-t il un moyen de reproduire ce comportement en css et pas en javascript (en calculant la place qu'il reste et en modifant la valeur de width) ?

Merci !

Voici un minimum de code :

<div id="DbleTabColl">
	<div id="tab17"  class="tab"> <!-- onglet normal -->
		<div id="fond" class="tabBg" >
			<div id="texte" class="tabTxt">First-vkdkvndk</div>
		</div>
	</div>
	<div id="tab18"  class="tab"> <!-- onglet vide -->
		<div id="fond" class="lastTab" >
			<div id="texte" class="tabTxt"><span id="emptyTab" >&nbsp;</span></div>
		</div>
	</div>

	<div style="clear:both;visibility:hidden;"></div>
</div>




#DbleTabColl
{
	width:95%;
	padding-top:10px;
	padding-left:5px;
	margin-bottom:-4px;
}
.tabBg
{
	background-image:url(../img/R5_Design01/DoubleTab_D_Off2.gif); 
	background-position:top right; 
	background-repeat: no-repeat;	
}
.tabTxt
{
	background-image:url(../img/R5_Design01/DoubleTab_G_Off2.gif); 
	background-position:top left; 
	background-repeat: no-repeat;
	padding:3 6 5 6;
	height:25px;
}
.lastTab
{
	background-image:url(../img/R5_Design01/DoubleTab_Dlong_Off.gif); 
	background-position:top right; 
	background-repeat: no-repeat;	
}
.emptyTab
{
	width:100%;
	display:inline-block;
}

Modifié par ordiminnie (28 Aug 2009 - 09:20)
Hello,

Peut-être en mettant une classe sur ton dernier onglet et en lui mettant la propriété display:bloc; car un block prend 100% de la largeur normalement... enfin faut essayer je suis pas sur du résultat Smiley biggol

PS : évite les style en dur
<div style="clear:both;visibility:hidden;"></div>

Modifié par pfoofen (21 Aug 2009 - 17:15)
Merci pour ta réponse mais ça ne fonctionne pas non plus.
Pour ce qui est du style en dur, c'est pas mon habitude normalement mais là je fais surtout des tests. Par après tout sera en fichier css.

Si quelqu'un a une idée je suis preneuse.
Et pourquoi pas même une autre solution (que cet onglet vide) pour rendre l'ensemble harmonieux ?

merci !
Salut,

ordiminnie a écrit :
Et pourquoi pas même une autre solution (que cet onglet vide) pour rendre l'ensemble harmonieux ?
Tout d'abord je ne comprends pas pourquoi tu imbriques des DIV au lieu d'utiliser une liste UL/LI/A (cf. Créer des menus simples en CSS).

Pour ce qui est du rendu je ne suis personnellement pas fan de l'onglet vide (sans même parler de la sémantique). Peut-être que tu pourrais essayer un border-bottom: 1px solid #808080 sur tes futurs LI...
Il est vrai qu'on doit utiliser des ul/li/a pour respecter la sémantique mais dans ce cas précis, le rendu souhaité est meilleur avec des div qu'avec des listes. Si je mets des listes, il me faudra jouer avec les styles pour avoir le rendu désiré. Sachant que IE ne comprends pas la même chose que FF, j'aurais encore plus de css... Et l'architecture générale du logiciel ne me permet pas de jouer facilement avec les css. Bref, c'est plus ,simple comme ça, à plusieurs niveaux. Désolée donc pour la sémantique...

Je ne suis pas non plus fan de l'onglet vide mais faut bien trouver qqch...

Je vais essayer avec un border-bottom, c'est pas une mauvaise idée.

Merci pour votre aide, je reste dans le coin au cas où qqun aurait une idée lumineuse ? Smiley cligne
Finalement, on a revu nos ambitions et on est revenu à des onglets sur une seule ligne.
Puisque il n'y a pas moyen d'avoir une solution propre qui contente tout le monde...

Merci pour vos interventions, je vais fermer ce sujet.
Bye
Sujet clos
Aller à