Centrer design 900px en 800*600 [Résolu] - HTML/CSS - Programmation
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.
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.
Marsh Posté le 11-07-2007 à 20:00:07
ezen a écrit : |
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 :
|
Pour changer la feuille de style
http://www.w3schools.com/htmldom/prop_link_href.asp
Je te laisse faire le lien entre les deux
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 |
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.
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
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.
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
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 :
|
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
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 :
|
Je teste la solution de David Boring et je vous dit quoi.
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 :
|
taille1024.css
Code :
|
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 :
|
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 ce site va me rendre fou
Merci à tous pour vos réponse.
Marsh Posté le 12-07-2007 à 09:56:34
ezen a écrit : |
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 :
|
Marsh Posté le 12-07-2007 à 10:26:40
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
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.
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
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 édité par ezen le 16-07-2007 à 09:26:03