28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis confronté à un problème sur mes list, je n'arrive pas à attribué
list-style:none

Quelqu'un peux t-il m'aider à résoudre ce problème, je précise que c'est un site sous spip, et il s'agit des list situées dans le menu de gauche de ce site : Mon site

la partie HTML :
<div id="navigation">
                	<div class="modules">					
	<div class="contautresansli">
		<h2>Derniers sites</h2>
		<ul>
		<li>		
				<b>Forums des Aliciens (Alice et AliceBox)</b><br />
				Les discussions récemment actives de Forums des Aliciens (Alice et AliceBox)</li>
			
		</ul>
		<br class="nettoyeur" />
	</div>
			</div>
            <div class="modules"> 
            			 
	<div id="tagcloud">
		<h2>Tags</h2>		
		<ul class="nuage">
			<li>
	<a rel="tag" href="spip.php?mot1" class="nuage10">
		Documents</a>
	<span class="frequence"> (1/1)</span>
</li>
		</ul>
	</div><!--#tagcloud-->
</div>       		
        <div id="encartcentrale">
        	        	<div id="col_droite">       
                   	<div class="modules">				
            <div class="stats">
	<h2>Statistiques du site</h2>				
		La base d'articles est consult&eacute;e environ 5&nbsp;fois
		par jour. 
		ToOleNet contient:
		<ul>										<li>1&nbsp;br&egrave;ve</li>						    			    			    			
				<li>3&nbsp;articles</li>						
				<li>1&nbsp;site r&eacute;f&eacute;renc&eacute;</li>
<li>2&nbsp;messages dans
		les forums</li>			
				<li>2&nbsp;membres</li>			
	  </ul>
</div>					</div>
			    </div>  <!-- Fin col_droite -->
			    <div id="col_gauche">
			        	<div class="modules">				
            <div class="modules">	
		<h2>Derniers membres inscrits</h2>
		<ul>
			<li>Aucun membre inscrit pour le moment.</li>
		</ul>	
</div> 
			</div> 			    
			    </div>   <!-- Fin col_gauche -->  			
			<div class="modules">	
			</div>


La partie CSS:
/* mise en page de la colonne de navigation */

#navigation{ float: right; padding-left:4px; width: 40%; font-size:10px; background:#fff; }

/*  mise en page de la colonne centrale */

#encartcentrale{ float: left; width: 100%; font-size:11px; background:#fff;}

#col_droite {background-color: #fff; float: left; width:45%;}
#col_gauche {background-color: #fff; float: left; margin-left: 5px; width:45%;}
.modules h1 {font-style: italic; font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; margin-bottom:10px; }

.modules {background-color: #fff; padding:5px; margin-bottom:2px; }

.modules h2 {font-style: italic; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; margin-bottom:5px; padding-bottom:3px; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; }

.modules ul {padding:0; margin:10px; }

.modules ul li {background:url(../images/gifs/puce_bleu.gif) no-repeat 0% 6px; padding-left:10px;}

.modules ul li a {text-decoration:none; }

.modules ul li a:hover {text-decoration:none;}

.modules p images.spip_logos {float:left; padding:2px; border:1px solid #CCC; margin-right:10px; }

.modules p {text-align:justify; }

.modules strong i {color:#B1AE7E; }

.modules fieldset {border:#FFF; }

.modules legend {padding:5px 0 10px 0; color:#B1AE7E; }

.modules label {display:block; }



.contautresansli h1 {font-style: italic; font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; margin-bottom:10px; }

.contautresansli {background-color: #fff; padding:5px; margin-bottom:2px; }

.contautresansli h2 {font-style: italic; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; margin-bottom:5px; padding-bottom:3px; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; }

.contautresansli ul {padding:0; margin:10px; }

.contautresansli ul li {list-style: none; padding-bottom:20px;}

.contautresansli ul li a {text-decoration:none; }

.contautresansli ul li a:hover {text-decoration:none;}

.contautresansli p images.spip_logos {float:left; padding:2px; border:1px solid #CCC; margin-right:10px; }

.contautresansli p {text-align:justify; }

.contautresansli strong i {color:#B1AE7E; }

.contautresansli fieldset {border:#FFF; }

.contautresansli legend {padding:5px 0 10px 0; color:#B1AE7E; }

.contautresansli label {display:block; }







.navigation h1 {font-style: italic; font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; margin-bottom:10px; }

.navigation {background: #fff url(../images/barre.gif) no-repeat right; padding:5px; margin-bottom:2px; }

.navigation h2 {font-style: italic; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; margin-bottom:2px; padding-bottom:1px; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; }

.navigation ul {padding:0; margin:10px; }

.navigation ul li {background:url(../images/gifs/puce_bleu.gif) no-repeat 0% 6px; padding-left:10px; }

.navigation ul li a {text-decoration:none;}

.navigation ul li a:hover {text-decoration:none;}

.navigation p images.spip_logos {float:left; padding:2px; border:1px solid #CCC; margin-right:10px; }

.navigation p {text-align:justify; }

.navigation strong i {color:#B1AE7E; }

.navigation fieldset {border:#FFF; }

.navigation legend {padding:5px 0 10px 0; color:#B1AE7E; }

.navigation label {display:block; }

#tagcloud { color: #999;}

#tagcloud * { color: #888; }

#tagcloud * { color: #999; }

#tagcloud * { display: inline; line-height: normal; }

#tagcloud .on { color: #333; }

#tagcloud h2 {display: block; font-style: italic; font-size: 12px;  font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; margin-bottom:10px; padding-bottom:3px; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; }

/* le nuage */

#tagcloud ul.nuage {

	margin:0;

	padding: 0;

	list-style: none;

}

#tagcloud ul.nuage li {

	display: inline;

	line-height:2em;
	
}

#tagcloud ul.nuage li a {

	white-space: nowrap;

	color: #B1AE7E;

}



#tagcloud ul.nuage li a:hover {

	white-space: nowrap;

	color: #B1AE7E;

	text-decoration: underline;

}



#tagcloud ul.nuage span.frequence {

	display: block;

	float: left;

	height: 0;

	overflow: auto;

	width: 0;

}


Voilà je crois qu'il y à tout, sinon j'ai mis l'adresse du site, merci Smiley cligne
Modifié par Express (12 Jun 2008 - 09:51)
Salut,

.contautresansli ul li {list-style: none; padding-bottom:20px;

Peut être car il faut définir cette propriété sur la liste elle même et non sur les éléments de liste, ça fonctionnerait déja mieux ainsi. Smiley cligne
Mikachu a écrit :
Salut,

.contautresansli ul li {list-style: none; padding-bottom:20px;

Peut être car il faut définir cette propriété sur la liste elle même et non sur les éléments de liste, ça fonctionnerait déja mieux ainsi. Smiley cligne

Je n'ai pas compris ta remarque Smiley ohwell
Cela vient du choix de ton sélecteur : tu définis la propriété list-style sur tout <li> se situant dans une <ul>. Or c'est sur la liste <li> qu'il convient de le définir.

Ainsi ton sélecteur devrait être :
.contautresansli ul {list-style: none;}
Bonjour, Smiley smile

Mikachu t'indique simplement ton erreur.
Au lieu d'affecter cette instruction à tes éléments de li <li>, affecte-là à ta liste <ul>.

Ce qui donnera :
.contautresansli ul {list-style: none;}

Au lieu de :
.contautresansli ul li {list-style: none;}


édit : Damned ! Grillée
Modifié par Cygnus (11 Jun 2008 - 15:54)
Mikachu a écrit :
Cela vient du choix de ton sélecteur : tu définis la propriété list-style sur tout <li> se situant dans une <ul>. Or c'est sur la liste <li> qu'il convient de le définir.

Ainsi ton sélecteur devrait être :
.contautresansli ul {list-style: none;}


Ok j'étais pas sûr d'avoir compris,mais si.Or de cette façon cela ne fonctionne toujours pas Smiley ohwell
voici ce que j'ai mis et que vous pouvez contrôlé sur le site dans les sources :
.contautresansli h1 {font-style: italic; font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; margin-bottom:10px; }
.contautresansli {background-color: #fff; padding:5px; margin-bottom:2px; }
.contautresansli h2 {font-style: italic; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; color:#B1AE7E; font-weight:bold; margin-bottom:5px; padding-bottom:3px; background:url(../images/gifs/pointbleu.gif) repeat-x bottom left; }
.contautresansli ul {padding:0; margin:10px; list-style: none;}
.contautresansli ul li { padding-bottom:20px;}
.contautresansli ul li a {text-decoration:none; }
.contautresansli ul li a:hover {text-decoration:none;}
.contautresansli p images.spip_logos {float:left; padding:2px; border:1px solid #CCC; margin-right:10px; }
.contautresansli p {text-align:justify; }
.contautresansli strong i {color:#B1AE7E; }
.contautresansli fieldset {border:#FFF; }
.contautresansli legend {padding:5px 0 10px 0; color:#B1AE7E; }
.contautresansli label {display:block; }