Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Centrer 5 blocks dans un footer
Auteur
adood
#
Citer
8 Posts
 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)
^
adood
#
Citer
8 Posts
 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)
^
gc-nomade
#
Citer
gcyrillus en mode portable
911 Posts
 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)
GC rien , mais GC encore ...
http://yidille.free.fr/plux/valign 
^
adood
#
Citer
8 Posts
 yes j'ai essayé de baliser mais il prenait qu'une partie ^^

je vais essayer ton idée

que signifie le ">" dans le css ?
^
Gothor
#
Citer
325 Posts
 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)
Gothor
^
gc-nomade
#
Citer
gcyrillus en mode portable
911 Posts
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 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)
GC rien , mais GC encore ...
http://yidille.free.fr/plux/valign 
^
adood
#
Citer
8 Posts
 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 !!
^
fvsch
#
Citer
20100 Posts
adood a écrit :
que signifie le ">" dans le css ?

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

http://fvsch.com 
^
adood
#
Citer
8 Posts
 hahaha

avant , il y a tres longtps, on détestait les CSS
c'était à base de table, de font etc......
^
adood
#
Citer
8 Posts
 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>


^
gc-nomade
#
Citer
gcyrillus en mode portable
911 Posts
 bonjour,

Tu peut une fois de plus te servir de display:table; ... ou de display:inline-block/inline/... et de float ou pas :
Quelques exemples CSS pour centrer horizontalement une liste sans se servir de position ou de marge négatives : http://yidille.free.fr/plux/valign/?52-menu-centre-technique-de-base-et-avancees et ces exemples ne sont pas exhaustifs .

Il n' y a pas de solution universelle, mais celle qui convient smile

Cordialement,
GC
GC rien , mais GC encore ...
http://yidille.free.fr/plux/valign 
^
Prévenir un modérateur
Répondre au sujet
Aller à