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.

**mijean** · 24/04/2007, 15h21

Je sais que le css c'est fort néanmoins il reste un hic qui me trouble pas mal.

Prend le css garden par exemple, tu le mattes en 1024*768 (ma résolution au taff), tu resize ton bureau en 800*600 tu te retrouves avec une belle scrollbar horizontale pour pouvoir profiter de tout le site. Ca c'est a cause des div fixé en px, ce qui est obligatoire pour pouvoir "bien" les placer.

Maintenant quand je regarde mon site en 1024*768, je resize en 800*600 tout se compacte et tient sur la page, évitant les scrollbar horizontale tres ***antes pour le visiteur lambda (bon ok c'est pas tout a fait vrai pour l'instant g une banniere trop grande mais c'est pas la définitive xD)

Perso je n'ai jamais reussi - bon ok jme suis pas trop cassé la tête dessus non plus, faut avancer le site ^^ - à placer tous mes divs comme je voulais en utilisant uniquement des pourcentages, par contre avec des tableaux j'y arrive - et ce aussi bien pour firefox que pour IE6 ou 7, avec les divs les résultats étaient assez hasardeux -.

**MasterOfChakhaL** · 24/04/2007, 15h53

Envoyé par mijean

Ca c'est a cause des div fixé en px, ce qui est obligatoire pour pouvoir "bien" les placer.

C'est justement là que tu te trompes.
Tu as à ta disposition 8 unités (relatives et absolues)
px, pc, pt, em, in, cm, mm, % (j'en oublie peut-être)

et 4 modes de positionnement (static, relative, fixed, absolute).

il y a aussi les float qui sont assez puissant.

Après c'est sur que le feeling ne suffit plus quand on essaie d'exploiter toutes les subtilités offertes par css

**mijean** · 24/04/2007, 16h40

j'ai cherché les unités de mesure et j'ai trouvé.

j'ai encore du mal a voir l'utilité des autres unités de mesure, par contre oui moi aussi je suis fan des floats, c vraiment tres pratique :]

Par contre ne te méprends pas, je connais quand meme les bases en css hein xD

Si tu regardes la piece jointe que j'ai attaché a ce post tu verras que je me sers de divs en float pour placer les gros elements du site, mais par contre dans le corps de la page en elle meme j'utilise des tableaux, c'est surtout sur ces divs la que je n'arrivais pas a avoir le rendu souhaité et que j'ai preferé utiliser les tableaux.

Est ce une bonne méthode je ne sais pas, mais le rendu n'est pas si mal et je ne pense pas que niveau code la page soit si lourde que ca au final. N'hésites pas à me dire si je me trompes ce point m'interesse tout particulierement.

centrer ma page index

HTML

Partager

Partager