[Résolu] Centrer design 900px en 800*600

Centrer design 900px en 800*600 [Résolu] - HTML/CSS - Programmation

Marsh Posté le 11-07-2007 à 08:58:26    

Bonjour,  
 
Voilà mon petit souci. J'ai un design qui fait 900px de large.  
 
Je n'ai pas de souci pour le centrer en 1024*768 avec le code suivant :
 
div#contenu{
      width:900px;
      margin:0 auto 0 -450px;
      position:absolute;
      left:50%;
}
 
Par contre quand je teste avec un résolution de 800*600 j'ai 50px de bouffer sue la gauche. J'arrete pas de chercher des scripts qui modifiraient mon css en fonction de la résolution mais je trouve pas de script qui resolve mon problème.
 
Voici l'adresse du site de test pour vous montrer :
http://www.saint-pierrebrouck.net/Cadart/index.php
 
Merci

Message cité 1 fois
Message édité par ezen le 16-07-2007 à 09:26:03
Reply

Marsh Posté le 11-07-2007 à 08:58:26   

Reply

Marsh Posté le 11-07-2007 à 13:16:39    

Si tu utilisais un bète <div> sans position:absolute et sans largeur,  il s'adapterait automatiquement à la largeur de la fenètre sans avoir à faire des chippotages.
Essaie.

Reply

Marsh Posté le 11-07-2007 à 13:25:47    

merci pour ta reponse bignose.
 
je viens d'essayer et cela ne marche pas.
 
je ne peux pas enlever le position:absolue sinon la moitié de mon design se met totalement a gauche et j'ai meme la partie qui contient le menu qui disparait.

Reply

Marsh Posté le 11-07-2007 à 13:31:11    

Tu as mis du absolute partout ?

Reply

Marsh Posté le 11-07-2007 à 13:40:25    

je crains que oui, tout mon design est mis en absolute

Reply

Marsh Posté le 11-07-2007 à 20:00:07    

ezen a écrit :


 
Par contre quand je teste avec un résolution de 800*600 j'ai 50px de bouffer sue la gauche. J'arrete pas de chercher des scripts qui modifiraient mon css en fonction de la résolution mais je trouve pas de script qui resolve mon problème.
 
Voici l'adresse du site de test pour vous montrer :
http://www.saint-pierrebrouck.net/Cadart/index.php
 
Merci


 
Tu peux faire une deuxième feuille de style pour les résolution 800*600  
Et selon la taille de l'écran, tu importes l'une ou l'autre feuille de style.
 
Pour connaitre la taille de l'écran

Code :
  1. <script>
  2. wH = window.outerHeight;
  3. wW = window.outerWidth;
  4. alert("Height: " + oH + "px Width: " + oW + "px" );
  5. </script>


Pour changer la feuille de style
http://www.w3schools.com/htmldom/prop_link_href.asp
 
Je te laisse faire le lien entre les deux ;)  
 

Reply

Marsh Posté le 11-07-2007 à 21:45:04    

Euh, pour centrer un contenu de largueur fixe, ce genre de code devrait largement suffire :
 

div#contenu
{
      width: 900px;
      margin: 0 auto;
}


Edit: ah ouais, et après si tu veux le centrer pour largueur plus petite tu peux faire un :
 

document.getElementById("contenu" ).style.width = width + "px"


 
où "width" est la largeur que tu auras calculée avec soin. Ce genre de truc fonctionne au moins dans Safari, IE7 et Firefox.
 
Mais comme disait quelqu'un plus haut, tu te prendras nettement moins la tête à faire un design élastique.


Message édité par tpierron le 11-07-2007 à 22:11:50
Reply

Marsh Posté le 12-07-2007 à 00:48:25    

super pleins de solutions de merde :/
 
et si tu supprimais ton centrage en position:absolute et que tu utilisait un centrage simple qui a fait ses preuves depuis longtemps :  
 
margin: 0 auto

Reply

Marsh Posté le 12-07-2007 à 05:08:19    

tu peux aussi mettre faire comme ceci :  
au lieu de mettre un <div id="contenu"> pour ton contenu, tu mets un <table id="contenu">.
 
dans ton css tu fait :  
body{
text-align:center;
}
#contenu {
margin: 0pt auto;
}
et la c'est aligné au centre sur IE et sur Firefox.


Message édité par nixnbk le 12-07-2007 à 05:08:40

---------------
I'll feed your skin snacks to my cockatiel!
Reply

Marsh Posté le 12-07-2007 à 08:13:07    

merci tout le monde, j'essaye ça tout de suite et je vous tiens au courant

Reply

Marsh Posté le 12-07-2007 à 08:13:07   

Reply

Marsh Posté le 12-07-2007 à 08:42:45    

Je viens d'essayer les solutions les plus simples.  

Citation :

au lieu de mettre un <div id="contenu"> pour ton contenu, tu mets un <table id="contenu">.  


Je ne peux pas utiliser de tableau pour définir la structure car ma contrainte principale est de respecter les normes de la W3C, et celle-ci demande d'utiliser les calques donc je suis obligé de garder le <div id="contenu">.
 
Puis j'ai mis :

Code :
  1. div#contenu
  2. {
  3.       width: 900px;
  4.       margin: 0 auto;
  5. }


Si je ne met pas le width:900px le design ne se centre pas.
Au final le design se centre aussi bien en 1024*768 qu'en 800*600. De ce côté là il n'y a pas de problème.
 
Par contre vu que j'utilise des calques, mes 5 boutons sont positionnés correctement en 800*600 mais ils sont décalés en 1024*768
 
http://www.saint-pierrebrouck.net/Cadart/pb_sous_fox.bmp
 
Je n'ai pas trouvé d'autres solutions que le position:absolute et de régler le top et le left pour positionner ces calques.

Code :
  1. div#presenation{
  2. position:absolute;
  3. top:147px;left:446px;
  4. }


Je teste la solution de David Boring et je vous dit quoi.

Reply

Marsh Posté le 12-07-2007 à 09:04:29    

C'est bon, normalement le problème est résolu. J'ai pris l'idée de David Boring en modifiant un peu le code.
J'ai créé deux style css :
 
taille800.css

Code :
  1. div#contenu{
  2. width:900;
  3. margin:0 auto 0 -400px;
  4. position:absolute;
  5. left:50%; /* pour centrer le design */
  6. }


taille1024.css

Code :
  1. div#contenu{
  2. width:900;
  3. margin:0 auto 0 -450px;
  4. position:absolute;
  5. left:50%; /* pour centrer le design */
  6. }


J'ai gardé mon position:absolute pour pas avoir de souci avec mes autres calques. La différence entre les deux css est la marge négative. Maintenant tout se place comme il faut.
 
J'ai utilisé le code suivant :

Code :
  1. <script language="javascript">
  2. if (screen.width <=800)
  3. document.write('<link href="taille800.css" rel="stylesheet" type="text/css">')
  4. else   
  5. document.write('<link href="taille1024.css" rel="stylesheet" type="text/css">')
  6. </script>


Je ne sais pas si c'est la meilleure solution mais en tout cas ça fonctionne. Et le pire c'est que maintenant ma validation à la W3C ne fonctionne plus  :cry:  ce site va me rendre fou  :pt1cable:  
 
Merci à tous pour vos réponse.

Message cité 1 fois
Message édité par ezen le 12-07-2007 à 09:37:10
Reply

Marsh Posté le 12-07-2007 à 09:56:34    

ezen a écrit :


Je ne sais pas si c'est la meilleure solution mais en tout cas ça fonctionne.


Non, c'est une très mauvaise solution, voir la pire ? ;)
 
Pour règler ton problème du positionnement absolu de tes éléments, tu n'as qu'à indiquer que c'est ton conteneur qui doit servir de référence et non pas la fenêtre. De cette manière tes éléments seront toujours au même endroit quelque soit la résolution. Pour le faire tu n'as qu'à ajouter un position relative sur ton conteneur:

Code :
  1. #contenu{
  2.   width:900px;
  3.   margin:0 auto;
  4.   position:relative;
  5. }

Reply

Marsh Posté le 12-07-2007 à 10:26:40    

:lol:  oups bon bin on va essayer de tout corriger
 
Je viens de tester ton code Pitsy. Effectivement le site se centre automatiquement.  
 
Par contre c'est normal que sous IE le site se centre une fois sur 4 ? Je fais des "Actualiser", le site se place sur la gauche et au bout de 3 ou 4 actualiser il se centre puis il retourne a gauche si il y a une nouvelle actualisation de page.
 
Sous Firefox c'est nikel. En meme temps on peut pas en demander de trop a IE  :whistle:

Message cité 1 fois
Message édité par ezen le 12-07-2007 à 10:36:43
Reply

Marsh Posté le 12-07-2007 à 13:21:12    

ezen a écrit :

Par contre c'est normal que sous IE le site se centre une fois sur 4 ?


Non, apparement tu as un retour de ligne et des espaces avant la déclaration de ton doctype. IE6 n'interprète ton doctype, et passe donc en mode standard, que si le doctype est tout en haut de ton document (en mode quirks il n'interprète pas correctement le margin:auto d'où le remarque de nixnbk) . Essaie de virer ce que tu as avant la déclaration de ton doctype.

Reply

Marsh Posté le 12-07-2007 à 13:32:09    

arrete le web ca sera plus simple

Reply

Marsh Posté le 12-07-2007 à 13:34:24    

Je viens de virer mon code php qui était avant la déclaration du doctype et ça à l'air d'être bon.
Le design se place correctement sous IE et sous Firefox, quelle que soit la résolution de l'écran.
 
Il ne me reste plus qu'à réussir à virer cette petite ligne blanche qui sépare mon header de mon menu à gauche et j'en aurais fini pour la partie design  :)  
 
Merci Pitsy

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed