Galère de colonnes

[labarique]

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...

[Alipp]

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...