Webmaster Hub > Galère de colonnes

Version complète: sur le forum Webmaster Hub : Galère de colonnes

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

labarique

lundi 21 avril 2008 à 18:33

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 :

CODE

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

CODE

.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

mardi 22 avril 2008 à 12:40

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 :

CODE

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

CODE

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.