probleme de mise en page

**dardantfred** · 22/10/2005, 20h47

Voila, je voudrais faire un cadre qui englobe tous mes autres cadre pour avoir une petite bordure entre mon cadre principale et le bord de l'ecran.
le probleme est que j'ai mis 2 images : 1 en haut et 1 en bas et elles restent en haut.
mon cadre principale n'englobe pas mes autres cadres
voila mon codes

page 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
 
<body>
   <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="150px"height="50px"><div class="txt_menu">
	    <a href="index.html">Accueil</a><br>
            .........
	  </div>
	  <img src="images/bas_menu.gif"  
           width="150px"height="50px"></div>
	  <div class="donnees">
		<img src="images/haut_donnees.gif"
                width="600px"  height="50px"><div class="txt_donnees">
		........
	   </div>
	    <img src="images/bas_donnees.gif"
            width=600px"  height="50px"></div>
 
     </div>
 
     <img src="images/bas_page.gif" width="970px"
     height="50px"></div>
</body>

voila mon fichier 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
43
44
45
46
47
48
49
50
51
 
body {
	background-color : black;
}
 
.page {
	width: 750px;
	height: auto;
	position: absolute;	
	top: 50px;
	left: 20px;
 
 
 
 
}
.txt_page {
	background-image: url(images/page.gif);
 
 
}
 
.menu {
	width: 150px;
	height: auto;
	position: absolute;	
	top: 150px;
	left: 50px;
 
}
.txt_menu {
	background-image : url(images/menu.gif);
	padding-left: 5px;
	text-align: center;
	line-height: 30px;
 
}
 
.donnees {
	width: 600px;
	height: auto;
	position: absolute;
	top: 150px;
	left: 300px;
 
}
.txt_donnees {
	background-image : url(images/menu.gif);
	padding-left: 5px;
 
}

merci d'avance

**dardantfred** · 23/10/2005, 16h19

personne pour me repondre car je ne trouve toujours pas la solution.

**francis m** · 23/10/2005, 18h07

pour être honnête, parce que je n'ai pas compris ton problème ni ce que tu cherches...

**dardantfred** · 23/10/2005, 19h07

voila j'ai heberger temporairement le site pour que vous voyez mieux le probleme.
http://membres.lycos.fr/dardantfred/
normallement, le cadre en rouge doit englober tout les autres cadres (menu...) mais il s'arrete en haut

**francis m** · 24/10/2005, 01h34

je suppose que ton cadre rouge s'appelle haut_page.gif, et si tel est le cas, c'est normal qu'il n'englobe pas tout, tu le définis à 50px de hauteur. pareil pour le bas de page.

ps - et essaie d'un peu ranger ton code, les divs imbriqués ne sont pas indentés logiquement, et cela sera plus facile à lire pour toi et pour nous

**blueice** · 24/10/2005, 10h06

Commence par sortir les Javascripts de la page.
Evite les <br> à la chaîne

Code :

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

1
2
3
4
 
<div class="baniere">
		<p align=center><img src="images/baniere.gif" width="600px" ></p>
	</div>

Ca tu peux en faire un h1 tout simple...
<h1>Description de la bannière</h1>
et tu le définis dans la feuille de style.

Après on commencera à y voir nettement mieux...

**dardantfred** · 24/10/2005, 12h22

non en faite j'ouvre ma blasise "page".
j'insere une image qui correspond au haut du cadre rouge car il est arrondi.
j'ouvre une autre balise "txt_page" qui correspond a toute le texte qui y aura dans la page (le menu....) et dans mon css, je met un arriere plan rouge
ensuite je ferme cette palise "txt_page"
j'insere une image pour fermer mon cadre
puis je ferme la balise "page"

et donc ca n emarche pas

**francis m** · 24/10/2005, 13h27

et essaie d'un peu ranger ton code, les divs imbriqués ne sont pas indentés logiquement, et cela sera plus facile à lire pour toi et pour nous

je vais te faire un peu languir parce que j'ai pris du temps pour faire ton boulot, et si tu l'avais fait, je pense que tu aurais directement trouvé.

ci-dessous ton code mis au PROPRE, c'est à dire avec des retraits qui font qu'un code est lisible ou non

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
<body> 
	<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="150px"height="50px">
				<div class="txt_menu"> 
					<a href="index.html">Accueil</a><br> 
					......... 
				</div> 
				<img src="images/bas_menu.gif" width="150px"height="50px">
			</div> 
			<div class="donnees"> 
				<img src="images/haut_donnees.gif" width="600px"  height="50px"><div class="txt_donnees"> 
				........ 
			</div> 
			<img src="images/bas_donnees.gif" width=600px"  height="50px">
		</div> 
    </div> 
    <img src="images/bas_page.gif" width="970px" height="50px">
</div> 
</body>

regardes s'il te paraît correct, corrige éventuellement, et essaies...

**dardantfred** · 24/10/2005, 14h29

ca ne marche toujours pas.
je ne fais pas de retrait a la ligne pour mes </div>
car sinon IE me fais des espaces entre mes images

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

bien sûr que cela ne marche toujours pas, j'ai écrit TON code avec des retraits, je ne l'ai pas corrigé
supprimes le </div> derrière

Code :

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

<img src="images/haut_donnees.gif" width="600px"  height="50px"><div class="txt_donnees">

pour voir

**dardantfred** · 24/10/2005, 14h56

je ne comprend pas ce que tu veux dire
dsl je debute un peu
voila mon code repris proprement

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
<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>
</body>
</html>

**francis m** · 24/10/2005, 17h31

si j'ai bien vu, le problème c'est que tu as un </div> en trop, là où je t'ai écris plus haut (pas que celui la d'ailleurs il me semble)

de ce fait, ton instruction

Code :

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

<img src="images/bas_page.gif" width="970px" height="50px">

n'est pas dans ton <div class="txt_page">divers</div> mais après

**dardantfred** · 24/10/2005, 17h52

effectivement, j'avais oublier d'enlever un </div> mais le probleme persiste. j'ai editer mon code juste au dessus en enlevant le </div> en trop.
sinon ca ne pourrait pas venir de mon fichier css car j'ai mis des positions absolue partout :
classe : -page
-menu
-donnees

**spirou** · 24/10/2005, 18h21

Salut !!!

En premier lieu, pour visualiser ce qui se passe réellement, je te conseilles de mettre des bordures à tous tes blocs.

Et à mon avis le fait que tu utilises le positionnement absolute n'est pas étranger à ton problème.

D'ailleurs quand tu dis que tu as mis des position absolute partout, cela ne risque pas d'arranger la chose, au contraire, car tes images elles tu ne leur à pas mis de positionnement particulier, donc dans le flux normal de ta page.

**dardantfred** · 24/10/2005, 18h42

j'ai fait des test de bordure pour mieux comprendre et a ce que je vois, mon cadre page s'arrete en haut. mes deux autres cadres ne sont pas dans mon cadre principal.
pourtant mon <div page> comprend toute ma page.

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

j'ai regardé un peu plus, et il y a encore un autre problème : tes divs menu et donnees sont en absolute, donc il ne font pas partie du flux

comme tu n'écris rien dans ton <div class="txt_menu"> l'image chargée pour le bas vient directement après celle chargée pour le haut
essaies par exemple, pour voir, une ligne du genre

Code :

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

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

en position juste au-dessus du chargement de ton image rouge basse et tu verras que ce bandeau rouge descend

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

le probleme est que si j'enleve le positionnement absolu, le cade dennees se met en dessous du cadre menu

**spirou** · 24/10/2005, 19h20

Pour mettre un bloc en positionnement absolute, dans un autre bloc, il faut lui spécifier un positionnement, en l'occurence ici, un positionnement relative, afin que ce soit ce bloc qui serve de point de base pour le bloc enfant et non le body de ta page.

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

si je specifie aucune position dans tout mes bloc, mon cadre rouge englobe tout mes autres cadres mais mon cadre donnée et en dessous du cadre menu alors que je le veut a droite.
Et si je met mon cadre principal (ici le rouge) en position relative et mes autres blocs en postion absolue, je me retrouve dans le meme probleme que tout a l'heure (mon cadre rouge n'englobe pas mais autres cadres).

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

pour que cela fonctionne, il est indispensable qu'un des deux divs (menu ou donnees) soit dans le flux, et bien sûr il faut que cela soit le div le plus long.
Donc, si ton div menu est le plus long, c'est à celui-la que tu enlèves l'absolute.
Si ton div donnees est le plus long, c'est à donnees que tu retires la position absolute.
Par contre, pour avoir les positions correctes du div qui n'est pas absolu, tu dois indiquer leur position : margin-left et margin-top au lieu de left et top.

probleme de mise en page

HTML

Vue hybride

Discussions similaires

Partager

Partager