28172 sujets

CSS et mise en forme, CSS3

Probleme de ligne dans un menu

bonjour, je suis en train de réaliser un petit menu tout simple mais j'ai un probleme avec une ligne séparatrice (line-assurance.png). tout marche bien sauf qu'il y quatres lignes séparatrices et je voudrais effacer la premiere a droite, mais je n'y arrive pas avec le jeu des :after ...

Important la taille des <li> doit être impérativement à 229px de largeur.


#index-ass span{
  text-indent: -5000px;
  display:inline-block;
}
#index-ass ul{
  list-style-type:none;
  margin:0;
  padding:0;
  border:0;
}
#index-ass li{
  float: left;
  margin:0;
  padding:0;
}
#index-ass li a{
  top:36px;
  left:30px;
  display:block;
  height:60px;
  width:229px;
  background:#f0f0f0 url("assurance.png") no-repeat;
  margin:0 0px;
  border:1px solid #f0f0f0;
}
#index-ass #index-p-securise{
  background-position:10px 8px;
}
#index-ass #index-p-securise:hover,#menugauche #index-p-securise:active,#menugauche #index-p-securise:focus{
  background:#fff url("assurance.png") no-repeat;
  background-position:10px 8px;
}
#index-ass #index-s-client{
  background-position:-220px 8px;
}
#index-ass #index-s-client:hover,#index-ass #index-s-client:active,#index-ass #index-s-client:focus{
  background:#fff url("assurance.png") no-repeat;
  background-position:-220px 8px;
}
#index-ass #index-p-certifies{
  background-position:-460px 8px;
}
#index-ass #index-p-certifies:hover,#index-ass #index-p-certifies:active,#index-ass #index-p-certifies:focus{
  background:#fff url("assurance.png") no-repeat;
  background-position:-460px 8px;
}
#index-ass #index-b-imprimable{
  background-position:-695px 8px;
}
#index-ass #index-b-imprimable:hover,#index-ass #index-b-imprimable:active,#index-ass #index-b-imprimable:focus{
  background:#fff url("assurance.png") no-repeat;
  background-position:-695px 8px;
}
.line ul li:after {
position: absolute;
margin-top: -57px;
content: "";
display: block;
background: url('line-assurance.png') no-repeat;
height: 50px;
width: 1px;
}





<div id="index-ass" class="line">
   <ul>
    <li><a href="#" id="index-p-securise" ><span>plop1</span></a></li>
    <li><a href="#" id="index-s-client" ><span>plop2</span></a></li>
    <li><a href="#" id="index-p-certifies" ><span>plop3</span></a></li>
    <li><a href="#" id="index-b-imprimable" ><span>lien4</span></a></li>
   </ul>
  </div>


si vous avez une idée Smiley cligne
merci
Modifié par billout31 (14 Apr 2014 - 12:13)
et si tu fais ?: 
.line ul li + li:before {
content: "url('line-assurance.png') ";
display: inline-block;
vertical-align:middle;
padding:0 3px;
}
gc-nomade a écrit :
et si tu fais ?: 
.line ul li + li:before {
content: &quot;url('line-assurance.png') &quot;;
display: inline-block;
vertical-align:middle;
padding:0 3px;
}


un petit position:absolute; et ca marche !
merci beaucoup Smiley cligne
Sujet clos
Aller à