18041 sujets

Questions générales et questions de débutants

Attribuer automatiquement la place restante

Bonjour,

J'ai composé une bannière en CSS d'une longueur de 100%.
J'attribue 20% à un onglet et 10% à deux autres onglets. Il devrait me rester 60% mais comme il y a des espaces entre les onglet j'ai un peu moins (56%) environ.
Si je donne 56% au dernier onglet son espace avec les autres onglets est trop large, en revanche si je lui donne une valeur de 572px c'est bon.

Je voudrai savoir s'il n'existerai pas une valeur width : qui attribuerait automatiquement la place disponoble restante de manière à l'appliquer à cet onglet ?

Voici mon CSS concernant la barre de navigation :

#onglets
{        position : absolute;
        border : 1px solid transparent;
        padding : 0;
        font : bold 11px Batang, arial, serif;
        background-image: url(/Forum/images/Blue_background);
        list-style-type : none;
		margin-left : 0;
		margin-right : 0;
        margin-top : 0;
        width : 100%;
		}

#onglets li
{    float : left;
    height : 20px;
    margin : 2px 2px 0 2px 
    margin : 4px 2px 0 2px; 
    border : 1px solid #FFFFFF;	
}

#onglets li.annonce
       { float : left;
    height : 20px;
   font-size: 10px;
   width : 572px;
   margin : 2px 2px 0 2px
    margin : 4px 2px 0 2px; 
    border-bottom: 1px solid #fff;}
	
#onglets li.petit
       { float : left;
    height : 20px;
    font-size: 10px;
    text-decoration: none;
    width : 10%;
    margin : 2px 2px 0 2px !important;  
    margin : 4px 2px 0 2px; 
    border-bottom: 1px solid #fff;}

#onglets li.moyen
       {float : right;
    height : 20px;
    font-size: 10px;
    text-decoration: none;
    width : 20%;
    margin : 2px 2px 0 2px !important;  
    margin : 4px 2px 0 2px; 
    border-bottom: 1px solid #fff; }

#onglets a
       {display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
	background-image: none;}

#onglets a:hover
{
    background-image: none;
	
}

#menu
{
        border-bottom : 1px solid;
        padding-bottom : 25px;
}



Merci de votre lecture Smiley smile
Excuses.

Voilà une page de test aux normes CSS : -http://www.micro-astuce.com/image/testy

Merci
Modifié par renard11 (30 Apr 2007 - 18:07)
renard11 a écrit :
Excuses.

Pas besoin de s'excuser. C'est juste que pour ce genre de problème la page visible en ligne est l'outil le plus adapté pour proposer conseils et solutions. Smiley cligne


Pour revenir au problème :

1 - Le fond du problème vient du fait que les les bordures de 1px se rajoutent à la largeur des li. Donc tu ne peux pas donner à chaque li une largeur de 12.5% (1/8), car les pixels cumulés feront que ça ne dépassera la largeur totale disponible. Et tu ne peux pas demander une largeur de « 12.5% moins 2px ».

2 - Une solution possible serait d'avoir des li de largeur 12.5%, et sans bordures, marges ou padding latéraux. Partant, les bordures seraient plutôt appliquées aux liens. Ce qui peut donner (en remplaçant le code actuel) :
#onglets-bas li {
	float : left;
	width: 12.5%;
	/* height : 20px; ... les hauteurs fixes pour les éléments contenant du texte, c'est pas toujours une bonne idée... */
	text-align: center;
}
#onglets-bas li.gold {
	/* Rien du tout */
	/* font-size: 10px; ... les tailles de texte en pixels non plus, c'est pas une très bonne idée... */
}
#onglets-bas li.last-gold { 
	/* Rien du tout */
}
#onglets-bas a {
	display : block;
	padding : 4px;
	border: 1px solid #DFE8FF;
	color : #666;
	text-decoration : none;
}
#onglets-bas a:hover,
#onglets-bas a:focus, /* mise en évidence du lien lors du focus en navigant avec le clavier */
#onglets-bas a:active /* même chose mais pour IE... */
{
	color: orange;
}

Voilà... au passage, j'ai pas mal épuré le code, et rajouté quelques commentaires et indications de bonnes pratiques.

3 - Malgré tout, la solution proposée ci-dessus posera peut-être problème à Internet Explorer, qui a parfois du mal à calculer correctement les arrondis en pixels des dimensions données en pourcentages. Suite à un calcul d'arrondi un peu foireux, on pourrait se retrouver avec un ou deux pixels de trop, et le dernier flottant se retrouverait alors à la ligne, vu que tout doit tenir sur pile 100% de largeur.

Une solution pour parer ça est de faire que le dernier item de liste ne soit pas flottant, mais simplement en flux (si besoin, il faudra lui attribuer un float: none via une classe, par exemple). Il est repoussé par les autres flottants et vient se placer tout à droite.

Par contre, pour que le bloc lui-même soit repoussé par les flottants, et pas uniquement son contenu (NB : les flottants repoussent le contenu, mais en temps normal pas les blocs eux-même... au contraire, ils « flottent » par dessus, justement), il faudra ruser un peu :
#onglets-bas li.last-gold { 
	overflow: hidden; /* crée un contexte de formatage qui oblige les flottants à repousser les limites du bloc */
	zoom: 1; /* propriété CSS conférant le [i]layout[/i] au bloc, afin d'émuler l'effet d'un contexte de formatage dans IE 6, qui n'appliquera pas la propriété [i]overflow[/i] pour cela. */
}

Dans l'idéal, la dernière propriété (le zoom: 1) serait à adresser à Internet Explorer 6 et inférieurs uniquement. Pour cela, on pourra utiliser un commentaire conditionnel et créer une feuille de styles de correctifs pour IE6 et inférieurs (note : beaucoup de correctifs ne sont plus nécessaires pour IE7).
Pour les commentaires conditionnels, voir la FAQ du forum.

4 - Si pas le temps d'apprendre à maitriser tout ça, on peut retenir que l'utilisation d'un tableau à huit cellules n'est pas interdite. Les tableaux font toujours partie des spécifications HTML 4.01 et XHTML 1.0, sont donc parfaitement valides, et -- utilisés avec parcimonie -- rendent parfois de fiers services. De plus, les tableaux bien utilisés sont tout à fait accessibles.
renard11 a écrit :
Quand j'aurai tout fini pourrai-je te demander de jetter un oeil sur la feuille de style au complet histoire de regarder s'il n'y a pas d'autre choses à épurer ?

Heu... c'est que ça risque de prendre du temps. À la rigueur, je pourrai faire quelques remarques, mais pas plus.
Sujet clos
Aller à