Problème de structure

Question

Towell

3 Jun 2008 à 14:01

Hello,

J'ai fais un design via Photoshop, je l'ai découpé (toujours via Photoshop), et je l'ai enregistré pour le web, j'ai maintenant le fichier contenant ma page web. Page que j'arrange en remplaçant les "img" par des "background", etc.
Tout s'affiche donc correctement jusqu'à présent.

Mais je rencontre, malgré mes nombreuses recherches, toujours le même problème;

http://img107.imageshack.us/my.php?image=aaaav4.jpg

Ma page est constitué de 3 parties principales; le menu de gauche, le centre de la page pour le contenu, et le menu de droite.
Mais lorsque je rempli une des 3 parties principales de ma page, j'ai par conséquent les 2 autres qui suivent le mouvement, et s'agrandissent aussi, alors qu'elles ne devraient pas.

L'image donné ci-dessus montre clairement que les 3 parties sont reliées, ceci est incontestablement un problème de structure de tableau.
J'ai essayé quelques trucs, mais impossible de corriger le problème, j'en fais donc appel à vous ...
Modifié par Towell (03 Jun 2008 - 15:51)

bhen

3 Jun 2008 à 16:57

(entre discrètement sans faire de bruit)

Bonjour,

je pense que ta découpe est réalisée à l'aide de tableaux. Il faudrait que tu suives les tutoriels proposés sur ce site avant de te faire crucifier par les visiteurs de ce forum. De toute façon, si ils ne te crucifient pas pour ça, ils le feront certainement puisque tu n'as pas ajouté la source de ta page dans le message.

Smiley cligne

Towell

3 Jun 2008 à 18:14

Merci de ton aide Smiley smile

Oui j'ai regardé les tutos du site évidement mais pas qui résout mon problème actuel.
J'ai pas mit le code pour ne pas spammer aux yeux de certains, mais bon je le mets quand même:

<HTML>
<HEAD>
<TITLE>Version N°5 du site (bêta)</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</HEAD>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (V5_finit.psd) -->
<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD ROWSPAN=18 WIDTH=60 HEIGHT=768 style="background-image:url(images/design/V5_01.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD ROWSPAN=18 WIDTH=15% HEIGHT=30% style="background-image:url(images/design/fond_gauche.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD ROWSPAN=17 WIDTH=11 HEIGHT=755 style="background-image:url(images/design/bordure_gauche.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=7 style="background-image:url(images/design/bordure_banniere_haut.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD ROWSPAN=17 WIDTH=11 HEIGHT=755 style="background-image:url(images/design/bordure_droite.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD ROWSPAN=18 WIDTH=14% HEIGHT=30% style="background-image:url(images/design/fond_droite.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD ROWSPAN=18 WIDTH=63 HEIGHT=768 style="background-image:url(images/design/V5_07.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=138 style="background-image:url(images/design/banniere.png) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=1 style="background-image:url(images/design/V5_09.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=10 style="background-image:url(images/design/bordure_banniere_bas.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=39 style="background-image:url(images/design/menu_horizontal.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=10 style="background-image:url(images/design/bordure_haut.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD ROWSPAN=9 WIDTH=10 HEIGHT=484 style="background-image:url(images/design/V5_13.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=82 style="background-image:url(images/design/V5_14.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD COLSPAN=3 WIDTH=541 HEIGHT=82 style="background-image:url(images/design/body_titre.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=82 style="background-image:url(images/design/V5_16.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD ROWSPAN=9 WIDTH=10 HEIGHT=484 style="background-image:url(images/design/V5_17.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=5 WIDTH=853 HEIGHT=28 style="background-image:url(images/design/V5_18.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD WIDTH=156 HEIGHT=100 style="background-image:url(images/design/menu_gauche_01.jpg) ; background-repeat:auto ; text-align:center">
<p> le conten contenu du bloc...Tu peut mettre de images, des liens, enfin voilà quoi XDle contenu du bloc...Tu peut mettre de images, des liens contenu du bloc...Tu peut mettre de images, des liens, enfin voilà quoi XDle contenu du bloc...Tu peut mettre de images, des liens contenu du bloc...Tu peut mettre de images, des liens, enfin voilà quoi XDle contenu du bloc...Tu peut mettre de images, des liens contenu du bloc...Tu peut mettre de images, des liens, enfin voilà quoi XDle contenu du bloc...Tu peut mettre de images, des liensu du bloc...Tu peut mettre de images, des liens, enfin voilà quoi XDle contenu du bloc...Tu peut mettre de images, des liens, enfin voilà quoi XD  </p>
		 </TD>
		 
			</TD>
		<TD ROWSPAN=7 WIDTH=28 HEIGHT=374 style="background-image:url(images/design/V5_20.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
			
		<TD ROWSPAN=7 WIDTH=485 HEIGHT=374 style="background-image:url(images/design/body.jpg) ; background-repeat:repeat ; text-align:center">
			</TD>
			
		<TD ROWSPAN=7 WIDTH=28 HEIGHT=374 style="background-image:url(images/design/V5_22.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
			
		<TD WIDTH=156 HEIGHT=100 style="background-image:url(images/design/menu_droite_01.jpg) ; background-repeat:auto ; text-align:center">		
		    
			
			<td background="images/design/menu_haut.png" style="background-repeat:no-repeat;">
			</td>
	        
		<td background="images/design/menu_centre.png" style="background-repeat: auto;">images, des liens, enfin voilà quoi XDle contages, des liens, enfin voilà quoi XDle contenu du bloc...Tu peut mettre de iages, des liens, enfin voilà quoi XDle contenu du bloc...Tu peut mettre de ienu du bloc...Tu peut mettre de images, des liens contenu du.
	     </TD>
		 
			<td background="images/design/menu_bas.png" style="background-repeat: no-repeat;">
			</TD>
			
	<TR>
		<TD WIDTH=156 HEIGHT=8 style="background-image:url(images/design/V5_24.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=8 style="background-image:url(images/design/V5_25.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD WIDTH=156 HEIGHT=100 style="background-image:url(images/design/menu_gauche_02.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=100 style="background-image:url(images/design/menu_droite_02.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD WIDTH=156 HEIGHT=8 style="background-image:url(images/design/V5_28.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=8 style="background-image:url(images/design/V5_29.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD WIDTH=156 HEIGHT=100 style="background-image:url(images/design/menu_gauche_03.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=100 style="background-image:url(images/design/menu_droite_03.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD WIDTH=156 HEIGHT=8 style="background-image:url(images/design/V5_32.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=8 style="background-image:url(images/design/V5_33.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD WIDTH=156 HEIGHT=50 style="background-image:url(images/design/menu_gauche_04.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
		<TD WIDTH=156 HEIGHT=50 style="background-image:url(images/design/menu_droite_04.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=55 style="background-image:url(images/design/V5_36.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=7 WIDTH=873 HEIGHT=11 style="background-image:url(images/design/bordure_bas.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
	<TR>
		<TD COLSPAN=9 WIDTH=895 HEIGHT=13 style="background-image:url(images/design/V5_38.jpg) ; background-repeat:auto ; text-align:center">
			</TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Modifié par Towell (04 Jun 2008 - 11:28)

bhen

4 Jun 2008 à 09:44

tu es sur d'avoir vu cette section http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/ ?

Igor

4 Jun 2008 à 10:19

Bonjour,
Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

Towell

4 Jun 2008 à 11:35

Je viens de faire une page web en utilisant ce tuto; http://www.siteduzero.com/tuto-3-62-1-creons-le-design-de-votre-site-web.html#banni%C3%A8re

J'ai tout réussi, mais j'ai néanmoins quelques questions:

Avec cette méthode, afficher une page web en CSS, peux-t-on avec cette méthode afficher correctement un design que l'on a crée nous même ?
Modifié par Towell (04 Jun 2008 - 11:45)

bhen

4 Jun 2008 à 12:16

Bien entendu,

je dirai que ça demande simplement de la pratique et la pratique, on l'acquiert en faisant des erreurs et en posant des questions (sur ce forum, par exemple) Smiley cligne

Towell

4 Jun 2008 à 12:32

Oui c'est pourquoi je viens ici en fait vous poser tout un tas de questions Smiley lol

Je trouve cette méthode bien plus simple et pratique par rapport aux tableaux en fait ... Smiley biggrin

Afin d'afficher tout notre design correctement cela demande de tout bien découper en fait, c'est totalement différent, mais bien plus pratique quand on y regarde bien.

Merci de m'avoir aidé, je n'ai plus de question pour le moment, mais j'aurais encore sans doute d'autres problèmes etc et je reviendrais vous embêter ^^
Merci Smiley ravi

Towell

4 Jun 2008 à 15:57

J'ai une question;

J'ai un bloc id pour un menu, et j'aimerais savoir s'il était possible de lui associer en haut une image, au centre une autre, et ensuite en bas une dernière ? ... Plutôt que de ne lui associer uniquement une seule image, j'ai essayé mais en vain Smiley confus

bhen

4 Jun 2008 à 16:49

On ne peut pas attribuer plusieurs backgrounds à un même élément. Mais cet élément peut être séparé en plusieurs éléments, c'est d'ailleurs souvent le cas. Ton div doit certainement contenir d'autres balises, il faut donc que tu grattes de ce côté-là.

Towell

4 Jun 2008 à 20:16

Ok merci de la réponse, oui je vais gratter afin de trouver la solution, car je rencontre quelques problèmes divers (images se superposant etc) ... Smiley cligne

Towell

4 Jun 2008 à 21:02

Je ne comprends pas pourquoi mes 2 menus ne vont pas à la même hauteur que le corps au milieu, pourtant il n'y a rien dans le CSS indiquant qu'il doivent laisser une marge ...

http://i42.servimg.com/u/f42/09/02/32/72/sans_t11.jpg

J'ai cherché et cherché mais impossible de trouvé d'où vient le problème Smiley confus

Une idée svp ?

bhen

5 Jun 2008 à 09:37

N'oublie pas d'ajouter ton code quand tu poses une question.

A priori, les intitulés de tes menus sont des titres (h1 voire h2). Ils ont des marges par défaut. Ca doit être ca ton problème.

Towell

5 Jun 2008 à 11:48

Oui en retirant la taille des titres ça va mieux, mais pas complètement. Là actuellement j'ai l'image de menu centrale qui vient superposer le haut du menu ...

<div id="menu_gauche">
   <!--  Ici on mettra le menu de gauche -->
   
   <div class="element_menu">
       <h3Titre menu</h3>
	<div id="menu_centre">
       <ul>
           <li><a href="page1.html">Lien</a></li>
           <li><a href="page2.html">Lien</a></li>
           <li><a href="page3.html">Lien</a></li>
		   <li><a href="page3.html">Lien</a></li>
		   <li><a href="page3.html">Lien</a></li>
       </ul>

	   	   	<div id="menu_bas">
		</div>
		</div>
		</div>
	   </div>
   </div>
</div>

#menu_haut
{
   width: 156px; /* Très important : donner une taille au menu */
   background-image: url("images/menu_haut.png");
   background-repeat: repeat-x;
   float: center
}

#menu_centre
{
   width: 156px; /* Très important : donner une taille au menu */
   background-image: url("images/menu_centre.png");
   background-repeat: auto;
}

#menu_bas
{
   width: 156px; /* Très important : donner une taille au menu */
   background-image: url("images/menu_bas.png");
   float: right;
}

element_menu
{
   background-color: #;
   background-image: url("images/menu_haut.png");
   background-repeat: no-repeat;
   border: 0px solid black;
   margin-bottom: 0px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

/* Quelques effets sur les menus */


.element_menu h3 /* Tous les titres de menus */
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: red;
}

Merci de ton aide, c'est sympa Smiley biggrin

Sujet clos

Sémantique web et HTML

Problème de structure