rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Centrer site avec Dreamweaver CS3

dinodj, le vendredi 1 février 2008 à 18:53:12
Salut à tous, je suis novice dans le domaine. J'ai créé mon site avec Dreamweaver mais je n'arrive pas à centrer le tout. J'ai utilisé plusieurs calques depuis Fireworks et Photoshop mais quand j'essaie de centrer le site, les calques partent dans tous les sens.
Je suis perdu.

Voici le code de mon site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
onal.dtd">

<!-- saved from url=(0014)about:internet -->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Index.gif</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

td img {display: block;}body {

background-image: url(SATRAMA%20copie.jpg);

}

#apDiv1 {

position:absolute;

left:18px;

top:177px;

width:492px;

height:365px;

z-index:1;

}

.Style2 {

color: #790202;

font-weight: bold;

font-size: 13px;

}

.Style3 {

font-size: 13px

}

.Style4 {font-weight: bold; color: #790202;}

#apDiv2 {

position:absolute;

left:567px;

top:169px;

width:391px;

height:304px;

z-index:2;

}

#apDiv3 {

position:absolute;

left:576px;

top:531px;

width:341px;

height:313px;

z-index:3;

}

.Style5 {

color: #70202;

font-weight: bold;

font-style: italic;

}

.Style6 {color: #790202}

</style>

<!--Fireworks CS3 Dreamweaver CS3 target. Created Thu Jan 31 11:34:20 GMT+0100 2008-->

</head>

<body bgcolor="#ffffff">

<div id="apDiv1">

<div align="justify" class="Style3">C'est un renouveau: loin du tourisme de masse. Imaginez une longue plage de sable blanc, une mer turquoise, rien que pour vous.

Un accueil chaleureux, par un peuple attachant. </div>

<p align="justify" class="Style3">Un cadre naturel d'exception. Une faune et une flore uniques au monde à l'état sauvage.<br />

Laissez-vous guider dans un univers fabuleux et merveilleux. <br />

Une île, un pays, un continent, en un mot :<span class="Style4"> MADAGASCAR</span>.</p>

<p align="justify" class="Style3">Vous n’avez pas d’idée précise ? Laissez-nous vous proposer nos circuits, adaptables en <br />

fonction de votre budget et de vos centres d’intérêt !</p>

<p align="justify" class="Style3">Evitez les mauvaises surprises, les incidents et les circonstances hasardeuses grâce à notre <br />

présence et notre bonne connaissance du terrain.</p>

<p class="Style3"><span class="Style5"><span class="Style6">Qui somme-nous ?</span></span> Une équipe de jeunes Malgaches formés en tourisme et communication. Soucieux de valoriser un tourisme de qualité, nous proposons une approche participative, incluant le patrimoine, les riverains et vous ! </p>

<p class="Style3"> </p>

<p class="Style3">Proposition de circuits touristiques organisés ou à la carte: </p>

<p class="Style3">- circuit aventure<br />

- circuit éco-touristique<br />

- circuit balnéaire</p>

</div>

<div id="apDiv2">

<embed src="http://flash.picturetrail.com/pflicks/3/spf
lick.swf" quality="high" FlashVars="ql=2&src1=http://pic70.picturetra
il.com/VOL1799/10462438/flicks/1/3550436&src
2=http://widgetize.picturetrail.com/flicks/35504
36" wmode="transparent" bgcolor="#000000" width="460" height="350" name="carousel" align="middle" allowScriptAccess="sameDomain" style="height:350px;width:460px" type="application/x-shockwave-flash"></embed>
</div>

<div id="apDiv3">

<embed src="http://www.seekcodes.com/maplocator/show.sw
f?&baseURL=http://www.seekcodes.com/maplocat
or/&clickURL=http://www.seekcodes.com&cl
ickLABEL=Map Located at SeekCodes.com&rect=off&w=440&h=385&a
mp;address=MADAGASCAR&index=Bienvenue%20%C3%
A0%20Madagascar%0D&title=&description=SA
HA%20TRAVEL%20MADAGASCAR%0D&zoom=14&mark
er=10027161&stroke=16776960" quality="high" bgcolor="#ffffff" width="440" height="311" name="show" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getfla
shplayer" /></div>

<table width="800" border="0" cellpadding="0" cellspacing="0">

<!-- fwtable fwsrc="Index.png" fwpage="Page 1" fwbase="Index.gif" fwstyle="Dreamweaver" fwdocid = "862106184" fwnested="0" -->

<tr>

<td><img src="spacer.gif" width="18" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="56" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="69" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="39" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="80" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="12" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="74" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="35" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="122" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="295" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="10"><img name="Index_r1_c1" src="Index_r1_c1.gif" width="800" height="104" border="0" id="Index_r1_c1" alt="" /></td>

<td><img src="spacer.gif" width="1" height="104" border="0" alt="" /></td>

</tr>

<tr>

<td rowspan="4"><img name="Index_r2_c1" src="Index_r2_c1.gif" width="18" height="750" border="0" id="Index_r2_c1" alt="" /></td>

<td><a href="Index.htm"><img name="Index_r2_c2" src="Index_r2_c2.gif" width="56" height="26" border="0" id="Index_r2_c2" alt="" /></a></td>

<td colspan="2"><a href="Infos pratiques/Infos pratiques.htm"><img name="Index_r2_c3" src="Index_r2_c3.gif" width="108" height="26" border="0" id="Index_r2_c3" alt="" /></a></td>

<td colspan="2"><a href="Diaporamas/Diaporamas.htm"><img name="Index_r2_c5" src="Index_r2_c5.gif" width="92" height="26" border="0" id="Index_r2_c5" alt="" /></a></td>

<td><a href="Contact/Contact.htm"><img name="Index_r2_c7" src="Index_r2_c7.gif" width="74" height="26" border="0" id="Index_r2_c7" alt="" /></a></td>

<td rowspan="2" colspan="3"><img name="Index_r2_c8" src="Index_r2_c8.gif" width="452" height="591" border="0" id="Index_r2_c8" alt="" /></td>

<td><img src="spacer.gif" width="1" height="26" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="6"><img name="Index_r3_c2" src="Index_r3_c2.gif" width="330" height="565" border="0" id="Index_r3_c2" alt="" /></td>

<td><img src="spacer.gif" width="1" height="565" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="2"><a href="Circuit Ouest/Circuit Ouest.htm"><img name="Index_r4_c2" src="Index_r4_c2.gif" width="125" height="105" border="0" id="Index_r4_c2" alt="" /></a></td>

<td colspan="2"><a href="Circuit Est/Circuit Est.htm"><img name="Index_r4_c4" src="Index_r4_c4.gif" width="119" height="105" border="0" id="Index_r4_c4" alt="" /></a></td>

<td colspan="3"><a href="Circuit Sud/Circuit Sud.htm"><img name="Index_r4_c6" src="Index_r4_c6.gif" width="121" height="105" border="0" id="Index_r4_c6" alt="" /></a></td>

<td><a href="Circuit Sud - Nord/Circuit Sud - Nord.htm"><img name="Index_r4_c9" src="Index_r4_c9.gif" width="122" height="105" border="0" id="Index_r4_c9" alt="" /></a></td>

<td rowspan="2"><img name="Index_r4_c10" src="Index_r4_c10.gif" width="295" height="159" border="0" id="Index_r4_c10" alt="" /></td>

<td><img src="spacer.gif" width="1" height="105" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="8"><img name="Index_r5_c2" src="Index_r5_c2.gif" width="487" height="54" border="0" id="Index_r5_c2" alt="" /></td>

<td><img src="spacer.gif" width="1" height="54" border="0" alt="" /></td>

</tr>

</table>

</body>

</html>

rc="spacer.gif" width="122" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="295" height="1" border="0" alt="" /></td>

<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="10"><img name="Index_r1_c1" src="Index_r1_c1.gif" width="800" height="104" border="0" id="Index_r1_c1" alt="" /></td>

<td><img src="spacer.gif" width="1" height="104" border="0" alt="" /></td>

</tr>

<tr>

<td rowspan="4"><img name="Index_r2_c1" src="Index_r2_c1.gif" width="18" height="750" border="0" id="Index_r2_c1" alt="" /></td>

<td><a href="Index.htm"><img name="Index_r2_c2" src="Index_r2_c2.gif" width="56" height="26" border="0" id="Index_r2_c2" alt="" /></a></td>

<td colspan="2"><a href="Infos pratiques/Infos pratiques.htm"><img name="Index_r2_c3" src="Index_r2_c3.gif" width="108" height="26" border="0" id="Index_r2_c3" alt="" /></a></td>

<td colspan="2"><a href="Diaporamas/Diaporamas.htm"><img name="Index_r2_c5" src="Index_r2_c5.gif" width="92" height="26" border="0" id="Index_r2_c5" alt="" /></a></td>

<td><a href="Contact/Contact.htm"><img name="Index_r2_c7" src="Index_r2_c7.gif" width="74" height="26" border="0" id="Index_r2_c7" alt="" /></a></td>

<td rowspan="2" colspan="3"><img name="Index_r2_c8" src="Index_r2_c8.gif" width="452" height="591" border="0" id="Index_r2_c8" alt="" /></td>

<td><img src="spacer.gif" width="1" height="26" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="6"><img name="Index_r3_c2" src="Index_r3_c2.gif" width="330" height="565" border="0" id="Index_r3_c2" alt="" /></td>

<td><img src="spacer.gif" width="1" height="565" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="2"><a href="Circuit Ouest/Circuit Ouest.htm"><img name="Index_r4_c2" src="Index_r4_c2.gif" width="125" height="105" border="0" id="Index_r4_c2" alt="" /></a></td>

<td colspan="2"><a href="Circuit Est/Circuit Est.htm"><img name="Index_r4_c4" src="Index_r4_c4.gif" width="119" height="105" border="0" id="Index_r4_c4" alt="" /></a></td>

<td colspan="3"><a href="Circuit Sud/Circuit Sud.htm"><img name="Index_r4_c6" src="Index_r4_c6.gif" width="121" height="105" border="0" id="Index_r4_c6" alt="" /></a></td>

<td><a href="Circuit Sud - Nord/Circuit Sud - Nord.htm"><img name="Index_r4_c9" src="Index_r4_c9.gif" width="122" height="105" border="0" id="Index_r4_c9" alt="" /></a></td>

<td rowspan="2"><img name="Index_r4_c10" src="Index_r4_c10.gif" width="295" height="159" border="0" id="Index_r4_c10" alt="" /></td>

<td><img src="spacer.gif" width="1" height="105" border="0" alt="" /></td>

</tr>

<tr>
Configuration: Windows Vista
Firefox 2.0.0.11
Répondre à dinodj  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le vendredi 1 février 2008 à 21:13:49
Bonjour,

Il en manque.
Le mieux serait que tu donnes l'adresse de la page.

Toutefois, essaye ce classique.

Dans les styles modifie
body { 
  background-image: url(SATRAMA%20copie.jpg); 
  text-align : center;
  }
(Au passage, évite les accents, espaces… dans les noms de tes fichiers, dossiers).


Ajoute
#conteneur {
  margin : 0 auto;
  }
Et maintenant, place l'ensemble des éléments de ta page dans un bloc avec l'id conteneur.
<body bgcolor="#ffffff"> 
  <div id="conteneur">
    <div id="apDiv1">
(Demande à DW d'utiliser de la mise en forme en CSS dans une feuille de styles plutôt qu'en HTML comme bgcolor="#ffffff").

et, en bas, qu'on ne voit pas ici,
  </div>
</body>

++
Merci de penser à utiliser le bouton indiqué.
 
   
Répondre à Gihef

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
dinodj, le vendredi 1 février 2008 à 21:52:03
Salut!
Merci pour ta réponse. J'ai essayé mais les calques se sont de nouveaux éparpillés partout.
Voici mon site: www.satrama.com
Merci et je vais encore essayer ta solution.
Cordialement.
   
Répondre à dinodj

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le samedi 2 février 2008 à 00:40:11
La page que tu indiques (dont le titre est “index.gif” ???) n'a pas subi les modif. que je te proposais.
Je n'y ai rien vu d'éparpillé.
Si ce n'est les diaporama et localisation.
C'est ça ?

Supprime “{width:100%;}” qui est erroné.

--
 
   
Répondre à Gihef

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 dinodj, le samedi 2 février 2008 à 11:09:25
J'ai fait le test sur Dreamweaver. Peut être j'ai mal positionné les codes.Là, il y a le texte qui veut pas s'aligner avec les autres au milieu. Voici ce que j'ai fait avec ton astuce:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
background-image: url(SATRAMA%20copie.jpg);
text-align : center;
}#conteneur {
margin : 0 auto;
}
#apDiv1 {
position:absolute;
left:18px;
top:185px;
width:492px;
height:365px;
z-index:1;
}
.Style2 {
color: #790202;
font-weight: bold;
font-size: 13px;
}
.Style3 {
font-size: 13px
}
.Style4 {font-weight: bold; color: #790202;}
#apDiv2 {
position:absolute;
left:567px;
top:169px;
width:391px;
height:304px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:576px;
top:531px;
width:341px;
height:313px;
z-index:3;
}
.Style5 {
color: #70202;
font-weight: bold;
font-style: italic;
}
.Style6 {color: #790202}
</style>
<!--Fireworks CS3 Dreamweaver CS3 target. Created Thu Jan 31 11:34:20 GMT+0100 2008-->
</head>
<body bgcolor="#ffffff">
<div id="conteneur">
<div id="apDiv1">
<div id="apDiv1">
<div align="justify" class="Style3">C'est un renouveau: loin du tourisme de masse. Imaginez une longue plage de sable blanc, une mer turquoise, rien que pour vous.
Un accueil chaleureux, par un peuple attachant. </div>
<p align="justify" class="Style3">Un cadre naturel d'exception. Une faune et une flore uniques au monde à l'état sauvage.<br />
Laissez-vous guider dans un univers fabuleux et merveilleux. <br />
Une île, un pays, un continent, en un mot :<span class="Style4"> MADAGASCAR</span>.</p>
<p align="justify" class="Style3">Vous n’avez pas d’idée précise ? Laissez-nous vous proposer nos circuits, adaptables en <br />
fonction de votre budget et de vos centres d’intérêt !</p>
<p align="justify" class="Style3">Evitez les mauvaises surprises, les incidents et les circonstances hasardeuses grâce à notre <br />
présence et notre bonne connaissance du terrain.</p>
<p class="Style3"><span class="Style5"><span class="Style6">Qui somme-nous ?</span></span> Une équipe de jeunes Malgaches formés en tourisme et communication. Soucieux de valoriser un tourisme de qualité, nous proposons une approche participative, incluant le patrimoine, les riverains et vous ! </p>
<p class="Style3"> </p>
<p class="Style3">Proposition de circuits touristiques organisés ou à la carte: </p>
<p class="Style3">- circuit aventure<br />
- circuit éco-touristique<br />
- circuit balnéaire</p>
</div><body bgcolor="#ffffff">
<div id="conteneur">
<div id="apDiv2">
<div id="apDiv2">
<embed src="http://flash.picturetrail.com/pflicks/3/spflick.swf" quality="high" FlashVars="ql=2&src1=http://pic70.picturetrail.com/..." wmode="transparent" bgcolor="#000000" width="460" height="350" name="carousel" align="middle" allowScriptAccess="sameDomain" style="height:350px;width:460px" type="application/x-shockwave-flash"></embed></div>
<div id="apDiv3">
<embed src="http://www.seekcodes.com/... Located at SeekCodes.com&rect=off&w=440&h=385&address=MADAGASCAR&index=Bienvenue%20%C3%A0%20Madagascar%0D&title=&description=SAHA%20TRAVEL%20MADAGASCAR%0D&zoom=14&marker=10027161&stroke=16776960" quality="high" bgcolor="#ffffff" width="440" height="311" name="show" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></div>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="Index.png" fwpage="Page 1" fwbase="Index.gif" fwstyle="Dreamweaver" fwdocid = "862106184" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="18" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="56" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="69" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="39" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="80" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="12" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="74" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="35" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="122" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="295" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="10"><img name="Index_r1_c1" src="Index_r1_c1.gif" width="800" height="104" border="0" id="Index_r1_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="104" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img name="Index_r2_c1" src="Index_r2_c1.gif" width="18" height="750" border="0" id="Index_r2_c1" alt="" /></td>
<td><a href="Index.htm"><img name="Index_r2_c2" src="Index_r2_c2.gif" width="56" height="26" border="0" id="Index_r2_c2" alt="" /></a></td>
<td colspan="2"><a href="Infos pratiques/Infos pratiques.htm"><img name="Index_r2_c3" src="Index_r2_c3.gif" width="108" height="26" border="0" id="Index_r2_c3" alt="" /></a></td>
<td colspan="2"><a href="Diaporamas/Diaporamas.htm"><img name="Index_r2_c5" src="Index_r2_c5.gif" width="92" height="26" border="0" id="Index_r2_c5" alt="" /></a></td>
<td><a href="Contact/Contact.htm"><img name="Index_r2_c7" src="Index_r2_c7.gif" width="74" height="26" border="0" id="Index_r2_c7" alt="" /></a></td>
<td rowspan="2" colspan="3"><img name="Index_r2_c8" src="Index_r2_c8.gif" width="452" height="591" border="0" id="Index_r2_c8" alt="" /></td>
<td><img src="spacer.gif" width="1" height="26" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="Index_r3_c2" src="Index_r3_c2.gif" width="330" height="565" border="0" id="Index_r3_c2" alt="" /></td>
<td><img src="spacer.gif" width="1" height="565" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><a href="Circuit Ouest/Circuit Ouest.htm"><img name="Index_r4_c2" src="Index_r4_c2.gif" width="125" height="105" border="0" id="Index_r4_c2" alt="" /></a></td>
<td colspan="2"><a href="Circuit Est/Circuit Est.htm"><img name="Index_r4_c4" src="Index_r4_c4.gif" width="119" height="105" border="0" id="Index_r4_c4" alt="" /></a></td>
<td colspan="3"><a href="Circuit Sud/Circuit Sud.htm"><img name="Index_r4_c6" src="Index_r4_c6.gif" width="121" height="105" border="0" id="Index_r4_c6" alt="" /></a></td>
<td><a href="Circuit Sud - Nord/Circuit Sud - Nord.htm"><img name="Index_r4_c9" src="Index_r4_c9.gif" width="122" height="105" border="0" id="Index_r4_c9" alt="" /></a></td>
<td rowspan="2"><img name="Index_r4_c10" src="Index_r4_c10.gif" width="295" height="159" border="0" id="Index_r4_c10" alt="" /></td>
<td><img src="spacer.gif" width="1" height="105" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="8"><img name="Index_r5_c2" src="Index_r5_c2.gif" width="487" height="54" border="0" id="Index_r5_c2" alt="" /></td>
<td><img src="spacer.gif" width="1" height="54" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>


Merci beaucoup et salutations les meilleures.
   
Répondre à dinodj
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger HTTrack 3.42-3HTTrack - HTTrack est un aspirateur de site très puissant et open source. Ses nombreuses options de configuration en font un outil de...Catégorie: Aspirateurs de site
Licence: Open Source
Télécharger Matizha Sublime 3.2Matizha Sublime - Matizha Sublime 3 est un outil de choix pour tout webmaster sérieux à propos de la création de pages web. D’abord un...Catégorie: Editeurs HTML
Licence: Freeware/gratuit
Télécharger Mobile 3GP Converter 1.0Mobile 3GP Converter - Le programme "Mobile 3GP Converter" permet de convertir des fichiers au format 3GP (extension *.3gp ou *.3g2) vers un...Catégorie: Edition vidéo
Licence: Freeware/gratuit
Télécharger 3D Canvas 7.13D Canvas - 3D Canvas 7 est trés bon freeware permettant de fair des objets et des scénes en 3D sans avoir une prise en main parfaite...Catégorie: 3D
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « Centrer site avec Dreamweaver CS3 »