28220 sujets

CSS et mise en forme, CSS3

Centrer horizontalement des divs consécutifs

Bonjour,

Comment puis-je centrer horizontalement une suite de div à l'intérieur d'une div englobante svp? J'ai essayé de mettre un "text-align:center" mais rien n'y fait...

mon html

            <div id="menu">
                    <div class="item"><a href="">Item1</a></div>
                    <div class="item"><a href="">Item2</a></div>
                    <div class="item"><a href="">Item3</a></div>
                    <div class="item"><a href="">Item4</a></div>
                    <div class="item"><a href="">Item5</a></div>
                    <div class="item"><a href="">Item6</a></div>
                    <div class="item"><a href="">Item7</a></div>
                    <div class="item"><a href="">Item8</a></div>
                    <div class="item"><a href="">Item9</a></div>
            </div>



et ma css

#menu{
    float: left;
    width: 500px;
    margin: 280px 25px 0 25px;
    text-align: center
}

.item{
    float: left;
    margin: 10px 5px 0 5px;
    line-height: 2.5em;  
}
Merci mais non Smiley smile

mon menu est dans un conteneur div flottante auto-centré verticalement, donc impossible d'etre en position absolue.
KorAmA a écrit :
mon menu est dans un conteneur div flottante auto-centré verticalement
Peux-tu être plus clair? Tel quel, ce que tu dit - ou ce que je comprends mal - est impossible.
Ooops, je voulais dire "auto centré horizontalement".

C'est à dire que j'ai une colonne "contenu" de 600px de large, centrée horizontalement dans ma page, dans laquelle je veux mettre un menu dynamique composé de div qui se répartissent sur une ou plusieurs lignes, centrées horizontalement dans la zone contenu.

Au départ, j'etais parti sur une construction en liste avec la propriété inline et nowrap, mais IE ne l'interprete pas comme il faut, donc je me suis rabattu sur une ecriture moins jolie en div, qui a l'avantage de ne pas necessiter nowrap, mais qui a le désavantage de ne pas prendre en compte l'attribut center...

Voilà...
KorAmA a écrit :
Merci mais non Smiley smile

mon menu est dans un conteneur div flottante auto-centré verticalement, donc impossible d'etre en position absolue.

text-align: center

Ca centre le text, pas la div....
KorAmA a écrit :
Ooops, je voulais dire "auto centré horizontalement".

C'est à dire que j'ai une colonne "contenu" de 600px de large, centrée horizontalement dans ma page, dans laquelle je veux mettre un menu dynamique composé de div qui se répartissent sur une ou plusieurs lignes, centrées horizontalement dans la zone contenu.

Au départ, j'etais parti sur une construction en liste avec la propriété inline et nowrap, mais IE ne l'interprete pas comme il faut, donc je me suis rabattu sur une ecriture moins jolie en div, qui a l'avantage de ne pas necessiter nowrap, mais qui a le désavantage de ne pas prendre en compte l'attribut center...

Voilà...

Si tu connais le nombre d'élément de ton menu, c'est très facile de les répartir, voir de les centrer.
Par contre, ton <div id="menu"> est pas du tout centrer.
je profite de ce post plutot que de pourrir le forum car j'ai une demande un peu similaire Smiley smile j'en profite aussi pour dire bonjour a tout le monde car je suis nouveau ici Smiley smile .

voila j'ai un peu comme notre ami environ 6 balises <div> qui represente des boutons de menu qui sont actuellement placé grace a mon fichier style.CSS.

Je voudrai regrouper tous mes boutons dans une seule et meme balise afin de centrer tous les bontons sans qu'ils se retrouvent supperposés Smiley confus

mon fichier HTML se presente ainsi Smiley decu je racourci le code pour la lecture)
a écrit :

<div id="Blocimg">
<div id="Bphotos" class="Style1"><a href="photosmini.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="montage.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="creations.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="peintures.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="livreor.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="liens.htm"</a></div>
</div>

et mon fichier CSS : (ligne complete)
a écrit :

#Blocimg {margin-left: auto; margin-right: auto; top: 130px; width: 700px; height: 100;}


Merci d'avance Smiley smile
Modifié par Ankart (03 Oct 2006 - 12:56)
Ankart a écrit :
mon fichier HTML se presente ainsi Smiley decu je racourci le code pour la lecture)

<div id="Blocimg">
<div id="Bphotos" class="Style1"><a href="photosmini.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="montage.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="creations.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="peintures.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="livreor.htm"</a></div>
<div id="Bphotos" class="Style1"><a href="liens.htm"</a></div>
</div>

et mon fichier CSS : (ligne complete)

#Blocimg {margin-left: auto; margin-right: auto; top: 130px; width: 700px; height: 100;}

Au passage:

- peux-tu éditer ton message afin de répondre aux règles du forum?
- il est préférable d'utiliser une liste non-ordonnée pour structurer ton menu plutôt qu'une suite de divs
- tes divs contenus dans "Blocimg" portent tous le même identifiant
- il est plus efficace de cibler un élément contenu dans un div par quelque chose comme #Blocimg ul li dans ta feuille de style que d'assigner systématiquement des classes aux éléments voulus dans ton code xhtml
- ces classes portent un nom à priori peu représentatif de l'effet visuel escompté ou du genre d'informations traité
- ton marquage de liens est erroné: <a href="liens.htm">Liens</a>
- il manque une unité ("px" je suppose) pour la hauteur de ton "Blocimg"
- margin-left: auto; margin-right: auto; peut être contracté en margin:0 auto;

Just my two cents... Smiley cligne
Modifié par Benjamin D.C. (03 Oct 2006 - 01:54)
Benjamin D.C. a écrit :

Au passage:

- peux-tu éditer ton message afin de répondre aux règles du forum?
Voila c'est dans des zolie cadres ...toutes mes excuses.
- il est préférable d'utiliser une liste non-ordonnée pour structurer ton menu plutôt qu'une suite de divs
Qu'entend tu par non-ordonné ?
- tes divs contenus dans "Blocimg" portent tous le même identifiant
Ca c'est a cause du copier coller XD
- il est plus efficace de cibler un élément contenu dans un div par quelque chose comme #Blocimg ul li dans ta feuille de style que d'assigner systématiquement des classes aux éléments voulus dans ton code xhtml
- ces classes portent un nom à priori peu représentatif de l'effet visuel escompté ou du genre d'informations traité
- ton marquage de liens est erroné: <a href="liens.htm">Liens</a>
Comme precisé j'ai tronqué les liens pour faciliter la lecture...
- il manque une unité ("px" je suppose) pour la hauteur de ton "Blocimg"
Sa hauteur est configurer dans le CSS dois-je aussi dans l'HTML ?
- margin-left: auto; margin-right: auto; peut être contracté en margin:0 auto;
Ca je file essayer de suite Smiley langue


Just my two cents... Smiley cligne

Modifié par Ankart (03 Oct 2006 - 12:57)
Pul$aR? a écrit :

Si tu connais le nombre d'élément de ton menu, c'est très facile de les répartir, voir de les centrer.
Par contre, ton <div id="menu"> est pas du tout centrer.


Je ne connais pas le nombre d'elements à priori, puisqu'ils sont amenés à évoluer en meme temps que le site.

je sais que le <div id="menu"> n'est pas centré (en fait il l'est dans l'élément que je souhaite mais là n'est pas le pb), ce que je veux c'est centrer les <div item> à l'intérieur du <div menu>

ce qui est fou (enfin non, pas fou mais logique), c'est qu'avec des listes c'est centré, mais impossible de faire de meme avec des div...
Modifié par KorAmA (03 Oct 2006 - 15:05)
Bonjour,

Je suis peut être à côté de la plaque ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test</title>

<style type="text/css">

#conteneur{
width: 600px;
margin: auto;
overflow: hidden;
border: 1px solid #968d00;
padding: 10px; 
}



ul {
list-style-type: none;
margin: auto;
width: 300px;
padding: 10px; 
border: 1px solid #968d00;
}


.menu li  {
margin: 0 2px;
width: 50px;
display: inline;
margin: auto;
text-decoration: none;
color: #000;
background: #fff;

}

</style>

</head>
<body>
<div id="conteneur">
	<ul class="menu">
    <li><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a></li>
	<li><a href="">Item 4</a></li>
    <li><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a></li>
	<li><a href="">Item 4</a></li>
    </ul>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eu justo quis odio pellentesque vestibulum. In hac habitasse platea dictumst. Duis luctus. Pellentesque elit. Suspendisse potenti. Ut vestibulum pulvinar lectus. Suspendisse nisi. Proin sollicitudin, ligula sed imperdiet gravida, leo nibh bibendum enim, id adipiscing tellus leo in quam. Aenean nec risus ullamcorper odio rhoncus semper. Proin quis enim ac ante consectetuer sollicitudin.</p>
</div>
</body>
</html>


Mais bon !!!
Bien joué mais non Smiley smile
Je ne veux pas qu'un item soit à cheval sur deux lignes. Ici çà marche car les titres sont courts, mais si un titre est plus long, il peut se retrouver sur deux lignes en meme temps.
Sujet clos
Aller à