[CS4] Soucis zone de texte [Résolu]

Olive13013 · 23/07/2011, 16h08

Bonjour,

Débutant avec le logiciel dreamweaver CS4, je rencontre un petit problème avec mon template.

Le template se compose d'un menu a gauche et d'une zone de texte plus à droite. Quand je crée des espaces sur mon texte j'ai mon menu à gauche qui se décale créant un vide blanc, plus le texte est long et plus j'ai le décalage...
J'utilise une image de fond pour la zone de texte, si il y a un décalage a ce niveau je rallongerai simplement l'image mais je ne veux pas que le menu bouge !
J'ai crée la base du template sur photoshop, je ne sais pas si c'est un soucis de tranche lors de mon découpage ou un soucis directement sur dreamweaver...

Voici quelques images pour mieux comprendre...

Merci à vous

Vil'Coyote · 23/07/2011, 23h46

salut,

vus le peut d'élément (absence du code de ta page )

j'opte pur un problème de découpage ou du moins de structure du site. il semble que ton menu comporte une image de fond limité en taille dont l'alignement dépend du cadre de droite. donc quand tu ajoute du texte l'ensemble s'agrandi laissant apparaître le fond de ta page à savoir "blanc".

Olive13013 · 23/07/2011, 23h59

Merci bien pour la réponse Vil'Coyote, je pense aussi que c'est un problème de structure mais je sèche complétement et pourtant j'ai essayé !

J'ai réussi quand même en fusionnant les différentes images que compose le menu et en y mettant un valign top a résoudre le problème mais maintenant le décalage est plus bas toujours sous le menu.

Je peux fournir le PSD si besoin...

Merci en tous cas de te pencher sur le problème !

Voici le code de la page modèle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>modele carangua</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
<!--
@import url("../styles.css");
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (modele carangua.psd) -->
<div align="center">
<table id="Tableau_01" width="963" height="1000" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="963" height="212" align="absbottom" id="FlashID">
		  <param name="movie" value="../images/logo/Bandeau_animer_haut.swf">
		  <param name="quality" value="high">
		  <param name="wmode" value="opaque">
		  <param name="swfversion" value="6.0.65.0">
		  <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
		  <param name="expressinstall" value="../Scripts/expressInstall.swf">
		  <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
		  <!--[if !IE]>-->
		  <object data="../images/logo/Bandeau_animer_haut.swf" type="application/x-shockwave-flash" width="963" height="212" align="absbottom">
		    <!--<![endif]-->
		    <param name="quality" value="high">
		    <param name="wmode" value="opaque">
		    <param name="swfversion" value="6.0.65.0">
		    <param name="expressinstall" value="../Scripts/expressInstall.swf">
		    <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
		    <div>
		      <h4>Le contenu de cette page n&eacute;cessite une version plus r&eacute;cente d’Adobe Flash Player.</h4>
		      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" /></a></p>
	        </div>
		    <!--[if !IE]>-->
	      </object>
		  <!--<![endif]-->
	    </object></td>
		<td width="10">
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="212" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="../images/images modele fr/images/index_02.png" width="963" height="204" alt=""></td>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="204" alt=""></td>
	</tr>
	<tr>
		<td width="201" rowspan="8" valign="top">
			<img src="../images/images modele fr/images/index_03.png" width="201" height="65" alt="">
			<img src="../images/images modele fr/images/index_06.png" width="201" height="67" alt="">
			<img src="../images/images modele fr/images/index_07.png" width="201" height="60" alt="">
			<img src="../images/images modele fr/images/index_08.png" width="201" height="56" alt="">
			<img src="../images/images modele fr/images/index_09.png" width="201" height="54" alt="">
			<img src="../images/images modele fr/images/index_10.png" width="201" height="63" alt="">
			<img src="../images/images modele fr/images/index_11.png" width="201" height="80" alt=""></td>
		<td width="762">
			<img src="../images/images modele fr/images/index_04.png" width="762" height="8" alt=""></td>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
	  <td rowspan="8" valign="top" background="../images/images modele fr/images/index_05.png"><!-- TemplateBeginEditable name="Principale" -->&nbsp;<!-- TemplateEndEditable --></td>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="57" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="67" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="60" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="56" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="54" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="63" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="80" alt=""></td>
	</tr>
	<tr>
		<td><!-- TemplateBeginEditable name="EditRegion2" --><img src="../images/images modele fr/images/index_12.png" width="201" height="26" alt=""><!-- TemplateEndEditable --></td>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2"><object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="963" height="113">
		  <param name="movie" value="../images/logo/bandeau bas.swf">
		  <param name="quality" value="high">
		  <param name="wmode" value="opaque">
		  <param name="swfversion" value="6.0.65.0">
		  <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
		  <param name="expressinstall" value="../Scripts/expressInstall.swf">
		  <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
		  <!--[if !IE]>-->
		  <object type="application/x-shockwave-flash" data="../images/logo/bandeau bas.swf" width="963" height="113">
		    <!--<![endif]-->
		    <param name="quality" value="high">
		    <param name="wmode" value="opaque">
		    <param name="swfversion" value="6.0.65.0">
		    <param name="expressinstall" value="../Scripts/expressInstall.swf">
		    <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
		    <div>
		      <h4>Le contenu de cette page n&eacute;cessite une version plus r&eacute;cente d’Adobe Flash Player.</h4>
		      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" /></a></p>
	        </div>
		    <!--[if !IE]>-->
	      </object>
		  <!--<![endif]-->
	    </object></td>
		<td>
			<img src="../images/images modele fr/images/spacer.gif" width="1" height="113" alt=""></td>
	</tr>
</table>
</div>
<!-- End Save for Web Slices -->
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
//-->
</script>
</body>
</html>

Vil'Coyote · 24/07/2011, 00h18

bon au vue du code.

tu as découpé ta page en haut / milieu (gauche / droite) / bas

ce qu'il se passe c'est que le tableau du milieu partie gauche et plus petit que ta partie droite. ce qui créé le décalage. à cela je suis près a parié que si ton texte de droite prend encore plus de volume ton image va se répéter créant un fond décalé.

il faudrait que tu reprenne les bases en limitant la taille de tes zones (pas uniquement en largeur mais aussi en hauteur) si tu souhaites garder ton fond. le problème et que ce dernier et trop riche et rend donc toute erreur visible.

Olive13013 · 24/07/2011, 00h50

Ok merci je comprends mieux maintenant...

Je peux donc résoudre le problème en créant le tableau composant le menu sur toute la longueur de page et non pas a moitier comme il l'était...

Je vais essayé ca demain, merci pour les conseils et bonne fin de soirée

Vil'Coyote · 25/07/2011, 10h21

alors oui tu peux mettre ton menu sur toute la partie gauche. cependant on en reviens à ce que je t'ai dis à savoir si ton contenu de droite et trop grand, il y aura des erreurs.

Olive13013 · 25/07/2011, 10h30

J'ai trouvé la solution !

J'ai ajouté une balise Div PA dans ma zone texte en rallongeant la longueur général de mon image photoshop et en faisant le menu de gauche sur toute la longueur...

Avec la balise PA il n'y a plus de décalage...

Merci en tous cas pour tes conseils, je ne manquerai pas de consulter le forum et d'y participai...

Bonne journée

23/07/2011, 23h46	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 303 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 303 Points : 4 481 Points : 4 481	salut, vus le peut d'élément (absence du code de ta page ) j'opte pur un problème de découpage ou du moins de structure du site. il semble que ton menu comporte une image de fond limité en taille dont l'alignement dépend du cadre de droite. donc quand tu ajoute du texte l'ensemble s'agrandi laissant apparaître le fond de ta page à savoir "blanc".
	00

24/07/2011, 00h18	#4
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 303 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 303 Points : 4 481 Points : 4 481	bon au vue du code. tu as découpé ta page en haut / milieu (gauche / droite) / bas ce qu'il se passe c'est que le tableau du milieu partie gauche et plus petit que ta partie droite. ce qui créé le décalage. à cela je suis près a parié que si ton texte de droite prend encore plus de volume ton image va se répéter créant un fond décalé. il faudrait que tu reprenne les bases en limitant la taille de tes zones (pas uniquement en largeur mais aussi en hauteur) si tu souhaites garder ton fond. le problème et que ce dernier et trop riche et rend donc toute erreur visible.
	10

24/07/2011, 00h50	#5
Olive13013 Invité de passage Inscription : juillet 2011 Messages : 14 Détails du profil Informations personnelles : Sexe : Localisation : Madagascar Informations forums : Inscription : juillet 2011 Messages : 14 Points : 4 Points : 4	Ok merci je comprends mieux maintenant... Je peux donc résoudre le problème en créant le tableau composant le menu sur toute la longueur de page et non pas a moitier comme il l'était... Je vais essayé ca demain, merci pour les conseils et bonne fin de soirée
	00

25/07/2011, 10h21	#6
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 303 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 303 Points : 4 481 Points : 4 481	alors oui tu peux mettre ton menu sur toute la partie gauche. cependant on en reviens à ce que je t'ai dis à savoir si ton contenu de droite et trop grand, il y aura des erreurs.
	10

25/07/2011, 10h30	#7
Olive13013 Invité de passage Inscription : juillet 2011 Messages : 14 Détails du profil Informations personnelles : Sexe : Localisation : Madagascar Informations forums : Inscription : juillet 2011 Messages : 14 Points : 4 Points : 4	J'ai trouvé la solution ! J'ai ajouté une balise Div PA dans ma zone texte en rallongeant la longueur général de mon image photoshop et en faisant le menu de gauche sur toute la longueur... Avec la balise PA il n'y a plus de décalage... Merci en tous cas pour tes conseils, je ne manquerai pas de consulter le forum et d'y participai... Bonne journée
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email