Aller au contenu

Aider moi à adapter mon site selon les résolutions


roro67

Sujets conseillés

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+

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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+

Lien vers le commentaire
Partager sur d’autres sites

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 !

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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+

Lien vers le commentaire
Partager sur d’autres sites

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"> </td>

</tr>

</table>

Lien vers le commentaire
Partager sur d’autres sites

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

++

Lien vers le commentaire
Partager sur d’autres sites

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+++

Lien vers le commentaire
Partager sur d’autres sites

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. :P

Lien vers le commentaire
Partager sur d’autres sites

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:

Quelle solution miracle pourrait fonctionner ?

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

???????? E=MC2...????

A+

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

hum c'est comment dire ... un peu la jungle des div :whistling:

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 :

<body>
<div id="apDiv4">
</div>
<div id="apDiv6">

Lien vers le commentaire
Partager sur d’autres sites

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..

Lien vers le commentaire
Partager sur d’autres sites

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>.

Lien vers le commentaire
Partager sur d’autres sites

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

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 :

je sais, quand on aime on ne compte pas les div..

Eh bien là il va falloir les compter les div :whistling:

Lien vers le commentaire
Partager sur d’autres sites

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+

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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 :

	<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>

<div id="apDiv8">
<div id="apDiv12">
<div id="apDiv13"></div>
</div>
</div>


</div>

cela devrai régler une partie de l'affichage

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...