de photoshop à dreamweaver

Caliméro431 · 6 Octobre 2005

bonjour,

sans doute ce problème a déjà été abordé, mais après avoir parcouru toutes les allées du forum, je n'ai pas trouvé la solution, et là je craque!!!

j'ai créé mon site sous photoshop, puis je l'ai retravaillé avec dreamweaver mx. le pb, c'est qu'en 1024*768, ma page n'est pas centrée. Je suis débutante en programmation, du coup, je ne sais pas comment me dépatouiller avec les feuilles de style etc..., et ce malgré les différents tutos (j'ai pas bcp de temps pour tout lire!!)

mon code est long et pas terrible, ca donne çà:

Eh bien la structure de ma page se presente comme ceci:

{
<HTML>
<HEAD>
<TITLE>site</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (site.psd) -->
<STYLE TYPE="text/css">
<!--

#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:34px;
	height:525px;
}

#index-02 {
	position:absolute;
	left:34px;
	top:0px;
	width:131px;
	height:88px;
}

#index-03 {
	position:absolute;
	left:165px;
	top:0px;
	width:431px;
	height:88px;
}

#index-04 {
	position:absolute;
	left:596px;
	top:0px;
	width:83px;
	height:88px;
}

#index-05 {
	position:absolute;
	left:679px;
	top:0px;
	width:121px;
	height:88px;
}

#index-06 {
	position:absolute;
	left:34px;
	top:88px;
	width:131px;
	height:26px;
}

#index-07 {
	position:absolute;
	left:165px;
	top:88px;
	width:151px;
	height:26px;
}

#index-08 {
	position:absolute;
	left:316px;
	top:88px;
	width:68px;
	height:26px;
}

#index-09 {
	position:absolute;
	left:384px;
	top:88px;
	width:131px;
	height:26px;
}

#index-10 {
	position:absolute;
	left:515px;
	top:88px;
	width:38px;
	height:26px;
}

#index-11 {
	position:absolute;
	left:553px;
	top:88px;
	width:32px;
	height:26px;
}

#index-12 {
	position:absolute;
	left:585px;
	top:88px;
	width:139px;
	height:36px;
}

#index-13 {
	position:absolute;
	left:724px;
	top:88px;
	width:76px;
	height:437px;
}

#index-14 {
	position:absolute;
	left:34px;
	top:114px;
	width:551px;
	height:1px;
}

#index-15 {
	position:absolute;
	left:34px;
	top:115px;
	width:551px;
	height:9px;
}

#index-16 {
	position:absolute;
	left:34px;
	top:124px;
	width:153px;
	height:23px;
}

#index-17 {
	position:absolute;
	left:187px;
	top:124px;
	width:398px;
	height:373px;
}

#index-18 {
	position:absolute;
	left:585px;
	top:124px;
	width:139px;
	height:67px;
}

#index-19 {
	position:absolute;
	left:34px;
	top:147px;
	width:153px;
	height:14px;
}

#index-20 {
	position:absolute;
	left:34px;
	top:161px;
	width:153px;
	height:15px;
}

#index-21 {
	position:absolute;
	left:34px;
	top:176px;
	width:153px;
	height:15px;
}

#index-22 {
	position:absolute;
	left:34px;
	top:191px;
	width:153px;
	height:15px;
}

#index-23 {
	position:absolute;
	left:585px;
	top:191px;
	width:139px;
	height:23px;
}

#index-24 {
	position:absolute;
	left:34px;
	top:206px;
	width:153px;
	height:16px;
}

#index-25 {
	position:absolute;
	left:585px;
	top:214px;
	width:139px;
	height:24px;
}

#index-26 {
	position:absolute;
	left:34px;
	top:222px;
	width:153px;
	height:16px;
}

#index-27 {
	position:absolute;
	left:34px;
	top:238px;
	width:153px;
	height:24px;
}

#index-28 {
	position:absolute;
	left:585px;
	top:238px;
	width:139px;
	height:24px;
}

#index-29 {
	position:absolute;
	left:34px;
	top:262px;
	width:153px;
	height:21px;
}

#index-30 {
	position:absolute;
	left:585px;
	top:262px;
	width:139px;
	height:21px;
}

#index-31 {
	position:absolute;
	left:34px;
	top:283px;
	width:153px;
	height:26px;
}

#index-32 {
	position:absolute;
	left:585px;
	top:283px;
	width:139px;
	height:26px;
}

#index-33 {
	position:absolute;
	left:34px;
	top:309px;
	width:153px;
	height:15px;
}

#index-34 {
	position:absolute;
	left:585px;
	top:309px;
	width:11px;
	height:188px;
}

#index-35 {
	position:absolute;
	left:596px;
	top:309px;
	width:128px;
	height:216px;
}

#index-36 {
	position:absolute;
	left:34px;
	top:324px;
	width:153px;
	height:17px;
}

#index-37 {
	position:absolute;
	left:34px;
	top:341px;
	width:153px;
	height:22px;
}

#index-38 {
	position:absolute;
	left:34px;
	top:363px;
	width:153px;
	height:84px;
}

#index-39 {
	position:absolute;
	left:34px;
	top:447px;
	width:153px;
	height:27px;
}

#index-40 {
	position:absolute;
	left:34px;
	top:474px;
	width:153px;
	height:1px;
}

#index-41 {
	position:absolute;
	left:34px;
	top:472px;
	width:153px;
	height:22px;
}

#index-42 {
	position:absolute;
	left:34px;
	top:497px;
	width:562px;
	height:28px;
}

#index-43 {
	position:absolute;
	left:0px;
	top:525px;
	width:800px;
	height:75px;
}

-->
</STYLE>
<!-- End ImageReady Styles -->
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (site.psd) -->
<DIV ID="index-01">
	<IMG SRC="images/index_01.gif" WIDTH=34 HEIGHT=525 ALT="">
</DIV>
<DIV ID="index-02"> <a href="http://www.defense.gouv.fr/sites/defense/"><IMG SRC="images/index_02.gif" ALT="" WIDTH=131 HEIGHT=88 border="0"></a> 

</DIV>
<DIV ID="index-03">
	<IMG SRC="images/index_03.gif" WIDTH=431 HEIGHT=88 ALT="">
</DIV>
<DIV ID="index-04">
	<IMG SRC="images/index_04.gif" WIDTH=83 HEIGHT=88 ALT="">
</DIV>
<DIV ID="index-05">
	<IMG SRC="images/index_05.gif" WIDTH=121 HEIGHT=88 ALT="">
</DIV>
<DIV ID="index-06"> <a href="index.html"><IMG SRC="images/index_06.gif" ALT="" WIDTH=131 HEIGHT=26 border="0"></a> 
</DIV>
<DIV ID="index-07"> <a href="6rg.htm"><IMG SRC="images/index_07.gif" ALT="" WIDTH=151 HEIGHT=26 border="0"></a> 

</DIV>
<DIV ID="index-08"> <a href="5cir.htm"><IMG SRC="images/index_08.gif" ALT="" WIDTH=68 HEIGHT=26 border="0"></a> 
</DIV>
<DIV ID="index-09">
	<IMG SRC="images/index_09.gif" WIDTH=131 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-10">
	<IMG SRC="images/index_10.gif" WIDTH=38 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-11">
	<IMG SRC="images/index_11.gif" WIDTH=32 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-12">

	<IMG SRC="images/index_12.gif" WIDTH=139 HEIGHT=36 ALT="">
</DIV>
<DIV ID="index-13">
	<IMG SRC="images/index_13.gif" WIDTH=76 HEIGHT=437 ALT="">
</DIV>
<DIV ID="index-14">
	<IMG SRC="images/index_14.gif" WIDTH=551 HEIGHT=1 ALT="">
</DIV>
<DIV ID="index-15">
	<IMG SRC="images/index_15.gif" WIDTH=551 HEIGHT=9 ALT="">
</DIV>
<DIV ID="index-16">
	<IMG SRC="images/index_16.gif" WIDTH=153 HEIGHT=23 ALT="">

</DIV>
<DIV ID="index-17"> 
  <p>Le site est actuellement en construction.</p>
  <p>Rubriques disponibles:</p>
  <ul>
    <li>le 6e régiment du génie</li>
    <li>la 5e CIR (en partie)</li>

    <li>chant</li>
    <li>insigne</li>
    <li>téléchargements</li>
    <li>journées découvertes</li>
  </ul>

</DIV>
<DIV ID="index-18">
	<IMG SRC="images/index_18.gif" WIDTH=139 HEIGHT=67 ALT="">
</DIV>
<DIV ID="index-19">
	<IMG SRC="images/index_19.gif" WIDTH=153 HEIGHT=14 ALT="">
</DIV>
<DIV ID="index-20">
	<IMG SRC="images/index_20.gif" WIDTH=153 HEIGHT=15 ALT="">
</DIV>
<DIV ID="index-21">
	<IMG SRC="images/index_21.gif" WIDTH=153 HEIGHT=15 ALT="">
</DIV>

<DIV ID="index-22">
	<IMG SRC="images/index_22.gif" WIDTH=153 HEIGHT=15 ALT="">
</DIV>
<DIV ID="index-23">
	<IMG SRC="images/index_23.gif" WIDTH=139 HEIGHT=23 ALT="">
</DIV>
<DIV ID="index-24"> <a href="chant.htm"><IMG SRC="images/index_24.gif" ALT="" WIDTH=153 HEIGHT=16 border="0"></a> 
</DIV>
<DIV ID="index-25">
	<IMG SRC="images/index_25.gif" WIDTH=139 HEIGHT=24 ALT="">
</DIV>
<DIV ID="index-26"> <a href="insigne.html"><IMG SRC="images/index_26.gif" ALT="" WIDTH=153 HEIGHT=16 border="0"></a> 

</DIV>
<DIV ID="index-27">
	<IMG SRC="images/index_27.gif" WIDTH=153 HEIGHT=24 ALT="">
</DIV>
<DIV ID="index-28"> <a href="jdecouverte.htm"><IMG SRC="images/index_28.gif" ALT="" WIDTH=139 HEIGHT=24 border="0"></a> 
</DIV>
<DIV ID="index-29"> <a href="telecharg.htm"><IMG SRC="images/index_29.gif" ALT="" WIDTH=153 HEIGHT=21 border="0"></a> 
</DIV>
<DIV ID="index-30">
	<IMG SRC="images/index_30.gif" WIDTH=139 HEIGHT=21 ALT="">
</DIV>
<DIV ID="index-31"> <a href="telecharg.htm"><IMG SRC="images/index_31.gif" ALT="" WIDTH=153 HEIGHT=26 border="0"></a> 

</DIV>
<DIV ID="index-32">
	<IMG SRC="images/index_32.gif" WIDTH=139 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-33"> <a href="telecharg.htm"><IMG SRC="images/index_33.gif" ALT="" WIDTH=153 HEIGHT=15 border="0"></a> 
</DIV>
<DIV ID="index-34">
	<IMG SRC="images/index_34.gif" WIDTH=11 HEIGHT=188 ALT="">
</DIV>
<DIV ID="index-35"><a href="http://www.reserves.terre.defense.gouv.fr/index-frames.html"><img src="images/logoERT.gif" width="126" height="29" border="0"></a> 
</DIV>
<DIV ID="index-36"> <a href="telecharg.htm"><IMG SRC="images/index_36.gif" ALT="" WIDTH=153 HEIGHT=17 border="0"></a> 
</DIV>

<DIV ID="index-37">
	<IMG SRC="images/index_37.gif" WIDTH=153 HEIGHT=22 ALT="">
</DIV>
<DIV ID="index-38">
	<IMG SRC="images/index_38.gif" WIDTH=153 HEIGHT=84 ALT="">
</DIV>
<DIV ID="index-39">
	<IMG SRC="images/index_39.gif" WIDTH=153 HEIGHT=27 ALT="">
</DIV>
<DIV ID="index-40">
	<IMG SRC="images/index_40.gif" WIDTH=153 HEIGHT=1 ALT="">
</DIV>
<DIV ID="index-41"> <IMG SRC="images/index_41.gif" WIDTH=153 HEIGHT=29 ALT=""> 

</DIV>
<DIV ID="index-42">
	<IMG SRC="images/index_42.gif" WIDTH=562 HEIGHT=28 ALT="">
</DIV>
<DIV ID="index-43"> <IMG SRC="images/index_43.gif" ALT="" WIDTH=800 HEIGHT=75 border="0"> 
</DIV>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
}

merci d'avance à tout ceux qui pourront m'aider. ca fait 3 semaines que je cherche!!!

Remi · 6 Octobre 2005

Tu mets un "text-align:center" sur ton conteneur (en l'occurence : body) et tu crées un DIV qui va contenir toute ta page et que tu mets en "position:relative;text-align:left;margin:0 auto;".

jeanpierre949 · 7 Octobre 2005

Bonjour.

Pour centrer une page faut definir la largeur totale

du body et mettre margin:auto;

Caliméro431 · 7 Octobre 2005

j'ai essayé d'appliquer vos conseils, mais peine perdue, rien ne bouge.... :wacko:

jeanpierre949 · 7 Octobre 2005

Tu peux la mettre en ligne ta page?

NorSeb · 7 Octobre 2005

sans doute ce problème a déjà été abordé, mais après avoir parcouru toutes les allées du forum, je n'ai pas trouvé la solution, et là je craque!!!

Hum !

j'ai essayé d'appliquer vos conseils, mais peine perdue, rien ne bouge....

Donne-nous le code modifié pour que l'on puisse se rendre compte des modifications que tu as faites. Ce sera plus facile pour te dire ce qui ne va pas.

jeanpierre949 · 7 Octobre 2005

Alors j'ai testé.

ce sont tes <div> en position absolute margin-left qui empechent le centage alors pour corriger enleve les infos du <body> et mets ca dans le css

body
position:absolute{
width:850px;
height:auto;
margin: opx auto auto:80px;
background-color:#FFFFFF;
}

Modifié 7 Octobre 2005 par jeanpierre949

Connexion

de photoshop à dreamweaver

Sujets conseillés

Caliméro431

Lien vers le commentaire

Partager sur d’autres sites

Remi

Lien vers le commentaire

Partager sur d’autres sites

jeanpierre949

Lien vers le commentaire

Partager sur d’autres sites

Caliméro431

Lien vers le commentaire

Partager sur d’autres sites

jeanpierre949

Lien vers le commentaire

Partager sur d’autres sites

NorSeb

Lien vers le commentaire

Partager sur d’autres sites

jeanpierre949

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité