28220 sujets

CSS et mise en forme, CSS3

[Resolu] Caluler la positionnement de mes éléments

Bonjour j'ai une application web qui doit-être utiliseable avec différentes résolution de navigateur. Pour que mes éléments soient toujours centrés, j'utilise dans mes css le positionnement magin-left et margin-top. Hors je voudrais savoir comment faire en css pour récupérer résolution du navigateur ??

Si quelqu'un à d'autre idées ??

Merci.

@+ Pierre-Bruno Smiley biggrin
Modifié par Pierre-Bruno (03 May 2005 - 09:32)
Modérateur
Bonjour,

Pour ne parler que css, tu peux utiliser cette méthode:

#document {
position:absolute;
left:50%;
margin-left:-400px; }

pour une zone de 800px de large. Ainsi, tu reste centré quelquesoit la résolution. La contrainte, dans ce cas, est que tu limites la zone à 800px. Après, il existe d'autres méthodes... tu peux les observer ici même...
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Voilà... Bonne continuation...
Salut,
Pour aligner au centre
#document{
margin:auto;}

@+
Modifié par YerebY (02 May 2005 - 17:21)
margin:auto fonctionne quelque soit le doctype choisi (y compris XHTML)... sauf sous IE 5 Windows ou là cela ne fonctionne pas du tout. Pour ce dernier il faut ajouter text-align: center aux propriétés CSS du bloc contenant.

Le centrage par marges négatives ne fonctionne pas sur IE5 Mac et rend le contenu inaccessible par la barre de défillement si ce dernier est plus large que la taille de la fenètre (ce qui est un serieux problème!).
Modifié par jb_gfx (02 May 2005 - 17:37)
Modérateur
Re...

Il y a deux semaines, j'ai converti mon site du html 4.01 vers le xhtml 1.0. Ma feuille de style comprenait la mention:
#document {
margin:auto; }

Et bien au changement de DTD, mon document s'est retrouvé déporté sur la gauche; le centrage n'était plus pris en compte. J'avais vérifié pour voir d'où venait l'erreur et lorsque je repassais en html 4.01, la commande était de nouveau prise en charge... Je précise que je teste mon site sur FF 1.0.3 et IE 6.0 sous windows.
Du coup, j'ai effectivement commencé par corriger le problème en ajoutant { text-align:center; } à mon conteneur mais comme celà m'obligeait à modifier de nombreuses lignes du fichier css (l'ensemble du contenu étant alors centré par défaut), j'avais trouvé la méthode décrite dans mon premier post plus pratique. Ne disposant pas de Mac, je n'étais alors pas au courant de l'inaccessibilité produite sous IE5 Mac.
Je te remercie donc pour cette précision qui me vaut du même coup quelques retouches... Smiley ravi J'espère seulement que c'est compatible quelquesoit le naviguateur...
Modifié par koala64 (03 May 2005 - 09:00)
Donc j'ai ajouté dans mon style :

margin-left: auto;
margin-right: auto;
margin-top:15% ;

Et ça marche nickel, tout est centré quelque soit la résolution.

Merci.

@+ Pierre-Bruno
Sujet clos
Aller à