Forum : CSS : span vide

Bonsoir, j'aimerai creer un menu avec une ressource trouvée en psd sur le web, je place donc mes liens ... hover,active tout ça et je découpe mon séparator qui fais 2x34 px. Place au code html :

<div class="menu">
        <ul>
            <li><a href="">Lien 1</a></li>
                <span class="seprator"></span>
            <li><a href="">Lien 2</a></li>
                <span class="seprator"></span>
            <li><a href="">Lien 3</a></li>
                <span class="seprator"></span>
            <li><a href="">Lien 4</a></li>
        </ul>
    </div>

puis au code CSS :

span.separator {
    content:'';
    background:url(separator.png) no-repeat;
    display:block;
    width:2px;
    height:34px;
}

Voilà je ne comprends pas pourquoi elles ne s'affichent pas pourtant j'ai mis un content vide donc ... :/ Bre, merci d'y jeter un coup d'oeil et par la meme occasion de me donner un petite réponse :D
Bonne nuit ^^

Grafikart

Réponse acceptée

Ce n'est pas
li .separator {

mais
li.separator qu'il faudrait :)

Astor

Auteur

Réponse acceptée

La pub n'est pas de moi, c'est l'hébergeur qui l'applique :/.

Sinon je mets li.separator mais il n'y a tjrs pas de changements !

MAIS ! j'ai trouvé mon erreur tout seul et je suis vraiment dégouté qu'elle soit aussi bete :( dans mon html j'avais mis <li class="seprator"></li> mais j'avais oublié le "a" à separator xD et puis j'ai remplacé le display:block par un display:inline-block et tout est reglé !
Merci à tout les trois :D

djtec

Vire tes span et met des li à la placa car là tu casse la structure html

Astor

Auteur

Auncun changement, je sais pas si j'ai bien remplacé :

<div class="menu">
        <ul>
            <li><a href="">Lien 1</a></li>
                <li class="seprator"></li>
            <li><a href="">Lien 2</a></li>
                <li class="seprator"></li>
            <li><a href="">Lien 3</a></li>
                <li class="seprator"></li>
            <li><a href="">Lien 4</a></li>
        </ul>
    </div>

li .separator {
    content:'';
    background:url(separator.png) no-repeat;
    display:block;
    width:2px;
    height:34px;
}

djtec

Serait-il possible d'avoir le css complet de tes li

Astor

Auteur

Voici tout mon code css :

body {
    background:url(bkg.png) repeat;
    margin:0;
}
.menu {
    background:url(menu.png) repeat-x;
    height:38px;
}
.menu ul{
    text-decoration:none;
    display:inline;
    height:38px;
    line-height:38px;
}
.menu li{
    list-style:none;
    display:inline;
    height:38px;
    line-height:38px;
    margin-left:20px;
}
.menu li a{
    height:38px;
    width:50px;
    text-decoration:none;
    color:#fff;
}
.menu li a:hover{
    background:url(menu-hover.png) repeat-x;
    height:38px;
    width:50px;
}
.menu li a:active{
    background:url(menu-active.png) repeat-x;
    height:38px;
    width:50px;
}
li .separator {
    content:'';
    background:url(separator.png) no-repeat;
    display:block;
    width:2px;
    height:34px;
}

Je reserve les :before et :after pour des images arrodis ;)

Grafikart

Possible d'avoir un lien vers la page HTML ?
Le fait que tes spans soit en dehors des LI je ne suis pas sûr que ça soit super valide....

Astor

Auteur

Je fais ça des que je retourne chez moi. Mais je ne comprends pas pourquoi elles ne saffichent pas j'ai jamais utilisé cette balise en fait ^^

Astor

Auteur

Voici : http://firstclic.hebergratuit.com/teste2/index.html ;)

Hotgeart

Je te déconseille de ne pas mettre une pub adsense avant que le site ne soit fini.

De plus il est logique que tu as des problèmes. Tu appliques un style aux li et ensuite tu ré-applique un autre style aux li.

Je te conseil de garder la structure en li mais de mettre un background a tes li qui sera le separator que tu mettra en top right.

CSS : span vide

10 réponses