centrer ma page index

**MORPHEUS50** · 23/04/2007, 19h01

bonjour j'ai une page index d'une taille bien precise et je voudrai qu'elle soit toujour au centre de l'ecran

merci de votre aide

**zoom61** · 23/04/2007, 20h51

Salut,

Tu peux faire un tableau, avec des colonnes définies :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<table width="100%" height="100%">
   <tr>
      <td width="10%">&nbsp;</td>
      <td width="80%">
      tu mets le code de ta page
      </td>
      <td width="10%">&nbsp;</td>
   </tr>
</table>

**Saturnin** · 24/04/2007, 10h35

De façon plus stricte avec des div, voici un exemple avec un site de 780px de large qui sera toujours centré dans ta page.

Fichier HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="fr" xml:lang="fr">
 
<head>
 <title>Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <link rel="stylesheet" href="styles/styles.css" type="text/css"/>
</head>
 
<body>
 
 <div id="site">
  <!-- CONTENU DU SITE -->
 </div>
 
</body>
 
</html>

Fichier CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
body{ 
margin:0; padding:0;  
text-align:center; font-family:Arial; font-size:0.8em; 
color:#333; background:#EEE; 
}
 
#site{ 
margin:10px auto; width:780px;
text-align:left;
}

**scougirou** · 24/04/2007, 10h41

Ou alors beaucoup plus sale mais très efficace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<body>
 <div style="position:absolute; top:50%; left:50%" >
  <div style="position:absolute; top:-tahauteur px; left:-talargeur px">
    ton code blablabla
  </div>
 </div>
</body>

**Oli78** · 24/04/2007, 10h45

Sinon une méthode que j'utilise très souvent, qui rejoint un peu celle de Saturnin :

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
body {position:absolute;width:800px;height:700px; margin-left:-400px; margin-top:-350px; top:50%; left:50%; }

Tu définit la largeur et la hauteur de ta page puis en margin-left et margin-right la moitiée de ses valeurs. Un pti top et left à 50% et magie c'est centrée

Pour le HTML tu peux reprendre celui de Saturnin

**mijean** · 24/04/2007, 14h05

je me permet de répondre a ce post vu que voir ces extraits de bout de code eveille ma curiosité.

Je m'explique :

tout le monde dit : "bouhhhh les tableaux c'est le mal, c'est sale, les div c'est l'avenir, VOTEZ LES DIV !" (pardon je m'égare

)

Mais néanmoins quand je vois ces extraits de code, les div me paraissent vraiment une solution beaucoup plus "bidouille" que le tableau.

La ou avec un tableau on peut tout fixer en pourcentage et donc quelque soit la résolution du visiteur ca s'affichera bien, avec des divs il est impossible de faire ca, il faut forcement passer par des valeurs en px (chose que j'essaie de limiter au maximum, voir que je m'interdis), sans parler de margin négatif, ca fait vraiment bidouille.

J'ai encore énormement de choses a apprendre en ce qui concerne les div et le css, mais j'ai vraiment du mal a voir cet engouement pour cette méthode plutot qu'un tableau (et pourtant j'ai lu pas mal d'articles sur le sujet mais aucun ne m'a vraiment convaincu - sauf si c'est pour faire des tableaux avec des gifs transparent ou autre truc vraiment crade -)

/me sceptique

**MasterOfChakhaL** · 24/04/2007, 14h38

Difficile de faire plus simple que le css quand même...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
...
<body>
  <div style="width:50%;margin:auto;">lzflazkfla</div>
</body>

Avec les tableaux, tu es obligé de faire déjà 3 imbrications minimum pou mettre du contenu (table > tr > td ), et ceci sans compter les bloc quon ne définit pas forcément mais que le navigateur crée quand même (groupes de lignes, colonnes, groupe de colonnes...)
Si tu t'interesses aux algorithmes qui sont mis en jeu pour déterminer les dmensions d'un tableau, tu comprendras qu'utilier les tableaux pour le placement, c'est un peu comme écraser une mouche au bazooka.

De plus, lorsque tu définis des largeurs dans ton tableau, tu définis une taille minimum le navigateur étant tenu d'agrandir les cellules pour qu'elles s'adaptent à leur contenu.

Les marges négatives sont loin d'être une bidouille, elles te permettent de te libérer du quadrillage implicite qu'impose un tableau et ouvre donc des possibilités nouvelles.

centrer ma page index

HTML

Vue hybride

Partager

Partager