Forum Clubic

Alignement d'un page css suivant la taille de l'ecran

Bonjour, je voulais juste savoir si il etait possible d’aligner au centre de ma page mon element body, sachant que je ne suis pas en % mais en pixel?

J’aimerai que si j’ai une resolution 800X600, je prenne tt la page sans marge et que si je suis en 1024X768, je centre au milieu
En fait, cela revient a centrer dans les 2 cas mais j’y arrive pas car je fixe ma taille de ma page a 800px

j’ai une feuille css

merci
Edité le 06/08/2007 à 08:25

Quand la taille est fixée, tu peux dire au navigateur (si != IE<6) de mettre des marges automatiques :

body { text-align: center; /* IE */ }
#content {margin: auto; width: 800px;}

bon alors voila ce que j’ai fait mais cela ne focntionne pas… si qq’un sais pourquoi:

ma css.php

include_once("../sourcesPHP/resolution.inc.php");
header("Content-type: text/css");
body {
	width: 1011px;
	position: fixed;
	margin: auto;
	margin-left: '.MARGEAUTOCLIENT.'px;
}

mon fichier resolution.inc.php

<?php
if($res != 1) {     
	?><script language="JavaScript">                            
	document.location="../sourcesPHP/resolution.inc.php?res=1&resolution="+screen.width;                       
	</script><?; 
}

$deux=$_GET['resolution']-1011;
$marge=$deux/2;

define ("MARGEAUTOCLIENT",$marge);

Malheureusement, j’ai 0 dans $_GET[‘resolution’] donc ca me donne au final MARGEAUTOCLIENT à -511, donc pas terrible

Qq’un a une idée?
merci
Edité le 06/08/2007 à 11:28

pourquoi faire si compliqué ? :heink:

tu fais juste ce qu’à dit sans-nom dans ta feuille CSS, rien d’autre (sachant que #content est l’id de ton div qui englobe ta page). Laisse tomber le PHP (surtout que $_GET c’est pour récupérer des informations issues de l’URL de ta page, donc normal que tu ait 0)
Edité le 06/08/2007 à 12:38

et bien j’ai essayé mais sans succes… c’est pour ca !

Heu sinon tu confond javascript & php… l’un est côté client, l’autre côté serveur. N’attend pas plus que ça.

ha non, mais je demande qu’a comprendre… voici ce que j’ai essayé de faire avec ce que tu m’a dit:


include_once("../sourcesPHP/defines.inc.php"); // la ou est defini LARGEURPAGE à 1011
header("Content-type: text/css");

echo'


body { 
	width: '.LARGEURPAGE.'px;
	text-align: center; /* IE */ 
}

#content {
	margin: auto; 
	width: '.LARGEURPAGE.'px;
}';

mais avec ce code, ma page reste collé a gauche…

Vire le width sur body…

Si l’élément parent fait lui aussi la même taille que l’enfant, alors il n’est pas possible d’ajouter de marges.

d’accord, mais la ma feuille s’agrandi avec ma page… hors moi j’aimerai que si je suis en 1024X768, que je sois en pleine ecran et que si je suis en 1280X800, j’ai de chaque coté environ 135px (1280-1011)/2

Et sauf erreur dans mon code et ma page, le bandeau s’etire avec l’ecran…

ps: désolé si je suis un boulet, mais la je vois pas
ps2: j’ai remis

body { 
	text-align: center; 
}

#content { 
	marge:auto;
	width: '.LARGEURPAGE.'px;
}

Edité le 06/08/2007 à 13:48

En général, tu fais sois un layout fixé à une taille minimale (800 jusqu’à il y a peu, 1000 maintenant) soit un layout “dynamique”.

Mais faire un truc en fonction de la résolution, c’est disons se tirer une balle dans le pied et viser :slight_smile:

Bon alors, en fait, sous Firefox, ca fonctionne, mais IE ne veux rien savoir.

Le problème, c’est pas que je veuille absolument une taille fixe,mais que j’ai beaucoup d’element placé en fixe, avec des margin , padding etc… et la gestion de IE est vraiment catastrophique… donc au debut j’avais essayé les % mais ca me donnais n’importe quoi.

Donc c’est pour ca, je me suis dit, taille de page fixe, comme ca mes element seront toujours bien placé…

Voila le pourquoi du comment… un exemple tres simple… yahoo.fr…

peu importe la resolution, la page est toujours identique, quite a ce que ceux qui ont une tres grosse resolution, ai des bandes blanche sur le coté… voila

Dans ce cas à quoi sert ton bout de code vérifiant la résolution? :slight_smile:

même pas besoin d’aller sur yahoo, clubic en est aussi l’exemple, comme la plupart des sites :slight_smile:

Tiens cadeau, voici un extrait du CSS que j’utilise pour mon site :


/* Général */

body
{
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size:12px;
}

#conteneur
{
  position:static;
  width:1000px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  border:0;
  text-align:left;
}

Dans ce code, tu remarques que body définit ma page à 100% de la taille de la fenêtre. Dans ce body, j’ai un div dont l’id est conteneur, encadré par des balises center. Ce div mesure 1000 pixels de largeur (et restera donc fixe, quoi qu’il arrive, en largeur tout du moins), et qui contient toute ma page. Dedans j’ai d’autres div pour le header, les menus, le contenu, le footer. Et le résultat est un site de 1000px de largeur, centré, qui ne varie pas. :wink:

exemple d’architecture HTML :


<body>
  <center>
    <div id="conteneur">
      <div> element de ma page </div>
    </div>
  </center>
</body>

Edité le 06/08/2007 à 14:42

alors en effet, ca centre bien, IE et FF, mais du coup la, tt mes conteneur a l’interieur du body sont aussi centré, meme si je les force a text-align:left, right etc :@
Edité le 06/08/2007 à 15:22

Essaye :

text-align:left !important;

Ou vire les .

bah soit dans le conteneur tu alignes à gauche, soit si tu veux des divs non centrés dans le body (hors du conteneur) tu les mets tes divs en dehors des balises center.
Justement la balise center a la propriété d’aligner au centre les balises de premier niveau (ie. si tu mets du texte dans un div qui est centré, le texte ne le sera pas). Donc concretement, je ne comprends pas ton problème :smiley:

pour rappel, tu ne mets rien à l’extérieur du conteneur, normalement.

Toute ta page là, et nulle part ailleurs, sinon ça n'ira pas. Ici tout est aligné à gauche, et tes autres divs viendront prendre place ici même.

Enfin en tout cas chez moi, en procédant ainsi, ça fonctionne sans problème.