Régler ma page en fonction de la taille/resolution de l'écran

**libuma** · 30/10/2008, 00h11

Bonjour,

J'ai créé un site , il est bien centré et d'une bonne taille sur un écran standard 17''.
Quand je l'ouvre à partir d'un écran plus large , il n'est plus centré et j'aimerais par la même occasion que la taille de ma page soit conséquente.

Est-ce que vous pourriez me mettre sur la voie pour effectuer celà ?

Merci

**blueice** · 30/10/2008, 11h31

Ouh là, le site ne doit pas être fait pour différentes tailles d'écrans mais pour les résolutions en général.
800px de large ou 1024px de large, c'est ce qui se fait en général.

P.S. : Ton écran 17" possède plusieurs résolutions...

**bugz57** · 30/10/2008, 15h24

Salut,

Essaye de mettre dans la balise body :

Code :

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

1
2
 
<body style="text-align:center">

et fait un div conteneur de toute ta page avec :

Code :

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

1
2
 
<div style="margin-left:auto;margin-right:auto;text-align:left">

**libuma** · 30/10/2008, 19h27

Bonsoir !

Tout d'abord , merci pour la réponse.

J'ai fais tout ce que tu m'as dis "bugz57" , mais ça ne change rien.
Par contre , j'ai oublié de dire que sur IE , c'est bien centré , par contre , sous Firefox , c'est toujours sur la gauche !

Voilà ce que ça donne quand on lit les sources , avec les lignes que j'ai rajoutée

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<body style="text-align:center" onload="init()">
<div style="margin-left:auto;margin-right:auto;text-align:left">
 
<table border="0" width="1024" align="center" cellspacing="3" cellpadding="3">
<tr><td>
<!-- Bannière-->
<img width="915" height="250" src="images/banniere.jpg" alt="Banner"/>
 
<!-- Barre de navigation -->
<table class="navigate" width="915" height="30" border="0">

Enfin.. voici les premieres lignes , j'espère que vous pouvez m'en dire plus.

**HiRoN** · 30/10/2008, 21h13

Salut,

As-tu été voir ici ?

**libuma** · 30/10/2008, 21h21

Envoyé par HiRoN

Salut,

As-tu été voir ici ?

Salut,
Désolé mais je ne vois pas vraiment le rapport.
Sur cette page ils montrent comme résoudre le bug IE,hors , de mon coté , c'est plutôt un bug Mozilla firefox :/

**HiRoN** · 30/10/2008, 21h33

Salut,
Désolé mais je ne vois pas vraiment le rapport.
Sur cette page ils montrent comme résoudre le bug IE,hors , de mon coté , c'est plutôt un bug Mozilla firefox :/

Je m'explique...

(avis personnel bien sûr)
Si tu suis le lien, au niveau différences :

- Pas de margin & padding à 0 sur ton body.
- Pas de width appliqué à ton div (alors qu'il est bien noté : Note : Il faut obligatoirement spécifier une largeur width au bloc à centrer.).

Une taille et ensuite défini sur ton table, mais non pas sur le div concerné.
Ce n'est peut-être pas la solution, mais en tout une piste de réflexion

P.S :

Sur cette page ils montrent comme résoudre le bug IE

Non, cela montre en même comment corriger le "bug" sur IE mais le titre est bel est bien : Comment centrer horizontalement n'importe quel élément en CSS ? (sous-entendu tout navigateur...)
Cela n'est-il pas en rapport direct avec ton problème ?

Pour apprendre facilement CSS regarde ces tutoriels et cours de formation CSS : http://css.developpez.com/cours/

**libuma** · 30/10/2008, 21h47

Envoyé par HiRoN

Je m'explique...

(avis personnel bien sûr)
Si tu suis le lien, au niveau différences :

- Pas de margin & padding à 0 sur ton body.
- Pas de width appliqué à ton div (alors qu'il est bien noté : Note : Il faut obligatoirement spécifier une largeur width au bloc à centrer.).

Une taille et ensuite défini sur ton table, mais non pas sur le div concerné.
Ce n'est peut-être pas la solution, mais en tout une piste de réflexion

P.S :
Non, cela montre en même comment corriger le "bug" sur IE mais le titre est bel est bien : Comment centrer horizontalement n'importe quel élément en CSS ? (sous-entendu tout navigateur...)
Cela n'est-il pas en rapport direct avec ton problème ?

J'avoue.. j'ai triché un peu , après avoir lu ce lien , j'ai fais les modifs pour être pareil que sur le site.. toujours pas de résultat!(magie de l'informatique!

)

Voilà ce que ça donne chez moi de ce qui nous intéresse :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<body onload="init()">
<div class="centrer">
 
<!-- Bannière-->
<img width="915" height="250" src="images/banniere.jpg" alt="Banner"/>
 
<!-- Barre de navigation -->
<table class="navigate" width="915" height="30" border="0">
  <tr class="pt">

Et côté CSS :

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
 
body
{
 background-color:#b8b8b8;
 
 width:915px;
 margin:0px; 
  padding:0px;
  text-align:center; /* pour résoudre le bug de centrage de IE */
}
 
.centrer
 {
  margin:auto;
  width:915px;
  text-align:left;  /* pour résoudre le bug de centrage de IE */
}

Merci!

**12monkeys** · 30/10/2008, 21h57

Bonsoir

Je pense que ton problème viens du fait que tu as mis un width à body, ce que ne montre pas l'exemple de la faq. Le width doit être mis sur le conteneur qui doit être centré soit : .centrer (ce que tu as fait).

Bref enlève le width sur le body.

EDIT : Une petite explication : tu essayes de centrer "centrer" par rapport à body or les deux ont la même largeur, donc "centrer" est bien centré par rapport à body mais comme il a la même largeur... Essaye en laissant le width du body et réduit celui de "centrer"...

**libuma** · 30/10/2008, 22h00

Envoyé par 12monkeys

Bonsoir

Je pense que ton problème viens du fait que tu as mis un width à body, ce que ne montre pas l'exemple de la faq. Le width doit être mis sur le conteneur qui doit être centré soit : .centrer (ce que tu as fait).

Bref enlève le width sur le body.

En effet , génial..

Merci à tous !

Régler ma page en fonction de la taille/resolution de l'écran

CSS

Discussions similaires

Partager

Partager