labarique Posté 21 Avril 2008 Partager Posté 21 Avril 2008 Bonjour, je suis perdu ! Je souhaite afficher du contenu sous formes de colonnes, mais je n'arrive pas à aligner les <DIV> ! Voici le code html en question : <DIV CLASS="milieu_sommaire"><DIV class="cellule_sommaire">CONNAISSANCES<DIV CLASS="colonne"><I>Article scientifique</I><UL><LI style="list-style-image: url(IMG/icone4.gif)"><SPAN CLASS="listepuce">Article 1</A></SPAN></LI><LI style="list-style-image: url(IMG/icone4.gif)"><SPAN CLASS="listepuce">Article 1</A></SPAN></LI><LI style="list-style-image: url(IMG/icone4.gif)"><SPAN CLASS="listepuce">Article 1</A></SPAN></LI></UL></DIV><DIV CLASS="colonne"><I>Sites Web</I><UL><LI style="list-style-image: url(IMG/icone4.gif)"><SPAN CLASS="listepuce">Article 1</A></SPAN></LI><LI style="list-style-image: url(IMG/icone4.gif)"><SPAN CLASS="listepuce">Article 1</A></SPAN></LI></UL></DIV><DIV CLASS="colonne"><I>Autres documents</I><UL><LI style="list-style-image: url(IMG/icone4.gif)"><SPAN CLASS="listepuce">Article 1</A></SPAN></LI><LI style="list-style-image: url(IMG/icone4.gif)"><SPAN CLASS="listepuce">Article 1</A></SPAN></LI></UL></DIV></DIV></DIV> Et les éléments CSS afférents : .milieusommaire{ padding-left: 36px; width: 800px; float: left; clear: right; }.cellule_sommaire{ font-size: small; width: 100%; float: left; clear: left; clear: right;}.colonne{ width: 48%; float: left; border-color: #f40; border-style: solid;}.listepuce{ color: black; font-size: x-small; vertical-align: 3px;} Quelqu'un peut-il m'aider ? Je suis perdu dans tous mes clear et float... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Alipp Posté 22 Avril 2008 Partager Posté 22 Avril 2008 Salut, il y a pas mal de choses à changer dans ton code, voici la liste, en vrac : - supprimer du code tout ce qui concerne la mise en forme, et le mettre dans le css - supprimer les "span" dans ta liste et gérer la mise en forme dans le css au niveau des "li" - supprimer tes balises fermantes "/a" qui n'ont pas de balise ouvrante - etc.... Mais comme je suis sympa, voilà les modifs effectuées : Pour ton code html : <div class="milieu_sommaire"> <div class="cellule_sommaire"> CONNAISSANCES <div class="colonne"> <span class="entete">Article scientifique</span> <ul> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li> </ul></div> <div class="colonne"> <span class="entete">Sites Web</span> <ul> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li> </ul></div><div class="colonne"><span class="entete">Autres documents</span> <ul> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li> </ul></div></div></div> Pour ton css : .cellule_sommaire{ font-size: small;}.colonne{ width: 33%; float: left; border-color: #f40; border-style: solid;}.entete{ font-style: italic;}li{ color: black; font-size: x-small; vertical-align: 3px; list-style-image: url(IMG/icone4.gif);} A savoir que : div class="milieu_sommaire" et div class="cellule_sommaire" peuvent (devraient) être transformées en "id" s'ils sont uniques. Dans ce cas là, il te faudra les appeller par "#milieu_sommaire" et "#cellule_sommaire" dans ton css. 1 ou 2 heures de "potassage" des bases de css et html pourraient t'être utiles... Voilou... En espérant que ça t'aidera... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant