Ajuster la dimension d'une page web

Fermé
putuaia - 31 janv. 2009 à 03:12
 putuaia - 8 févr. 2009 à 01:34
Bonjour,

Je suis entrain de créer un site avec Frontpage 2003 et je voudrais que ma page s’adapte aux différentes résolutions d’écran. J’ai lu les messages à ce sujet. J’ai compris qu’il vaut mieux travailler en 800x600 et qu’il faut changer les pixels en valeurs absolues. Mais où on fait ça ??? De plus il faut centrer la page, là encore cette étape m’échappe. Un d’entre vous parlait de colonnes, de tableau et là, j’abdique !!! Je vous mets les codes, si ça peut vous aider.

Merci pour votre aide et désolé de revenir sur ce sujet !!!

<head>
<meta http-equiv="Content-Language" content="fr">
<style>
<!--
span.textearticle1
{font-family:Arial;
color:black;
font-weight:normal;
font-style:normal}
span.tb-data-01a
{}
-->
</style>
</head>

<div align="center">
<table border="1" width="100%" id="table1" bordercolor="#FFFFFF" bgcolor="#FFFF00">
<tr>
<td align="center">
<div style="position: absolute; width: 136px; height: 134px; z-index: 1; left: 21px; top: 34px" id="couche3">
<font face="DriftType" size="7" color="#008000">
<img border="0" src="Images+gifs/palmier-2.gif" width="109" height="133"></font></div>
<div style="position: absolute; width: 136px; height: 134px; z-index: 1; left: 606px; top: 35px" id="couche2">
<font face="DriftType" size="7" color="#008000">
<img border="0" src="Images+gifs/palmier-2.gif" width="109" height="133"></font></div>
<p align="center" style="margin-top: 21px; margin-bottom: 0">
<font face="DriftType" size="7" color="#008000">
 </font><font face="DriftType" color="#008000" style="font-size: 55pt">TEAHUPOO</font><font face="DriftType" size="7" color="#008000">
</font><p align="center" style="margin-top: 0; margin-bottom: 12px">
<font face="Chiller" color="#008000" size="6">    </font>
<font face="Chiller" color="#008000" style="font-size: 30pt">Mon
carnet de voyage</font></td>
</tr>
</table>
</div>
<div align="left">
<table border="1" width="100%" id="table3" bordercolor="#FFFFFF">
<tr>
<td width="123" align="center"><a href="histoireetculture.htm">Histoire et culture</a></td>
<td width="139" align="center"><a href="Sportsetloisirs.htm">Sports et loisirs</a></td>
<td width="114" align="center"><a href="ouseloger.htm">Où se loger</a></td>
<td width="103" align="center"><a href="Oumanger.htm">Où manger</a></td>
<td width="155" align="center"><a href="Planetadressesutiles.htm">Plan et adresses utiles</a></td>
<td width="67" align="center"><a href="Contacts.htm">Contacts</a></td>
</tr>
</table>
</div>
<p class="MsoNormal" style="margin-top: 6px; margin-bottom: 10px" align="center">
<img border="0" src="Images+gifs/Surfeur%20(2).gif" width="104" height="48">                    
<img border="0" src="Images+gifs/Surfeur%20(2).gif" width="104" height="48">                      
<img border="0" src="Images+gifs/Surfeur%20(2).gif" width="104" height="48">                       
<img border="0" src="Images+gifs/Surfeur%20(2).gif" width="104" height="48">           </p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Qui ne connaît pas Teahupoo ? Qui n’a jamais
entendu parler de ses vagues mythiques ? Chaque année au mois de mai, pendant la
Billabong Pro, Teahupoo voit s’affronter les meilleurs surfeurs du monde et
réunit les plus grands photographes.</font></p>
<div style="position: absolute; width: 181px; height: 226px; z-index: 2; left: 528px; top: 369px" id="couche4">
<img border="0" src="Images+gifs/Carte%20tahiti%20Teahupoo2.jpg" width="217" height="255"></div>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Mais au-delà de cette "campagne
médiatique", connaissons-nous vraiment Teahupoo ?</font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Teahupoo peut nous offrir beaucoup plus.</font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0"> </p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0"> </p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Située à 80kms de Papeete, </font>
<span class="tb-data-01a"><span style="color:black"><span class="textearticle1">
<font face="High Tower Text">Teahupoo a su conserver son authenticité, </font></span></span></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="tb-data-01a"><span style="color:black"><span class="textearticle1">
<font face="High Tower Text">préserver et perdurer les valeurs humaines de la culture polynésienne. </font></span></span></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="tb-data-01a"><span style="color:black"><span class="textearticle1">
<font face="High Tower Text">Vous vivrez la vie</font></span></span></span><span class="textearticle1"><font face="High Tower Text">
de mata'ina'a (la vie rurale), saine et en toute simplicité, </font></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="textearticle1"><font face="High Tower Text">
où la nature
reprend son rôle primordial. Ainsi il sera fréquent de voir, </font></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="textearticle1"><font face="High Tower Text">
au bord de route, le
pêcheur vendre ses poissons fraîchement pêchés </font></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="textearticle1"><font face="High Tower Text">
ou l'agriculteur proposer les
fruits et légumes de son jardin, </font></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="textearticle1"><font face="High Tower Text">il pourra même les
cueillir devant vos yeux. </font></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Et si vous
manquez de quelque chose, sachez qu'un marchand "ambulant" fait
</font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">régulièrement des navettes. Sa "roulotte" est très fournie :
</font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">chacun pourra aisément trouver son petit bonheur.
</font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Loin du stress citadin, Teahupoo est u</font><span class="textearticle1"><font face="High Tower Text">n
véritable havre de paix </font></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="textearticle1"><font face="High Tower Text">pour les</font><span style="font-family: High Tower Text">
touristes, venus de loin</span><font face="High Tower Text"> ou tout simplement un
retour aux sources </font></span></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<span class="textearticle1"><font face="High Tower Text"> pour tout polynésien. </font></span>
<span class="tb-data-01a"><span style="color:black">
<font face="High Tower Text">Avant de filer vers les autres îles, pour les
premiers et de se gâcher le week-end devant la télévision pour les seconds, ils
peuvent
savourer ce coin encore secret de Tahiti. </font></span></span>
<span class="textearticle1"><font face="High Tower Text">Plus doute, Teahupoo
offre</font></span><font face="High Tower Text"> une
qualité de vie exceptionnelle.</font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
 </p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Teahupoo est l’une des 3
communes associées de Taiarapu Ouest de la presqu'île. Elle s’étend sur 4 kms et englobe la partie Ouest du "fenua aihere"
et du Pari, parties de Tahiti accessible que par bateau ou à pied pour les plus courageux. </font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">Le "fenua aihere", malgré l'absence de route,
est relativement habité et ceux-ci comptent bien préserver cet endroit </font></p>
<p class="MsoNormal" style="margin-top: 0; margin-bottom: 0">
<font face="High Tower Text">En revanche, le Pari </font></p>
A voir également:

3 réponses

Dackxes Messages postés 274 Date d'inscription mardi 27 janvier 2009 Statut Membre Dernière intervention 17 avril 2010 35
1 févr. 2009 à 13:05
Pour les valeurs absolues tu n 'a qu 'a les mettre en pour cent et ça s 'adaptera tout seul en fonction de la résolution d 'écran du visiteur.
1
Bonjour Dackxes

Et comment je fais ça??? Je suis novice et je ne vois pas du tout où changer ça? Affichage? Option?
Merci
0
Bonjour

Vu que vous peinez à me répondre, je vais essayer de préciser mon problème.
J'ai donc des pages web en 800x600 (sur vos conseils!!!) et j'ai un grand écran 19 pouces. Sous front page, ça s'affiche très bien, tout est à sa place. Mais quand j'ouvre ma page avec internet mes 2 iimages gifs (cocotier dansant) sont décalés et cachent le titre. J'ai mis les 2 gifs dans des couches. Donc comment bloquer ces 2 couches, l'une à gauche du titre et l'autre à droitre?????
Si vous lisez bien mon 1er message, vous verrez que je n'ai rien compris, à part faire des pages adaptées aux plus petits écrans. Après? Comment rendre adaptable aux plus grands écrans?

S'il-vous-plaît, répondez-moi et n'oubliez pas que je suis novice!!!

bonne journée
0
Dackxes Messages postés 274 Date d'inscription mardi 27 janvier 2009 Statut Membre Dernière intervention 17 avril 2010 35
7 févr. 2009 à 09:56
Il faudrait modifier ça dans la feuille de style css.

Il devrait y avoir un truc dans ce genre :

body
{
width: 800px;
background-image: url("ImageDeFond.jpg");
}

...
...

Tu remplace le "width: 800px" par "width: 80%" ou 60% ou 70%, comme tu veux.
0
Bonjour et merci Dackxes.
Cependant au lieu de modifier le "weidth" comme tu disais, ça me modifiait la largeur de la couche, j'ai mis en % le "left". La page s'affiche correctement et chaque chose est à sa place. Merci
0