CSS/PNG et liens

bonjour,
Ce sujet a du etre traite plusieurs fois mais je ne trouve pas de solution...
je realise un site en SPIP avec un menu a onglets (liste+png en background).
Mais quoi que je fasse je n'arrive pas a mettre les liens sur mes onglets...

<div id="banner"> <div id="img"></div>
    <div id="main-menu">
    <ul id="big-thumbs">
	<a href="toto.html"><li id="btn1">TOTO</li></a>
<a href="toto2.html"><li id="btn2">TOTO2</li></a>
<a href="toto3.html"><li id="btn3">TOTO2</li></a>
	</ul>
    </div></div>
    

Et ma CSS ;

/*Main Banner*/
#banner{
width:937px;
height:160px;
}


#main-menu{
position:relative;
left:250px;
width:550px;
height:160px;
}

#btn1 {
position:relative;
float:left;
z-index:3;
width: 180px;
background:url(../img/thumb1.png) no-repeat;
}

#big-thumbs li{
height:70px;
margin-left:-20px;
margin-top:15px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#EFEFEF;
line-height:25px;
}

A notter , j'utilise l'initialisateur de MEYER http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded

<modération : attention aux liens trop longs qui déforment le forum>
Modifié par Heyoan (24 Jul 2008 - 13:44)

Salut,

Déja commence par imbriquer tes balises <a> à l'intérieur des balises <li> et non l'inverse, car c'est le seul élément enfant que les balises <ul> autorisent.
Modifié par Mikachu (24 Jul 2008 - 13:26)

Oui mais comme ca y'a que le texte qui est clicable... Enfin de toute facon ca ne marche toujours pas. Mon texte est souligne et en bleu mais pas de clic possible meme sous FF

ikoma a écrit :
Oui mais comme ca y'a que le texte qui est clicable...

Ben, en mettant le lien dans le <li> aussi, non ? Enfin, de toutes façons, même si tu ne vois pas de différence, mets quand même ton lien dans le <li>.

Ensuite, tu mets dans ton html in <div id="img">, on peut avoir le CSS de cet élément ? Tu ne lui aurait pas mis une position:absolute et un hauteur qui le fasse passer par dessus ton menu, empechant de cliquer sur le menu par hasard ?

ikoma a écrit :
Oui mais comme ca y'a que le texte qui est clicable...

Il faut apprendre à utiliser display: block.

ikoma a écrit :
Mon texte est souligne et en bleu mais pas de clic possible meme sous FF

Le code HTML de la page est valide? (À vérifier avec un validateur HTML.)
Les liens ont bien un attribut href? (À vérifier dans le code HTML.)
Ils ne sont pas recouverts par un bloc transparent? (À voir avec Firebug, par exemple.)
Modifié par Florent V. (24 Jul 2008 - 15:45)

Salut,

En passant vite fait sur le sujet (erf le temps), je vois quelques erreurs html et css.

En position relative, je ne comprend pas trop pourquoi « left ». Je ne vois pas de position absolu également.

En ce qui concerne tes liens en bleu, tu ne les as pas définit dans ta css. C'est la raison pour laquelle tu as encore ce soucis.

Je rejoins ce qu'a dit Florent et mikachu, les balises de type ancre doivent être à l'intérieur et doivent au moins comporter l'attribut href.

<<<EDIT

Mikachu a écrit :
car c'est le seul élément enfant que les balises <ul> autorisent. cligne

Je ne pense pas puisque l'on peut insérer des images et peut être une <hr /> également. Mais bon de la à mettre un <h1> ou <p> ou etc. La syntaxe serait fausse. C'est comme dire la lune est carré.
EDIT;

++
Modifié par Nolem (24 Jul 2008 - 21:25)

Salut,

Nolem a écrit :
En position relative, je ne comprend pas trop pourquoi « left ». Je ne vois pas de position absolu également.

Alors c'est qu'il faudrait peut-être relire : initiation à la position relative (openweb).

Nolem a écrit :
Je ne pense pas puisque l'on peut insérer des images et peut être une <hr /> également. Mais bon de la à mettre un <h1> ou <p> ou etc. La syntaxe serait fausse. C'est comme dire la lune est carré.

Non : l'élément UL n'accepte comme enfant direct (pléonasme) que l'élément LI.

Salut Heyoan ,

Je ne savais pas que c'était possible d'utiliser left, bottom, ... en position relative. Je pensais que c'était seulement de l'ordre de la position en absolue.

En effet, un <ul></ul> ne peut accepter un <li></li>. Je parlais en fait d'un élément enfant <li>. Merci pour le lien

++

Nolem a écrit :
Je parlais en fait d'un élément enfant <li>.

Et comme tu as pu le voir, l'élément LI accepte beaucoup d'éléments enfants dont H1 et P !

a écrit :
Ensuite, tu mets dans ton html in <div id="img">, on peut avoir le CSS de cet élément ? Tu ne lui aurait pas mis une position:absolute et un hauteur qui le fasse passer par dessus ton menu, empechant de cliquer sur le menu par hasard ?

C'est effectivement ca le probleme... Mais je souhaite que mon img couvre mes onglets...

#img{
position:absolute;
background:url(../img/banner.png) no-repeat;
z-index:10;
width:937px;
height:160px;
}

a écrit :
En position relative, je ne comprend pas trop pourquoi « left ». Je ne vois pas de position absolu également.

Ma liste est horizontale le float left me permet de ne pas utiliser display inline. C'est mal?
La Position absolue est effectivmeent dans la banniere qui couvre le tout...

a écrit :
Le code HTML de la page est valide? (À vérifier avec un validateur HTML.)
Les liens ont bien un attribut href? (À vérifier dans le code HTML.)

oui c'est valide.

Nolem : Concernant la position relative ca ne sert a rien d'autre que de pouvoir utiliser le z-index, sinon avec le float c'est effectivement inutile...


Donc mon probleme est bien le PNG transparent en z-Index:10;
Que faire?
Changer la conception et placer mon image en dessous en cahngeant ma decoupe d'image?
Placer mes elements en position absolue par dessus ma banniere? (beurk) (et pourquoi pas dans dreamweaver re-beurk)?
???
Que faire?

Salut,

Heyoan a écrit :
Et comme tu as pu le voir, l'élément LI accepte beaucoup d'éléments enfants dont H1 et P !

En effet <li> accepte beaucoup de balise. Mais je voulais dire que ça n'avait pas de sens de mettre un <h1> dans un <li>. En tout cas la petite révision en position relative avec les propriétés left, top, etc. m'a fait du bien. Je ne connaissais pas cette variante de positionement. (On en apprend tous les jours )

ikoma a écrit :
Concernant la position relative ca ne sert a rien d'autre que de pouvoir utiliser le z-index, sinon avec le float c'est effectivement inutile...

Quand j'ai vu ton code, j'ai bien compris ce que tu veux faire. Surement, tu n'as pas besoin du z-index (à voir suivant ce que cela donne). Je t'aiguille en te disant qu'il te faut :
* position:relative
* position:absolute .

Il me semble qu'il y a un tut sur Alsacreationqui va te permettre de mieux comprendre ton soucis. Sinon, sur le site du zero, tu vas également en trouver un.

++

...
J'ai tout tente mais impossible... le probleme et que les onglet se superposent et ont des ombrages (en png 8) sauf pour les utilisayeur de IE6 mais tant pis pour eux...
En tout cas, j'ai pas reussi.
Reussi avec une div contenant une image transparente par dessus... Mais c'est moche!!! Mais ca marche