28172 sujets

CSS et mise en forme, CSS3

Centrer 5 blocks dans un footer

bonjour à tous

je débute en css3, j'essaye de faire un footer avec des groupements de listes séparés par uen barre verticlale.
j'ai réussi à trouver une astuce pour y parvenir, me reste plus qu'à centrer l'ensmeble dans une div générale.

quelle est la marche à suivre pour centrer ces 5 div blocks dans une div "conteneur" ?


ex:

[code]<div class="conteneur">
<div class="col">
<ul>
Infos I
<li><a href="#">infos 1a</a></li>
<li><a href="#">infos 1b</a></li>
<li><a href="#">infos 1c</a></li>
</ul>
</div>
<div class="bar">+</div>
<div class="col">
<ul>
infos II
<li><a href="#">infos 2a</a></li>
<li><a href="#">infos 2b</a></li>
<li><a href="#">infos 2c</a></li>
</ul>
</div>

code css:
.col {

float:left;

}
Modifié par adood (02 Feb 2012 - 11:29)
code css:

. bar {
ici un background url centré se répétant sur y
}
#conteneur {
?
text-align: center ->me centre les textes or je veux que les blocs soient centrés
}
Modifié par adood (02 Feb 2012 - 11:29)
exemple de base avec display:table; , mais peut-être pas ce que tu recherche vraiment.

<footer>
<div> contenu </div>
<div> contenu </div>
<div> contenu </div>
<div> contenu </div>
<div> contenu </div>
</footer>


footer {display:table;width:XX;margin: x;}
footer>div {display:table-cell;}


(Balise ton code sur le forum pour une bonne visibilité, merci.)

Cordialement, GC
Modifié par gc-nomade (02 Feb 2012 - 11:40)
yes j'ai essayé de baliser mais il prenait qu'une partie ^^

je vais essayer ton idée

que signifie le ">" dans le css ?
Bonjour,
Tout d'abord, quand tu postes du code sur le forum, utilises le bouton code.

Ensuite, ton code n'est pas très correct.
Ul ne peut contenir de texte directement, uniquement des éléments li.

W3C a écrit :
Content model:
Zero or more li elements.

Pour un code un peu plus correct :
<footer>
    <div class="colonne">
        <h2>Infos I</h2>
        <ul>
            <li><a href="#">infos 1a</a></li>
            <li><a href="#">infos 1b</a></li>
            <li><a href="#">infos 1c</a></li>
        </ul>
    </div>
    <div class="colonne">
        <h2>Infos II</h2>
        <ul>
            <li><a href="#">infos 2a</a></li>
            <li><a href="#">infos 2b</a></li>
            <li><a href="#">infos 2c</a></li>
        </ul>
    </div>
</footer>

Et avec une CSS comme suit, on arrive à les aligner horizontalement et à les centrer =)
footer .colonne {
    display : inline-block;
}

footer {
    text-align : center;
}


Edit : Dépassé et de loin par GC...
Modifié par Gothor (02 Feb 2012 - 11:55)
adood a écrit :
que signifie le ">" dans le css ?


Regade du coté des selecteur CSS, c'est trés trés utile de les connaitre Smiley smile .

Ici, l'idée est de ne ciblé que des div enfant direct de footer et pas d'autre si il te prenait l'idée de mettre d'autre div dans ce div ...

++
Modifié par gc-nomade (02 Feb 2012 - 11:54)
methode de GC marche direct ! l'autre non, il me centre les textes contenu ds chaque div, va savoir pk

merci à vous 2 pour votre aide !!
adood a écrit :
que signifie le ">" dans le css ?

De toute évidence tu débutes aussi en CSS2. Smiley cligne
hahaha

avant , il y a tres longtps, on détestait les CSS
c'était à base de table, de font etc......
bim autre galère :

même souci de centrage : une div (nav) avec une UL horizontale à centrer dans une div (header2 conteneur)


#header2 {
width:100%;
margin: 0 auto;
height:37px;
background-color: #000;
}
#nav {padding: 0px; width:960px; height:37px; margin: 0 auto; left:-480px; }
#nav ul {  margin: 0px, padding: 0px;}
#nav li {float:left;list-style-type: none;margin : 0px; padding: 0px;display:block}


code html :


<div id="header2">
   <div id="nav">
       <ul>
          <li><a href="z">ffff</a></li>
          <li><a href="z">jjjj</a></li>
          <li><a href="z">ddd</a></li>
       </ul>
   </div>
</div>
Sujet clos
Aller à