28172 sujets

CSS et mise en forme, CSS3

Mise en forme liste horizontale

Bonjour,

J'ai un petit problème de mise en forme donc je viens vers vous pour vous demander conseil.

Voici mon code html

<div>
      <ul>
           <li>
               <a>
                   <img>
                   <p>
                   </p>
               </a>
           </li>
           <li>
               <img>
               <p>
               </p>          
           </li>
           <li>
               <a>
                   <img>
                   <p>
                   </p>
               </a>
           </li>
      </ul>
</div>


Donc j'ai mon menu, dans ce menu certain li sont cliquables d'autre ne le sont pas d'où le fait que certain ont un <a></a> et d'autres non.

Le div fait 958px.

Je peux avoir entre 1 et 6 li de 150px chacun.

Le but est que mon menu soit horizontale, et que quelque sois le nombre de li le margin s'adapte. Exemple si j'ai un seul li il devra se trouver au milieu, si j'en ai plusieurs ils devront être à égale distance les un des autres.

J'espere être assez explicite.

Je vous remercie d'avance,

Shucky
Modifié par shucky (26 Feb 2010 - 10:06)
Biensur.

Voici où en est le CSS


#acces_produit {
	width: 958px;
}

#mod_acces_produit {
	width: 958px;
}

#acces_produit ul {
	width: 958px;
}

#acces_produit li {
	display: block;
	float: left;
	list-style-type: none;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 150px;
}

#acces_produit .unclickable img{
	opacity: 0.8;
}
#acces_produit img {
	max-width: 120px;
	max-height: 50px;
}
#acces_produit li a {
	display: block;
}


Et voici ce que ça donne pour l'instant en graphique.

upload/17789-Screenshot.png

(les traits rouges c'est là où il y'a un petit texte)

Merci de ton aide.

Shucky
Salut,

déjà il faut inverser ton imbrication : les liens A ne peuvent pas contenir de paragraphes P.
C'est pour ça que j'ai fait un display block sur le A.

Admettons que je remplace le P part un SPAN mais cela ne réglera pas le problème

Merci quand même.

Shucky
shucky a écrit :
C'est pour ça que j'ai fait un display block sur le A.

Admettons que je remplace le P part un SPAN mais cela ne réglera pas le problème
Je ne parlais pas de ton problème (ou en tout cas pas directement) mais de règles HTML : le fait de passer tes liens en display:block ne change rien au fait qu'ils ne doivent pas contenir de paragraphes : voir la liste des éléments enfant autorisés pour A.
Pour ce qui est de ta question :
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 958px;
	text-align: center;
}

ul li {
	display: inline-block;
	border: 1px solid #000;
}

ul li p {
	margin: 0;
	width: 142px;
	padding: 4px;
}
<ul>
	<li><p>Du texte 1<img src="uneimage1.gif" alt="une image 1" /></p></li>
	<li><p><a href="lien1.php">Du texte 2<img src="uneimage2.gif" alt="une image 2" /></a></p></li>
	<li><p><a href="lien2.php">Du texte 3<img src="uneimage3.gif" alt="une image 3" /></a></p></li>
</ul>
Et pour que le inline-bloc soit reconnu partout lire http://covertprestige.info/css/inline-block/
Sujet clos
Aller à