Votre question

Ajustement automatique de la page internet (Résolu)

Tags :
  • Sites Internet
  • Programmation
Dernière réponse : dans Programmation
18 Novembre 2008 20:34:57

Salut la communauté !!! :p 

J'ai fait un site internet dernièrement et je souhaiterais que ma page s'adapte automatiquement aux différentes résolutions d'écran. J'ai remarqué que sur mon 22" j'avais de la marge sur le coté alors que sur mon 15.4" je n'ai pas de marge.

Je travaille avec Macromédia Dreamweaver 8

Merci de votre aide !!

Bye :hello: 

Autres pages sur : ajustement automatique page internet resolu

18 Novembre 2008 21:02:18

Alors j'ai vu qu'il fallait mettre <body>body{width:100%;}</body> ou un truc comme sa mais je ne sais pas ou ?? Je le met n'importe au milieu des autres balises ??

Dsl je suis nouveau dans ce domaine ^^
18 Novembre 2008 22:12:12

Si tu utilise une feuille CSS c'est mieux de le mettre là-bas:

body {

width: 750px
margin: auto;
}

Tu aura un site d'une largeur de 750px et centrer, sur n'importe qu'elle résolution!
Contenus similaires
18 Novembre 2008 22:40:11

Merci pour ta réponse Allstar27 mais je n'ai pas une feuille CSS mais HTML (je débute...,le CSS sera pour plus tard)

Pour : body {width: 750px; margin: auto;} , je dois mettre des balises avant et après ou pas ??

Dsl si mes questions sembles logiques mais c'est tout nouveau pour moi !!!

Merci pour ton aide
19 Novembre 2008 01:42:37

Ok alors fais ça:

<style type="text/css">
body {
width: 750px;
margin: auto;
}
</style>

Tu le met entre la balise <head> et </head> (si tu en as...)
19 Novembre 2008 09:56:30

Oui j'ai bien des balises <head> et </head> mais j'ai déjà fait ma page et lorsque j'insère ton code entre ces deux balises, cela me déplace tout sur la droite lol !!! :D 

Mon site c'est : (attention la page ne contient pas ton code).


Merci pour ton aide !! :) 

Tiens je te donne le script de ma page (j'ai mis en gras la partie que tu m'as demandé de rajouter mais je tiens à préciser que sa déplace tout sur la droit, c'est juste pour que tu vois si je l'ai mal placé) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
width: 750px;
margin: auto;
}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site de yoyo</title>
<style type="text/css">
<!--
.Style1 {
color: #FF0000;
font-size: 18px;
}
#Layer1 {
position:absolute;
left:3px;
top:320px;
width:419px;
height:75px;
z-index:1;
background-color: #FFFF00;
}
#Layer2 {
position:absolute;
left:156px;
top:383px;
width:196px;
height:41px;
z-index:2;
background-color: #FFFF00;
}
.Style3 {
font-size: 18px;
font-weight: bold;
}
#Layer3 {
position:absolute;
left:13px;
top:560px;
width:345px;
height:77px;
z-index:3;
background-color: #CC66CC;
}
#Layer4 {
position:absolute;
left:13px;
top:634px;
width:130px;
height:105px;
z-index:4;
}
#Layer5 {
position:absolute;
left:14px;
top:264px;
width:345px;
height:77px;
z-index:5;
background-color: #CC66CC;
}
.Style6 {
color: #000099;
font-size: 18px;
}
#Layer6 {
position:absolute;
left:14px;
top:343px;
width:135px;
height:104px;
z-index:6;
}
#Layer7 {
position:absolute;
left:163px;
top:659px;
width:189px;
height:38px;
z-index:7;
background-color: #FFFF00;
}
.Style15 {color: #009933; font-weight: bold; font-size: 24px; }
#Layer8 {
position:absolute;
left:518px;
top:1764px;
width:208px;
height:35px;
z-index:8;
}
body {
background-color: #FFFFFF;
background-image: url(Images/Arriere%20plan%205%20(1).jpg);
background-repeat: repeat;
background-image: url(Images/Arriere%20plan%205%20(1).jpg);
background-image: url(Images/Arriere%20plan%205%20(1).jpg);
background-image: url(Images/Arriere%20plan%204.gif);
}
.Style16 {color: #FFFFFF}
#Layer9 {
position:absolute;
left:21px;
top:189px;
width:220px;
height:23px;
z-index:9;
}
#Layer10 {
position:absolute;
left:420px;
top:500px;
width:279px;
height:76px;
z-index:10;
}
#Layer11 {
position:absolute;
left:1025px;
top:1738px;
width:101px;
height:121px;
z-index:9;
}
.Style22 {color: #FF0000; font-size: 24px; }
.Style23 {color: #FF0000; font-size: 24px; font-weight: bold; }
.Style25 {color: #9900FF; font-size: 24; }
.Style27 {color: #9900FF; font-size: 24px; }
.Style28 {color: #FF3399}
.Style29 {color: #0000FF}
-->
</style>
</head>

<body>
<div id="Layer2">
<div align="center">
<p><a href="versions1997-2003.html" target="_parent" class="Style3">Cliquer ici</a></p>
</div>
</div>
<div id="Layer3">
<p align="center" class="Style6">Si vous possédez une version Word 2007 </p>
</div>
<div id="Layer4"><img src="Images/Photo Word 2007.jpg" width="118" height="112" align="baseline" /></div>
<div id="Layer5">
<p align="center" class="Style6">Si vous possédez une version Word comprise entre 1997 et 2003 </p>
</div>
<div id="Layer6"><img src="Images/Photo word 2003.jpg" width="126" height="123" /></div>
<div id="Layer7">
<div align="center">
<p><a href="versions2007.html" title="Cliquer ici" target="_parent" class="Style3">Cliquer ici</a></p>
</div>
</div>
<div id="Layer8">
<div align="center"><a href="contactmail.html" title="Cliquer ici pour m'écrire" target="_parent" class="Style23">Cliquer ici pour m'écrire</a></div>
</div>
<div id="Layer11"><span class="Style16"><img src="Gifs/Bart.gif" width="85" height="105" /></span></div>
<table width="1096" height="145" border="1" bgcolor="#FF66FF">
<tr>
<td width="295"><div align="center"><img src="Images/Logo notaire 2.jpg" width="223" height="139" /></div></td>
<td width="728" bgcolor="#009999"><div align="center">
<h1>Bienvenue sur le site de Yoyo </h1>
</div></td>
<td width="295"><div align="center"><img src="Images/Logo notaire 2.jpg" width="223" height="139" /></div></td>
</tr>
</table>
<p> </p>
<p>
<marquee behavior="alternate">
<span class="Style1">Site en construction, donc soyez indulgent ^^</span>
</MARQUEE>
</p>
<table width="1102" height="504" border="1">
<tr>
<th height="219" scope="row"> </th>
<td width="739" rowspan="3" align="right" nowrap="nowrap" background="Images/Arriere plan 7.gif" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th width="347" height="87" scope="row"> </th>
</tr>
<tr>
<th scope="row"> </th>
</tr>
</table>
<blockquote>
<blockquote>
<blockquote> </blockquote>
</blockquote>
</blockquote>
<p><label></label>
</p>
<table width="1109" height="465" border="1" bgcolor="#CCFFFF">
<tr>
<th width="357" rowspan="4" scope="row"><span class="Style22">Vous trouverez ici d'autres documents à télécharger</span></th>
<td width="736" height="75"><div align="center"><a href="Images/Emploi du temps.jpg" title="Emploi du temps" target="_parent">Emploi du temps</a></div></td>
</tr>
<tr>
<td height="126"><p align="center"><a href="Cours/Autre/Dates des examens et des conges.docx" title="Emploi du temps (version 2007)" target="_parent">Dates des examens et dates des congés (version 2007)</a></p>
<p align="center"><a href="Cours/Autre/Dates des examens et des conges (version 1997-2003).docm" title="Emploi du temps et congés (version 1997-2003)" target="_parent">Dates des examen s et dates des congés (version 1997-2003)</a></p></td>
</tr>
<tr>
<td height="126"><div align="left"></div>
<p align="center"><a href="Autres/FileFormatConverters.exe" title="Pack de compatibilité Office" target="_parent">Pack de compatibilité Office</a></p>
<p><span class="Style28">Ce pack de compatibilité permet aux utilisateurs des anciennes versions de Microsoft Office (word, excel, powerpoint) de lire les nouveaux formats utilisés par Microsoft Office 2007.</span></p>
<p><span class="Style28">Poids : 27,67mo </span></p> </td>
</tr>
<tr>
<td height="126"><p> </p>
<p class="Style29">Vous pouvez télécharger ici différents codes au format .pdf (Code de Commerce, Code de l'Urbanisme, Code de Procédure Pénale, Code Pénal) grace à Steven !!</p>
<p><strong>Donc un grand merci à Steven !!</strong></p>
<p>Pour les ouvrir : cliquer dessus<br />
Pour les enregistrer : clique droit dessus puis "enregistrer sous"</p>
<p>Si vous ne pouvez pas les ouvrir, vous devez télécharger Adobe Reader : </p>
<table width="688" height="94" border="1">
<tr>
<th scope="row"><div align="center"><a href="Les codes/Code de Commerce.pdf" title="Code de Commerce" target="_parent">Code de Commerce</a></div></th>
<td><div align="center"><a href="Les codes/Code de l'Urbanisme.pdf" title="Code de l'Urbanisme" target="_parent"><strong>Code de l'Urbanisme</strong></a></div></td>
</tr>
<tr>
<th scope="row"><div align="center"><a href="Les codes/Code de Procedure Penale.pdf" title="Code de Procédure Pénale" target="_parent">Code de Procédure Pénale</a></div></th>
<td><div align="center"><a href="Les codes/Code Penal.pdf" title="Code Pénal" target="_parent"><strong>Code Pénal</strong></a></div></td>
</tr>
</table> <p>  </p></td>
</tr>
</table>
<p> </p>
<p align="justify"><strong><span class="Style27">Bientôt, il y aura une partie réservée aux élèves de la classe afin qu'ils se présentent (nom, prénom,</span></strong><strong><span class="Style27">date d'anniversaire, adresse e-mail, photos...). En attendant je dois finir d'apprendre le langage PHP...</span></strong></p>
<p class="Style25"> </p>
<p><span class="Style15">En cas de problème ou en cas d'idée pour la construction de mon site, n'hésitez pas à m'écrire !!!!</span></p>
<p> </p>
<p> </p>
<p> </p>
<p class="Style16"> </p>
</body>
</html>
19 Novembre 2008 12:31:07

Faut arrêter de travailler avec des logiciels à la con.

body {
background-color: #FFFFFF;
background-image: url(Images/Arriere%20plan%205%20(1).jpg);
background-repeat: repeat;
background-image: url(Images/Arriere%20plan%205%20(1).jpg);
background-image: url(Images/Arriere%20plan%205%20(1).jpg);
background-image: url(Images/Arriere%20plan%204.gif);
width: 750px;
margin: auto;

}
19 Novembre 2008 18:27:46

Je te remercies Tybbow, je vais voir sa tout de suite !!

Désolé d'utiliser un logiciel à la con, j'avais cru comprendre que dreamweaver était un bon logiciel. En tout cas, tant que je n'ai pas finis de tout apprendre à la programmation, il est toujours plus fort que moi ^^

Merki!!!!
19 Novembre 2008 19:15:42

Citation :
Désolé d'utiliser un logiciel à la con, j'avais cru comprendre que dreamweaver était un bon logiciel. En tout cas, tant que je n'ai pas finis de tout apprendre à la programmation, il est toujours plus fort que moi ^^

Il n'est pas meilleur que ton cerveau :) 
19 Novembre 2008 20:38:26

Ca c'est gentil lol ^^
En tout cas merci pour ton aide !!

By
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS