probleme de mise en page

**francis m** · 24/10/2005, 19h44

voilà qui devrait fonctionner. Il faudra cependant que tu ajustes toi-même les couleurs et les dimensions...

feuille html

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
<html> 
<head> 
 
<link href "style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
	<div class="baniere"> 
		<p align=center><img src="images/baniere.gif" width="600px" ></p> 
	</div> 
	<div class="page"> 
		<img src="images/haut_page.gif" width="970px" height="50px"> 
		<div class="txt_page"> 
			<div class="menu"> 
				<img src="images/haut_menu.gif" width="160px" height="50px"> 
				<div class="txt_menu"> 
					<a href="index.html">Accueil</a><br> 
					<hr color="red"> 
					<a href="genre.php" >Film trier par genre</a><br> 
					<a href="liste.php">Liste compléte des films</a><br><br> 
					Recherche d'un film :<br> 
					<input type=text name=recherche> 
					<input type=button name=valid value=OK size=3> 
					<br><br><br><br><br> 
				</div> 
				<img src="images/bas_menu.gif" width="160px" height="50px"> 
			</div> 
			<div class="donnees"> 
				<img src="images/haut_donnees.gif" width="640px" height="50px"> 
				<div class="txt_donnees"> 
					Bienvenue sur le site de la boutique CinéMania<br><br> 
					La boutique de location de film<br><br><br> 
					Horaire d'ouverture :<br><br> 
					<important>Du lundi au vendredi</important> : 9h00 - 12h00 et 14h00 - 19h00<br> 
					<important>Samedi</important> : 9h00 - 12h30 et 14h00 - 19h30 
				</div> 
				<img src="images/bas_donnees.gif" width="640px" height="50px"> 
			</div>
		</div> 
		<img src="images/bas_page.gif" width="970px" height="50px"></div> 
	</div> 
</body> 
</html>

feuille css

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
body { 
   background-color : black; 
} 
 
.page { 
   width: 750px; 
   height: auto; 
   position: absolute;    
   top: 50px; 
   left: 20px; 
} 
.txt_page { 
   background-image: url(images/page.gif); 
   background-color:red;
} 
 
.menu { 
	position:absolute;
   width: 150px; 
   height: auto; 
   top: 10px; 
   left: 10px; 
} 
.txt_menu { 
   background-image : url(images/menu.gif); 
   padding-left: 5px; 
   text-align: center; 
   line-height: 30px; 
   background-color:yellow;
} 
 
.donnees { 
  width: 600px; 
   height: auto; 
   margin-top: 50px; 
   margin-left: 250px; 
} 
.txt_donnees { 
   background-image : url(images/menu.gif); 
   padding-left: 5px; 
   background-color:green;
}

**dardantfred** · 24/10/2005, 19h59

merci francis mais cette solution ne peut pas marcher pour mon cas car pour la page d'accueil, mon bloc menu est plus long que le bloc données mais dans les autres pages, mon bloc données est plus grand que mon bloc menu.

**spirou** · 24/10/2005, 21h27

Ce qui serait bien, c'est que tu fasses un petit shéma avec commentaires de ce que tu veux réellement, car là vraiment ça devient difficile de savoir.

De toute façon, à ta place, je recommencerais tout de zéro, en utilisant le css pour l'affichage de toutes tes images de fond, en mettant un doctype à ta page, etc..
Car corriger une page mal conçue fait perdre plus de temps que de la recommencer entièrement.

**francis m** · 25/10/2005, 00h05

indépendemment de ce que te dis spirou, qui n'a pas vraimnt tort,...

si ma solution fonctionne pour toutes tes pages sauf la première, ajoute des balises bidon dans les données de ta première page pour agrandir ce bloc
par bidon je veux dire un code de ce genre :

Code :

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

<p><br /><br /><br /><br /><br /><br /></p>

aux endroits que tu veux. Si tu en mets plusieurs, ton bloc données s'agrandira pour finir par être plus grand que ton bloc menu

probleme de mise en page

HTML

Discussions similaires

Partager

Partager