Version complète: sur le forum Webmaster Hub : Aider moi à adapter mon site selon les résolutions
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
roro67
Bonjour à toutes et tous,

Un grand merci à qui pourra m'indiquer la méthode pour centrer mes pages web que je fais
avec Dreamweaver.

En effet, selon la résolution, mes pages sont centrées ou décalées....et j'aimerais que toutes mes pages soient centrées sur toutes les résolutions (800,1024,1280...)

Je rame depuis plusieurs jours en prenant un tas d'infos sur google, mais je n'y arrive pas..
J'ai essayé plusieurs choses...enlevé l'absolute pour le remplacer par 100%, mis dans body width 100 %, align center...margin auto, etc...ça ne fonctionne pas...mis tout mon site dans un tableau...rien n'y fait. Je désespère !
Je m'y prends certainement pas bien où je ne sais pas où exactement insérer les bons code


Mille mercis à qui aura la solution...

Visiter mon site

Mon site est ok en 1024X768 sur IE comme sur Mozilla, mais quand je change de résolution (ex 1280X960), mon site est décalé vers la gauche...comment remdédier à ça...je rame, je cherche et ai essayé tout ce dont on m'a indiqué...mais rien n'y fait...

Je sais, mon code html est un peu brouillon, et pour cause, il s'agit d'un site dans un site, mais je suis sur le point de finaliser, et je dois, avant d'y mettre un peu d'ordre (si vous pouviez me simplifier et supprimer les codes en trop ça serait un plus non négligeable...), l'adapter aux différentes résolutions, puis le référencer, ouh là là...là aussi j'y connais pas grand chose...mais je débute...soyez indulgent s'il vous plait !
Je dois mettre en ligne fin aout, j'avoue paniquer, j'ai peur de ne pas y arriver..

Merci d'avance de votre aide précieuse..

A bientôt j'espère !
A+
Dan
Commence déjà par supprimer l'élément <table> qui se trouve dans <style> au début, il n'a rien à faire dans le <head> (ni dans le <style> d'ailleurs) !
Et ensuite, entre <body> et </body>, mets tout ton code dans une <div> de largeur fixe avec un style=margin:auto ... cela devrait te centrer ton bloc.

Dan
roro67
Merci beaucoup Dan,

Je vais essayer de suivre à la lettre tes instructions.
L'élément <table> qui se trouve dans <style> dans le <head>, que je dois supprimer, c'est un menu vertical fait avec fireworks...je suppose que je le mets
dans <body> ?

Quand tu parles de mettre tout mon code, dans une <div> entre <body>et </body> c'est l'ensemble du code qui se trouve justement entre les deux balises <body> auquel je rajoute l'élément <table > supprimé du <head>....j'espère avoir compris...

Je vais tenter de faire la modification en rentrant ce midi, sinon ce soir...

En tout cas, je te remercie vivement de ton aide et de tes conseils.

Je te tiendrai informé du résultat.

Bon après-midi
A+
roro67
Bonjour,

J'ai fait selon la méthode hier soir mais rien de changé, ma page est toujours décalée en résolution 1280X960 par exemple...
Que pourrais-je faire d'autre ? En fait je souhaiterais que ce soit comme pour le site webmaster-hub,
le site, les pages prennent, quelle que soit la résolution, la largeur entière de l'écran. (en 1024 comme en 1280,
la page prend toute la largeur)
J'ai essayé aussi en faisant un div{margin: auto} mais sans succès également.

Merci de votre aide !
Dan
Initialement tu parlais de "centrer" le site. Maintenant tu veux que la largeur soit variable.

Dans ce dernier cas, il faut utiliser des largeurs en % et non en pixels.
C'est tout ton CSS qui est à revoir, surtout tous les positionnements absolus qui évitent aux éléments d'être "fluides"

Dan
roro67
Salut,

Je m'étais mal exprimé excuse moi..
En fait, ce que je voulais prioritairement c'est que les pages de mon site s'affichent toujours de la même manières
quelle que soit la résolution..

Donc, si j'ai bien compris, c'est que je dois reprendre tout mon code css, et à chaque <div>, je dois oter la position absolu, et y appliquer à la place des largeurs en pixel...100% ? pour que cela s'applique à 100% sur la page ? ou faut-il des % différents selon la <div>?

Mais ne peut-on pas appliquer à <body> une taille de 100% c qui éviterait de tout changer ?

Merci beaucoup de ton aide, c'est super sympa de recevoir toutes ces infos qui vont sans nul doute me faire avancer.

A+
rperruez
Bonjour,

Je ne sais pas si cela peux t'aider mais voila en construisant par tableaux :

<table width="316" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="316" height="165">&nbsp;</td>
</tr>
</table>
birdyman
Salut,

Je procède sans utiliser de tableaux et c'est pas bien compliqué :

- tu place ton contenu dans une div avec une largeur fixe en pixel.
- tu met a cette div les propriétés suivantes : position:absolute et left:50% (la c'est le bord gauche de ta div qui est centré)
- ensuite tu décale cette même div de la moitié de sa largeur vers la gauche avec une valeur négative.
(par exemple : margin-left:-450px; pour une div de 900px de large).

En espérant avoir été clair
++
roro67
Merci à tous pour votre aide et vos conseils, je vais tenter de mettre en application vos méthodes, les unes après les autres,
nul doute que ça devrait réussir au bout du compte...

Pour la methode sans tableau, birdyman, quand tu parles de placer le contenu dans une <div> fixe, tu parles de l'ensemble du contenu de mon site...? tout ce que j'ai dans <body> ?

Je vais en tout cas essayer tout ça !

Encore merci

A+++

birdyman
oui, tu créé un conteneur <div> de tout ce que tu as entre <body></body>
Dan
CITATION(roro67 @ mercredi 30 juillet 2008 à 10:00) *
Je m'étais mal exprimé excuse moi..
En fait, ce que je voulais prioritairement c'est que les pages de mon site s'affichent toujours de la même manières
quelle que soit la résolution..

Doc si tu veux une largeur fixe et centrée, tu peux créer une <div style="width:900px; margin:auto">... </div> contenant toute ta page (tout ce qui est entre <body> et </body>) ... cela devrait te la centrer sur la page. Ajuste la taille en fonction de tes souhaits...

Ou alors, suivre la solution de birdyman qui est équivalente. tongue.gif
roro67
Vraiment je ne sais plus quoi faire, j'ai essayé toutes vos méthodes et aucune ne fonctionne, j'ai toujours ma page décalée vers la gauche quand
je suis en résolution (1280X960)

J'ai pu lire quelque part qu'étant donné que tous mes composants sont en position:absolute, et que j'ai précisé les attributs left et top pour chacun de ces composants, leurs positions dans la page est fixée et figée.
Par conséquent, comme leur position est fixée dans la page, un margin:auto (ou toute autre méthode pour centrer les composants) n'a aucun effet.

et donc en changeant les unités, en % par exemple, ça risque d'être catastrophique...

Qu'en pensez-vous ?

Apparemment il n'y a pas de solutions ?

J'en suis dégoûté, toutes ces journées à chercher, à vous solliciter, à prendre des heures sans compter à trouver la solution, anéanties.

mad2.gif

Quelle solution miracle pourrait fonctionner ?

Merci encore à tous de votre aide et vos recherches pour me dépanner..
???????? E=MC2...????

A+
birdyman
la solution que je t'ai proposé fonctionne, je l'utilise souvent, tu n'aurais pas oublié le left:50%; ???
roro67
Je viens de recommencer la méthode..la div est la div6...si tu as le temps de vérifier sur le site...ça ne fonctionne pas..
il y a juste 2,3 cadres qui sont décalés..

Y'a un truc qui m'échappe.

birdyman
donne moi l'url je peux regarde
roro67
bonneville3
birdyman
hum c'est comment dire ... un peu la jungle des div whistling.gif
Commence par mettre la div 6 apres body et toutes tes autres div dedans.
la il y a des div en dehors comme au début :
CODE
<body>
<div id="apDiv4">
</div>
<div id="apDiv6">
roro67
je sais, quand on aime on ne compte pas les div..
c'est fait..div6 après body, mais la div4, je sais pas trop a quoi elle correspond...je l'ai placé après "table"...avant div17
toujours deux cadres décalés..
birdyman
De ce que j'ai pu démêler,
tu as encore un souci dans ton "code", la <div id="apDiv6"> apparait 2 fois.
alors qu'elle doit uniquement être ouverte après <body> et fermée juste avant </body>.
roro67
c'est ok, j'ai supprimé la 2ème div6
roro67
Je vais devoir abandonner la partie pour cette nuit...à 6h50 pétante il faut se lever pour le taf..
Je te remercie vivement pour tout le temps consacré à ma demande...c'est hyper sympa ! a_thumbsup_20.gif

J'espère que tu trouveras la solution..on remet ça demain si tu le veux bien.

Très bonne nuit Birdyman

A++

birdyman
La solution elle est trouvée depuis le début, nettoyer le code ! smartass.gif

Il y à dans ton code des balises qui servent à rien (ex: <div style>) et du coup ta div 6 doit être fermée avant la fin de ta page, c'est pourquoi les divs ne sont pas centrées.
Vérifie que chaque div est bien fermée au bon endroit et qu'il n'y a pas de </div> en trop.

Euh c'est toi qui disais ça :
CITATION(roro67 @ jeudi 31 juillet 2008 à 01:12) *
je sais, quand on aime on ne compte pas les div..

Eh bien là il va falloir les compter les div whistling.gif
roro67
Salut Birdyman,

Sur ce coup là, tu as bien raison, il va falloir les compter les DIV, Oups !

Par contre, ne maîtrisant pas les codes, ça va pas être une partie de rigolade...je vais quand même essayer
ce soir...une DIV ouverte pour une DIV fermée, et supprimer toutes les DIV inutiles...mais comment savoir si elles le sont ?
Enfin, je vais bien voir...

De toute façon il n'y a pas d'autres solutions n'est-ce-pas ?
Ou alors il faudrait revoir toutes mes feuilles de styles...mais avec quels paramètres et combien de temps
ça me prendrait !

Bon après-midi..

A+
roro67
Salut Birdyman

J'ai modifié un peu le code mais j'avoue que je suis perdu..pas de changement notable, juste que je n'arrive plus à aligner un cadre !

C'est la folie, je crois que je suis dans l'impasse...

Que faire ?

birdyman
Il reste encore quelques soucis dans ton code
j'ai relevé rapidement les points suivants que tu peux essayer de corriger :

- tu as un </div> en trop qui referme ta div 6 après ce bout de code :
CODE
    <div id="apDiv31"><img src="nospartenairesbanniere3.jpg" width="256" height="84" /></div>
  </div>
  <div id="apDiv10"></div>
  <div id="apDiv14"></div>
  <div id="apDiv15"></div>


- dans le code suivant supprime le dernier </div>
CODE
<div id="apDiv8">
  <div id="apDiv12">
    <div id="apDiv13"></div>
  </div>
</div>


</div>


cela devrai régler une partie de l'affichage
roro67
Ok, j'ai suivi tes instructions, merci...

Mais là, la partie de gauche de la page a disparue..et la partie droite est décalée...ouh la la !

roro67
par contre, en 1280X960, la page commence à être centrée...on approche ! mais on dirait que le <table> juste après la div6 n'est peut être pas à sa place.
On voit un bout dans la page en haut à gauche.

birdyman
pour moi c'est un peu mieux, le site commence a se centrer, a quelques div et détails près.

le centrage n'est pas exact car tu définis 1100px pour la div6 mais les éléments à l'intérieur occupent 1010px donc elle semble pas très bien centrée.

1100px de large c'est un peu trop a mon avis, essaye de ne pas dépasse les 950px pour que ca passe sur des résolution de 1024px de large.

Si tu ne maitrise pas le système des conteneurs, les positionnements, etc ... je te conseille le site du zéro rubrique Xhtml /Css, c'est très bien expliqué.

Je te conseilles de vraiment revoir le code et de simplifier tout ca.
Tu pourrais repartir sur une page vide contenant ta div6 et remettre petit a petit les éléments à l'intérieur.
roro67
Tu as raison, le site prend une tout autre forme à présent, il commence à être centré.
Je vais essayer de régler tout ça en diminuant déjà la largeur de la div6 en 950px, pour voir ce que ça donne.
Et bien entendu suivre tes conseils et prendre des cours sur les systèmes de conteneurs et positionnements du "site du zéro".

Je te remercie vivement pour m'avoir sorti une épingle du pied, c'est super sympa de ta part. a_thumbsup_20.gif

Il reste encore pas mal de boulot, sur cette page, et après faire de même avec les autres pages, mais au moins,
j'ai avancé et tes instructions m'ont vraiment aidé à y voir plus clair.

Encore merci du fond du coeur, je désepérais vraiment. a_thumbsup_20.gif p_flower01.gif

Je vois pour faire encore le ménage dans le code.

Bonne nuit
A bientôt


birdyman
Content de t'avoir aidé et courage pour la suite

++
roro67
Merci encore Birdyman, j'ai déjà réussi à centrer un peu mieux, c'est génial !
Tu es très fort !

A++
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.