argggggg je bloque sur des <li> e <ul> en css !!

wana · 17 Décembre 2007

Salut la communuaté !

Merci d'avance de votre aide.
Ce n'est pas dans mon habitude de venir demander mais là j'y suis depuis 2 h et je perds trop de temps et surtout trop de cheveux.... :lol:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">
ul#tabnav {
    list-style-type: none;
    padding-bottom: 28px;
    border-bottom: 1px solid black;
    margin: 0px 2px 0px 2px;
}

ul#tabnav li {
    float: left;
    height: 28px;
}

ul#tabnav li.active {
    border-bottom: 1px solid #FF83BB;
    background-color: #FF83BB;
}





#tabnav a:hover {
    background: #FF83BB;
}
</style>
</head>

<body>

<ul id="tabnav">
<li> Salut 1 </li>
       <li> Salut 2 </li>
	   <li> Salut 3 </li>
</ul>

</body>
</html>

Voilà... pour une fois c'est sous IE que ça marche, lol
Mais sous FF le "Salut 1" est décalé vers la droite
j'ai tout essayé... en vain, ce fichu "Salut 1" reste décalé vers la droite alors qu'il devrait être collé à gauche.

Une âme charitable qui maîtrise le CSS pour m'aider ?

thx

Victor BRITO · 17 Décembre 2007

Dans ta CSS, ul est superflu : #tabnav suffit largement pour sélectionner la liste en question. :wink:

Essaie de supprimer les marges de tes li.

wana · 17 Décembre 2007

Merci Victor

Selon tes recommandations j'ai fait ceci :

Code:

<style type="text/css">
#tabnav {
    list-style-type: none;
    padding-bottom: 28px;
    border-bottom: 1px solid black;
}

#tabnav li {
    float: left;
    height: 28px;
}

#tabnav li.active {
    border-bottom: 1px solid #FF83BB;
    background-color: #FF83BB;
}





#tabnav a:hover {
    background: #FF83BB;
}
</style>

... mais rien à faire... sous FF le "Salut1" est décalé vers la droite
Sous IE ça marche bien, le Salut1 est à gauche et commence au même endroit que le trait noir du dessous.
Sous FF j'aimerais que le texte commence au même niveau que le trait noir :/

Victor BRITO · 17 Décembre 2007

Définis une hauteur à #tabnav.

wana · 17 Décembre 2007

:/ aucun changement même en faisant une hauteur.

Je crois qu'en fait le soucis c'est que FF fait un retrait droit sur le premier "Salut1" car c'est une liste
Donc comment empêcher que FF fasse ce retrait ?
si c bien ça le soucis...

Merci

Victor BRITO · 17 Décembre 2007

Remplace list-style-type par list-style tout court et supprime les marges de tes li.

wana · 17 Décembre 2007

Toujours pareil, ça marche sous IE mais pas FF
le texte est toujours décalé vers la droite ! je vais devenir chèvre

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">
#tabnav {
list-style:none;
    padding-bottom: 28px;
    border-bottom: 1px solid black;
}

#tabnav li {
    float: left;
    height: 28px;
}

#tabnav li.active {
    border-bottom: 1px solid #FF83BB;
    background-color: #FF83BB;
}





#tabnav a:hover {
    background: #FF83BB;
}
</style>
</head>

<body>

<ul id="tabnav">
<li> Salut 1 </li>
       <li> Salut 2 </li>
	   <li> Salut 3 </li>
</ul>

</body>
</html>

darkjukka · 17 Décembre 2007

Code:

#tabnav {
list-style:none;
    padding-bottom: 28px;
    border-bottom: 1px solid black;
    padding-left: 0px;
}

Avec ce padding-left, le texte reste collé à gauche

Victor BRITO · 17 Décembre 2007

Un problème de marge interne. Corrige comme suit :

Code:

#tabnav {
list-style:none;
    padding: 0 0 28px 0;
    border-bottom: 1px solid black;
}

En gros, tu n'as modifié que la marge interne inférieure, en laissant les autres à leur valeur par défaut, variable selon les navigateurs (FF, Opera et Safari, par exemple, définissent des padding à li, contrairement à IE). Un peu de lecture à ce sujet sur Alsacréations.

Édition : grillé

bproductiv · 17 Décembre 2007

display:block ? sur tes li .. non?
une url ca sera plus simple pour tester avec l'extension webdevelopper

Victor BRITO · 17 Décembre 2007

bproductiv a dit:
display:block ? sur tes li .. non?

Un display: block sur un élément li est quasi superflu (je dis quasi car, par défaut, cet élément reçoit un display: list-item dans la feuille de style des navigateurs, du moins si ces derniers s'inspirent de celle suggérée par le W3C). :wink:

bproductiv · 17 Décembre 2007

Le float left il sert a quoi en fait?? pour les mettre en ligne? alors met display:inline...

Victor BRITO · 17 Décembre 2007

bproductiv a dit:
Le float left il sert a quoi en fait?? pour les mettre en ligne? alors met display:inline...

Si tu utilises display: inline, tu ne pourras définir ni hauteur, ni largeur, ni marges. Une autre solution consiste à utiliser display: inline-block, mais ça ne marchera ni sous IE ni sous FF (pour les versions antérieures à la 3).

wana · 17 Décembre 2007

yessssss en définissant le padding left ça marche nickel !
vous êtes vraiment des pros les gars
spécial thx à Victor

@++++++