28173 sujets

CSS et mise en forme, CSS3

[résolu] Liste + bordure droite: pas sur le dernier elmnt

Hello, j'ai une liste qui ressemble à ceci
ITEM1 | ITEM 2 | ITEM3 | ITEM4 |
J'aimerais ne pas avoir de bordure à la fin...
J'ai essayé ceci, mais ça ne marche pas Smiley decu 

				<ul>
					<li><a href="test">infos pratiques</a></li>
					<li>programme</li>
					<li>compétition</li>
					<li>futuranima</li>
					<li>invités</li>
					<li>à faire sur place</li>
					<li class="lastli">pros</li>
				</ul>



.menu2item {
	display:none;
	position:absolute;
	background-color:#FFF;
	padding:5px;
	margin-top:-2px;
	overflow:hidden;
	border: 1px solid #000;
	font-size:1.2em;
	margin-left:5px;
	}

.lastli {
	border-right: 0;
}

Modifié par gordie (25 Oct 2007 - 13:49)
Bonjour,
pas assez d'éléments pour te répondre.
Pourrais tu donner la totalité du code stp?
sûr ! Smiley cligne 


#normal {
	height:auto;
}
#menu {
	width:700px;
	font-variant:small-caps;
	display:block;
	float:left;
}
.menu2item {

	position:absolute;
	background-color:#FFF;
	padding:5px;
	margin-top:-2px;
	overflow:hidden;
	border: 1px solid #000;
	font-size:1.2em;
	margin-left:5px;
	text-align:left;
	}

.lastli {
	border-right: 0;
}




<div id="normal">
	<div id="menu">
		<div id="menu2">
			<div id="menu2_item1" class="menu2item">
				<ul>
					<li><a href="test">infos pratiques</a></li>
					<li>programme</li>
					<li>comp&eacute;tition</li>
					<li>futuranima</li>
					<li>invit&eacute;s</li>
					<li>&agrave; faire sur place</li>
					<li class="lastli" style="background-color:#ffc197">pros</li>
				</ul>
			</div>
			<div id="menu2_item2" class="menu2item">
				<ul>
					<li><a href="test">news</a></li>
					<li>les samedis d'anima</li>
					<li>distribution</li>
					<li class="lastli">la boutique</li>
				</ul>
			</div>
			<div id="menu2_item3" class="menu2item">
				<ul>
					<li><a href="test">l'animation belge en 8 points</a></li>
					<li>les &eacute;coles</li>
					<li class="lastli">les ateliers</li>
				</ul>
			</div>
			<div id="menu2_item4" class="menu2item">
				<ul>
					<li><a href="test">qui sommes-nous</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
Bonjour,
tu as une erreur de spécificité (priorité) au niveau de .lastli
Pour que la règle correspondante prenne le dessus sur
div#menu2_item1 li, div#menu2_item2 li, div#menu2_item3 li, div#menu2_item4 li {style4.css (line 133)
border-right:1px solid #666666;
display:inline;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-left:5px;
padding-right:5px;
}


Tu dois l'écrire comme cela
div#menu2_item1 .lastli, div#menu2_item2 .lastli, div#menu2_item3 .lastli, div#menu2_item4 .lastli {...}


Ou comme ceci:
.lastli {border-right: none !important;}



Je te conseil de lire cet article Smiley cligne
Modifié par Hermann (24 Oct 2007 - 19:22)
Sujet clos
Aller à