28173 sujets

CSS et mise en forme, CSS3

Centrer plusieurs DIV quelque soit la taille de l'écran

Bonjour,

je suis en train de créer un site internet dont la plupart des pages sont faites comme ceci :

Une image composée de :

une balise <div> avec une image (div n°1)
une 2e balise <div> positionnée de manière précise par rapport au div n°1 (div n°2)
une 3e balise <div> positionnée de manière précise par rapport au div n°1 (div n°3)

Et ainsi de suite... Smiley biggrin

J'aimerai que l'image composée de tous ces div soit centrée peu importe la taille de l'écran de l'internaute... c'est à dire que j'aimerai que le div n°1 soit centré mais qu'ensuite les div n°2 et n°3 (...) gardent leur positionnement par rapport au div n°1 parce que si tout est centré sur ma page, ça va être la foire !!

Voilà, si quelqu'un a des pistes je suis preneuse.

Merci bcp pour votre aide.

Peqquie
Bonjour,

j'ai lu effectivement ce tuto, mais je n'arrive à centrer que mon premier Div et mes div suivants ne sont par conséquent plus du tout positionnés par rapport au div d'origine.

Mes pages ne sont pas en ligne, mais voici le codage de l'une d'entre elle par exemple :

"
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contacts</title>
<style type="text/css">
<!--
img {
border: none;
}
-->
</style>
</head>

<body background="images/compo11.png" marginwidth="0" marginheight="0">

<div align="center" valign="middle" id="layer1" style="position: absolute; z-index: 1; left: 1px; top: 2px;"><img src="images/menucote4.png" alt="BB Zen" align="absmiddle" /></div>

<div align="center" valign="middle" id="layer2" style="position: absolute; z-index: 2; left: 30px; top: 168px;"></div>

<div align="center" valign="middle" id="layer3" style="position: absolute; z-index: 3; left: 125px; top: 492px;"><a href="legal.html" target="_top"><img src="images/menulegal3.png" alt="Mentions légales" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer4" style="position: absolute; z-index: 4; left: 84px; top: 206px;"><a href="association.html" target="_top"><img src="images/menuasso3.png" alt="Qui sommes-nous ?" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer5" style="position: absolute; z-index: 5; left: 61px; top: 241px;"><a href="ateliers.html" target="_top"><img src="images/menuateliers3.png" alt="Ateliers" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer11" style="position: absolute; z-index: 11; top: 139px; left: 28px;"><a href="index3.html" target="_top"><img src="images/logopourmenu3.png" alt="BB Zen" align="absmiddle" /></a></div>

<div align="center" valign="middle" id="layer6" style="position: absolute; z-index: 6; left: 48px; top: 280px;"><a href="agenda.html" target="_top"><img src="images/menuagenda3.png" alt="Agenda" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer7" style="position: absolute; z-index: 7; left: 94px; top: 395px;"><a href="boutique.html" target="_top"><img src="images/menuboutique3.png" alt="Boutique" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer8" style="position: absolute; z-index: 8; left: 103px; top: 431px;"><a href="media.html" target="_top"><img src="images/menumedia3.png" alt="Médiathèque" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer9" style="position: absolute; z-index: 9; left: 71px; top: 357px;"><a href="contacts.html" target="_top"><img src="images/menucontacts3.png" alt="Contacts" align="absmiddle" /></a></div>

<div align="center" valign="middle" id="layer10" style="position: absolute; z-index: 10; left: 56px; top: 319px;"><a href="doulas.html" target="_top"><img src="images/menudoulas3.png" alt="Doulas" align="absmiddle"></a></div>


</body>
</html>
"

Merci pour ton aide.[#]
Bonjour et bienvenue parmi nous, peqquie Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
toutes mes confuses... effectivement je suis nouvelle et novice... dans ce mon de codage et de sites web etc... mais j'y mets de la bonne volonté et je compte bien y arriver !

Voici donc mon message "propre" :

Bonjour,

j'ai lu effectivement ce tuto, mais je n'arrive à centrer que mon premier Div et mes div suivants ne sont par conséquent plus du tout positionnés par rapport au div d'origine.

Mes pages ne sont pas en ligne, mais voici le codage de l'une d'entre elle par exemple :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contacts</title>
<style type="text/css">
<!--
img {
border: none;
}
-->
</style>
</head>

<body background="images/compo11.png" marginwidth="0" marginheight="0">

<div align="center" valign="middle" id="layer1" style="position: absolute; z-index: 1; left: 1px; top: 2px;"><img src="images/menucote4.png" alt="BB Zen" align="absmiddle" /></div>

<div align="center" valign="middle" id="layer2" style="position: absolute; z-index: 2; left: 30px; top: 168px;"></div>

<div align="center" valign="middle" id="layer3" style="position: absolute; z-index: 3; left: 125px; top: 492px;"><a href="legal.html" target="_top"><img src="images/menulegal3.png" alt="Mentions légales" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer4" style="position: absolute; z-index: 4; left: 84px; top: 206px;"><a href="association.html" target="_top"><img src="images/menuasso3.png" alt="Qui sommes-nous ?" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer5" style="position: absolute; z-index: 5; left: 61px; top: 241px;"><a href="ateliers.html" target="_top"><img src="images/menuateliers3.png" alt="Ateliers" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer11" style="position: absolute; z-index: 11; top: 139px; left: 28px;"><a href="index3.html" target="_top"><img src="images/logopourmenu3.png" alt="BB Zen" align="absmiddle" /></a></div>

<div align="center" valign="middle" id="layer6" style="position: absolute; z-index: 6; left: 48px; top: 280px;"><a href="agenda.html" target="_top"><img src="images/menuagenda3.png" alt="Agenda" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer7" style="position: absolute; z-index: 7; left: 94px; top: 395px;"><a href="boutique.html" target="_top"><img src="images/menuboutique3.png" alt="Boutique" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer8" style="position: absolute; z-index: 8; left: 103px; top: 431px;"><a href="media.html" target="_top"><img src="images/menumedia3.png" alt="Médiathèque" align="absmiddle"></a></div>

<div align="center" valign="middle" id="layer9" style="position: absolute; z-index: 9; left: 71px; top: 357px;"><a href="contacts.html" target="_top"><img src="images/menucontacts3.png" alt="Contacts" align="absmiddle" /></a></div>

<div align="center" valign="middle" id="layer10" style="position: absolute; z-index: 10; left: 56px; top: 319px;"><a href="doulas.html" target="_top"><img src="images/menudoulas3.png" alt="Doulas" align="absmiddle"></a></div>


</body>
</html>


Merci pour ton aide.
Modérateur
Salut,

Suivant ton code, plusieurs erreurs se sont glissées. Regarde ce tuto. Il répondra à ta demande Smiley cligne .

<edit>

<body>


<div id="element_a_centrer">
<img src="images/menucote4.png" alt="BB Zen" align="absmiddle" />
</div>


<img src="images/menulegal3.png" alt="Mentions l?gales" align="absmiddle"/>
<img src="images/menuasso3.png" alt="Qui sommes-nous ?" align="absmiddle">
<img src="images/menuateliers3.png" alt="Ateliers" align="absmiddle"/>
<img src="images/logopourmenu3.png" alt="BB Zen" align="absmiddle" />
<img src="images/menuagenda3.png" alt="Agenda" align="absmiddle"/>
etc.
</body>



body { 
 background-image: url(images/compo11.png); //amélioration de ton code
 text-align: center //correction du bogue IE. Merci Biloute
}
element_a_centrer {
 margin-right: auto; //centrage
margin-left: auto; //centrage
width: 500px //largeur de ton element a centrer
}

Cette mise en page, je l'ai fait de tête. Il se peut toutefois qu'il ait quelques erreurs.
Je ne t'ai pas corrigée le reste de ta page. Sache que trop de div, tue le div Smiley cligne .
</edit>

++
Modifié par Nolem (19 Jul 2007 - 11:24)
peqquie a écrit :
toutes mes confuses... effectivement je suis nouvelle et novice... dans ce mon de codage et de sites web etc... mais j'y mets de la bonne volonté et je compte bien y arriver !

Il aurait fallu un tout petit peu plus de bonne volonté, par exemple en suivant les liens que je te donnais qui t'expliquaient comment éditer ton message précédent et ne pas en créer un nouveau. Smiley cligne
Sujet clos
Aller à