Mettre une image de fond à une balise <li> en css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mettre une image de fond à une balise <li> en css

spaceuniverse

Voila, à l'aide d'un tuto sur les css j'ai fais un menu vertical déroulant. Pour cela j'ai créé une liste que je modifie avec les css.
Par contre j'arrive à mettre une image de fond à toute la liste et pas à chacuns des boutons du menu. comment faire ?

voici le code html pour la liste :

Code :

<ul id="menu">
<li><a href="#">Sculptures</a></li>
<li><a href="#">Fabrication</a>
<ul>
<li class="bouton"><a href="#">Armoires</a></li>
<li><a href="#">Bibliothèques</a></li>
<li><a href="#">Chaises</a></li>
<li><a href="#">Bureaux</a></li>
<li><a href="#">Tables</a></li>
<li><a href="#">Divers</a></li>
</ul>
</li>
<li><a href="#">Restauration</a>
<ul>
<li><a href="#">Armoires</a></li>
<li><a href="#">Commodes</a></li>
<li><a href="#">Secretaires</a></li>
<li><a href="#">Chaises</a></li>
<li><a href="#">Bureaux</a></li>
<li><a href="#">Tables</a></li>
<li><a href="#">Divers</a></li>
</ul>
</li>
</ul>

et le code css :

Code :

ul#menu li ul{
display:none;
}
ul#menu li:hover>ul{
display:block;
}
ul#menu{
float:left;
}
ul#menu,ul#menu ul {
background-image: url('fond.jpg');
border:1px solid #990000;
list-style:none;
margin:0px;
padding:0px;
width:148px;
_width:150px;
}
ul#menu ul{
position:absolute;
top:-1px;
left:148px;
}
ul#menu li {
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menu a {
display:block;
width:100%;
color:#000000;
text-decoration:none
}
ul#menu a:hover {
background:#000000;
color:#FFFFFF;
}

Publicité

masklinn

í dag viðrar vel til loftárása

heeuu, tu sais que "ul#menu li:hover>ul" ne fonctionnera pas sous IE, que "_display" n'existe pas et qu'afficher les <li> en inline est une très mauvaise idée?

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

sibelius

Vous êtes sûr ?

masklinn a écrit :

et qu'afficher les <li> en inline est une très mauvaise idée?

Ah bon, tu préfères les float ? :??:

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

masklinn

í dag viðrar vel til loftárása

sibelius a écrit :

Ah bon, tu préfères les float ? :??:

[:petrus75]

tu parles de mettre des blocs en float plutôt que des inlines seuls?
oui, mettre des images en fond d'éléments inline c'est loin d'être top

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

sibelius

Vous êtes sûr ?

masklinn a écrit :

[
tu parles de mettre des blocs en float plutôt que des inlines seuls?
oui, mettre des images en fond d'éléments inline c'est loin d'être top

Bah, l'image doit être en fond du lien (<a> ) pas de la puce (<li> ), non ?
Mais bon, sur le fond, c'est vrai que des images dans un inline, ça le fait pas trop.
Par contre, s'il s'agit de menu simple sans image, je préfère de loin la fluidité du display inline plutôt que du float.

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

masklinn

í dag viðrar vel til loftárása

sibelius a écrit :

je préfère de loin la fluidité du display inline plutôt que du float.

On est d'accord, mais son problème est qu'il n'arrive pas à mettre ses images en fond des <li> [:spamafote]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

sibelius

Vous êtes sûr ?

masklinn a écrit :

On est d'accord, mais son problème est qu'il n'arrive pas à mettre ses images en fond des <li> [:spamafote]

On est d'accord. Je retourne me coucher :sleep:

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

masklinn

í dag viðrar vel til loftárása

sibelius a écrit :

On est d'accord. Je retourne me coucher :sleep:

:hello:
neunuit

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Hermes le Messager

Breton Quiétiste

sibelius a écrit :

Bah, l'image doit être en fond du lien (<a> ) pas de la puce (<li> ), non ?
Mais bon, sur le fond, c'est vrai que des images dans un inline, ça le fait pas trop.
Par contre, s'il s'agit de menu simple sans image, je préfère de loin la fluidité du display inline plutôt que du float.

Le display inline ne fonctionne pas avec Opera dans le cas des "li". (en tous cas sous Linux). ET float fonctionne, mais à condition de préciser la longueur de "ul".

---------------
Expert en expertises

sibelius

Vous êtes sûr ?

@Hermes > OK pour Opera / Linux.
Pour float et le dimensionnement de <ul> je le sais bien.
Ce qui est gênant dans le cas de positionnement flottant, c'est :
- l'alignement difficile à gérer (centrer le menu, aligner à droite = inverse les éléments, etc.)
- le débordement (les float débordent de leur contenuer <ul> sauf définition de la hauteur de <ul> ou utilisation de clear, etc.

Rien de méchant, mais en toute théorie (même si tu m'apprends que Opera / Linux l'implémente mal), il est plus propre d'aligner les éléments avec display inline que float qui n'est pas spécifique à cet emploi (même s'il fonctionne en bidouillant un peu)

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

FORUM HardWare.fr

Programmation

HTML/CSS

Mettre une image de fond à une balise <li> en css

Sujets relatifs
image + lien aléatoires à l'ouverture d'une page ... ??	Afficher plusieurs fois la même image à différents endroits
Une image = un lien qui souvre en pop up	[Résolu] Resample d'image anti aliasé => interpolation BICUBIC
Mettre en forme de l'html généré par PHP [resolu(tu m'étonnes :p)]	Déplacement d'une image
puis je mettre des panel dans des borderlayout ?	Incruster du texte dans une image
Du texte sur une image redimmensionnée ...	[flash] Impossible de rendre mon swf fond transparent
Plus de sujets relatifs à : Mettre une image de fond à une balise <li> en css

Page générée en 0.068 secondes