[Résolu] Css liste ul li sans image

Bonjour,



J'aime réaliser le style comme dans l'image en haut.
Je l'ai fait avec une image (color orange) comme background, et un border-radius pour la partie droite.

Est ce que c'est possible de faire le même style sans utiliser une image ?

Merci d'avance.
Modifié par Youn (19 Oct 2011 - 19:46)

Salut,

C'est possible. Il suffit d'appliquer border-radius sur la partie gauche. En revanche, côté code HTML, il faudra englober le texte dans un élément HTML afin de lui appliquer une couleur d'arrière-plan différente, ainsi qu'une bordure à sa gauche.

Victor BRITO a écrit :
Salut,

C'est possible. Il suffit d'appliquer border-radius sur la partie gauche. En revanche, côté code HTML, il faudra englober le texte dans un élément HTML afin de lui appliquer une couleur d'arrière-plan différente, ainsi qu'une bordure à sa gauche.

Merci pour ta réponse.

J'ai ajouté les <span> pour englober le texte, j'ai fait quelques tests mais je n'ai pas arrivé à produire le résultat voulu.

<div class="list1">
	<ul>
		<li><a href="#" title=""><span>text1<span></a></li>
		<li><a href="#" title=""><span>text2<span></a></li>
		<li><a href="#" title=""><span>text3<span></a></li>
	</ul>

</div>

Pour mon css initial (j'ai supprimé les modifications, puisque ils n'ont pas produit le résultat recherché):

#main .list1 span{

}
#main .list1 ul{
	padding-top:20px;
}
#main .list1 ul li{
	padding: 0 0 2px 20px;
}
#main .list1 ul li a{
	background-color:#ebebeb;
	color:#72aa21;
	text-decoration:none;
	font-weight:bold;
	line-height:18px;
	padding: 1px 20px 1px 5px;	
	border-radius:0px 5px 5px 0px;  

}

Span fera l'affaire pour englouber le texte?
Et pour la partie jaune et l'espace blanc, je dois modifier ça dans quelle partie?

Merci.
Modifié par Youn (19 Oct 2011 - 13:39)

Bonjour,

Voici un code qui devrait fonctionner à priori :

HTML :

<ul id="menu">
	<li><span>Alsa Creations Forum 1</span></li>
	<li><span>Alsa Creations Forum 2</span></li>
	<li><span>Alsa Creations Forum 3</span></li>
</ul>

CSS :

#menu, #menu li {
	margin: 0;
	padding: 0;
}

#menu li {
	width: 220px;
	height: 20px;
	line-height: 20px;
	background-color: #ffba00;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: arial, verdana, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #72aa21;
}

#menu li + li {
	margin-top: 4px;
}

#menu li span {
	margin-left: 15px;
	padding: 0 5px;
	display: block;
	background-color: #ebebeb;
	border-left: solid 5px #fff;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

Merci Jeremy, j'ai adapté ton code et ça donne le résultat recherché

Mon code s'il y a un débutant comme moi qui passe par là:

#main .list1 ul li{
	border-left: 15px solid #ffba00;
	border-radius: 5px;
	margin-top:4px;
}
#main .list1 a {
	background-color: #EBEBEB;
	border-left: 4px solid #FFFFFF;
	color: #72AA21;
	display: block;
	font-weight: bold;
	line-height: 18px;
	text-decoration: none;
	border-radius:0px 5px 5px 0px;
	padding-left: 5px;
}

Code HTML:

<div class="list1">
	<ul>
		<li><a href="#" title="">Conse vest</a></li>
		<li><a href="#" title="">Moles erits</a></li>
		<li><a href="#" title="">acud frrfs</a></li>
	</ul>
</div>

Merci encore Jeremy et Victor