centrer ma page index

Version imprimable

23/04/2007, 19h01
MORPHEUS50

centrer ma page index

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
;)

Salut,

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

Code:

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>

8-)

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:

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:

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;
}

Ou alors beaucoup plus sale mais très efficace :

Code:

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>

24/04/2007, 10h45
Oli78
Sinon une méthode que j'utilise très souvent, qui rejoint un peu celle de Saturnin :

CSS :
Code:

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:yaisse2:

Pour le HTML tu peux reprendre celui de Saturnin ;)
24/04/2007, 14h05
mijean

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 :P )

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
24/04/2007, 14h38
MasterOfChakhaL
Difficile de faire plus simple que le css quand même...
Code:

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.
24/04/2007, 15h21
mijean

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 -.
24/04/2007, 15h53
MasterOfChakhaL

Citation:

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
24/04/2007, 16h40
mijean

1 pièce(s) jointe(s)

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.