Center la page

Question

Julianoillic1

31 Jan 2010 à 17:45

Bonjour à tous,

je me présente, jeune débutant en css, je suis un peu voir complètement bloqué surement par une erreur de structure.
Bon après ce petit lynchage de moi même, je vous expose mon pb:
J'ai actuellement une page de 1600 * 1200 qui se compose en 3 colonnes avec 3 background différents ( 1 pour la colonne de droite, 1 pour le centre et enfin 1 pour la colonne de gauche)
Actuellement, ma page n'est pas centré quand je navigue sur mon test:
Pouvez m'aidez sur mon code ou bien me donner quelques corrections?

Je vous remercie de votre aide

vous trouverez ci dessous le css puis le html:

 
body
{
   width: 1600px;
   height: 1200px;
   position:absolute;
   margin-bottom: auto;
   margin-top: auto;
   margin-left: auto;
   margin-right: auto;
   padding:0px;   /* Pour centrer notre page */
}
.entetedroite
{
	width: 379px;
    height: 1200px;
	background-image: url(Frame_Droite.gif);
	background-position:top right;
	margin-bottom: 0px;
	margin-top: 0px;
	background-repeat:no-repeat;
	position: absolute;
    left:1215px;
    top: 0px;
}
.entetegauche
{
    width: 379px;
    height: 1200px;
	background-image: url(Frame_gauche.gif);
	background-position:top left;
	margin-bottom: 0px;
	margin-top: 0px;
	background-repeat:no-repeat;
	position: absolute;
    left:0px;
    top: 0px;
}

.entetemilieu
{
    width: 842px;
    height: 1200px;
    background-image: url(Frame_centrale.gif);
	background-position:top ;
	margin-bottom: 0px;
	margin-top: 0px;
	background-repeat:no-repeat;
	position: absolute;
    left:379px;
    top: 0px;
}


/head><body onload="MM_preloadImages('Prestations_ON.gif')">
     <div class="entetedroite"></div>
     <div class="entetegauche"></div>
     <div class="entetemilieu"></div>
     <div class="Accueil"></div>
<p class="bouton1"><a href="Site.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','Accueil_OFF.gif',1)"><img src="Accueil_ON.gif" width="66" height="46" border="0" id="Image1" /></a></p>
<p class="bouton2"><a href="Qui%20sommes%20nous.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','QuiSommesNous_ON.gif',1)"><img src="QuiSommesNous_OFF.gif" width="154" height="46" border="0" id="Image2" /></a></p>
<p class="bouton3"><a href="Notre%20Reseau.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','NotreReseau_ON.gif',1)"><img src="NotreReseau_OFF.gif" width="119" height="46" border="0" id="Image3" /></a></p>
<p class="bouton4"><a href="Nos%20prestations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','Prestations_ON.gif',1)"><img src="Prestations.gif" width="123" height="46" border="0" id="Image4" /></a></p>
<p class="bouton5"><a href="Nos%20tarifs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','Tarifs_ON.gif',1)"><img src="Tarifs_OFF.gif" width="80" height="46" border="0" id="Image5" /></a></p>
<p class="bouton6"><a href="Contactez%20nous.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','Contact_ON.gif',1)"><img src="Contact_OFF.gif" width="122" height="46" border="0" id="Image6" /></a></p>
<p class="bouton72"><a href="Espace%20client.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','EspaceClient_ON.gif',1)"><img src="EspaceClient_OFF.gif" width="111" height="46" border="0" id="Image7" /></a></p>
<div class="Accueil2"><ul>
	<li><a href= "">Actualité</a></li> 
		<li><a href= "">Espace Presse</a></li>
		<li><a href= "Contactez%20nous.php">Devis gratuit</a></li> 
		<li><a href= "">Télécharger nos tarifs</a></li>
        </ul></div></div>
</body>

Modifié par Julianoillic1 (31 Jan 2010 - 17:59)

Heyoan

31 Jan 2010 à 17:53

Hello Julianoillic1 et bienvenue sur le forum 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 l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Zebiloute

31 Jan 2010 à 19:40

Salut, en absolue du va avoir du mal à la centrer...
Modifié par Zebiloute (31 Jan 2010 - 19:47)

Sorano

31 Jan 2010 à 19:55

Effectivement, avec du positionnement absolu ça sera difficile. Il serait mieux d'avoir un div#container qui lui a une largeur fixe avec des marges automatiques. Et que tes 3 colonnes, tu les fasses flotter.

Donc, virer toutes les positions absolues, ajouter des floats sur tes colonnes et ajouter un autre div#container et ça devrait bien fonctionner.

Julianoillic1

31 Jan 2010 à 22:23

bonjour et merci de vos retour

pas contre, je ne comprends exactement la démarche, si j enlève l'absolute, comment dois je faire pour faire flotter mes 3 colonnes ?

j'ai appliqué cette méthode pouvez me conseiller sur la bonne formule?

je vous remercie de votre aide


body
{
   position:relative;
   margin-bottom: auto;
   margin-top: auto;
   margin-left: auto;
   margin-right: auto;
   padding:0px;   /* Pour centrer notre page */
}
#container{width:1600px;margin:auto;}
.entetedroite
{
	width: 379px;
    height: 1200px;
	float:right;
	background-image: url(Frame_Droite.gif);
	background-repeat:no-repeat;
	position: relative;
   
}
.entetegauche
{
    width: 379px;
    height: 1200px;
	float:left;
	background-image: url(Frame_gauche.gif);
	background-repeat:no-repeat;
	position: relative;
}

.entetemilieu
{
    width: 842px;
    height: 1200px;
    background-image: url(Frame_centrale.gif);
	float:right;
	background-repeat:no-repeat;
	position: relative;}

Modifié par Julianoillic1 (31 Jan 2010 - 22:49)

Laurie-Anne

1 Feb 2010 à 09:14

Bonjour,

Julianoillic1 a écrit :
pas contre, je ne comprends exactement la démarche, si j enlève l'absolute, comment dois je faire pour faire flotter mes 3 colonnes ?

Tu pourras utiliser "float" qui sert à faire flotter les éléments (contrairement au positionnement absolu).

Je te conseille de jeter un coup d'œil aux gabarits de Florent, qui pourront t'aider à revoir le positionnement de tes colonnes avec float. Je pense que le gabarit 11 correspond assez à ce que tu cherche à faire.

Tu peux également t'inspirer de ce tutoriel.

Julianoillic1

1 Feb 2010 à 18:20

Merci laurie-anne,

Par contre, ma taille de page fait 1600 /1200, je n'arrive toujours pas à la centrer quelqu'un pourrait il m'aidé? même si je pense que ce post doit avoir été cité au moins une centaine de fois, je ne trouve pas de réponse à mon problème..

Je vous remercie de votre aide..

Modifié par Julianoillic1 (01 Feb 2010 - 19:08)

Laurie-Anne

2 Feb 2010 à 09:08

Normalement, les marges en auto devraient centrer la page (si tu n'utilise pas le positionnement absolu).

Pourrais-tu nous montrer une page en ligne.

Par contre, 1600px de marge pour une page web, c'est énorme...

Majimerse

2 Feb 2010 à 09:38

Bonjour,

Essaye de remplacer tes

float: right;

par des

float: left;

Sujet clos

Questions générales et questions de débutants

Center la page