placement image bizarre

**lavazavio** · 20/03/2007, 18h52

Bonjour,

j'ai un probleme avec le placement d'une image sur mon site perso (pas encore fini) Manziaki.

J'ai remarqué que l'image nommée "largeur" où il est écrit "site d'une bande de copains" restait collée sur la gauche de l'écran alors que tout le reste du site se centre sur l'écran. Chez moi, j'ai un écran 15 pouces donc le placement est bon mais sur un écran plus grand, on observe le probleme.

Comment faire pour que cette image se calle toujours sous le menu ?

HTML :

Code html :

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
<body>
<!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
<!-- photo de la banniere -->
 
		<div id="photobanniere">		</div>
 
       <!-- Les menus -->
 
       <div id="menu">       
           <div class="element_menu">
               <h3><img src="css/livre.png" alt=""/> Menu</h3>
               <ul>
                   <li><a href="index.html" title="Retournez à la page d'accueil">Accueil</a></li>
                   <li><a href="newz/index.html" title="Tenez-vous au courant des dernières maj">Newz</a></li>
                   <li><a href="albumphoto/index.html" title="Voir les différents albums photos">Album photos</a></li>
				   <li><a href="albumvideo/index.html" title="Voir les différentes vidéos">Album videos</a></li>
				   <li><a href="http://forumlaz.xooit.fr/index.php" target="_blank" title="faire un tour sur le forum">Forum</a></li>
               </ul>
         </div>
 
 
       </div>
 
	   <!-- L image de cote, largeur -->
 
		<div id="largeur">		</div>
 
 
	       <!-- Le corps -->
 
<div id="corps">
           <h1>Bienvenue ! </h1>
 
<p>Bienvenue sur mon  site !</p>
<p>Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site.</p>
<p>Non, en fait, il va surtout y avoir des photos de tout le monde, et m&ecirc;me quelques videos, c'est fou. </p>
           <h2>A qui s'adresse ce site ?</h2>   
<p>
               A tout le monde ! Enfin, du moins, &agrave; tous les gens qui ont acc&egrave;s &agrave; internet, parce que sans &ccedil;a, c'est bien moins facile.
  </p>
<p>Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si ! </p>
<h2>Le menu </h2>   
           <p>Le site comporte diff&eacute;rentes parties telles que des newz, un forum, un album vid&eacute;os et la plus grosse je pense, l'album photos.         </p>
</div>
 
       <!-- Le pied de page -->
 
<div id="pied_de_page">
 
           	  	 <img src="http://www.freecompteur.com/counter.php3?counter=lavazavio" alt="FreeCompteur.com"/>	   
 
		   <br />
 
		   <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> 
		   <a href="http://jigsaw.w3.org/css-validator"><img src="http://www.w3.org/Icons/valid-css" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
 
		   Copyright Lavazavio 2007, tous droits réservés  <a href="mailto:manziaki@free.fr">Contact</a></p>
 
</div>
 
 
 
</body>
</html>

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
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
141
142
143
144
145
146
147
body
{
   width: 1002px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url(css/fond.gif);
}
 
/* L'en-tête */
 
#en_tete
{
   width: 1000px;
   height: 100px;
   background-image: url(css/banniere2.png);
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#photobanniere
{
	position: absolute;
	background-image: url(css/photobanniere.png);
	width: 178px;
	height: 100px;
	left: 803px;
	top: 144px;
 
}
 
/* Le menu */
 
#menu
{
   float: left;
   width: 120px;
}
 
.element_menu
{
   background-repeat: repeat-x;
 
   border: none;
 
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3 /* Titre du menu */
{   
   color: #000000;
   font-family: "Snap ITC";
   text-align: center;
}
 
.element_menu ul
{
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
   list-style: none;
}
 
.element_menu a /* les liens du menu */
{
   color: #0000FF;
   font-family: "Tahoma";
   font-size:small;
   text-decoration: none;
}
 
.element_menu a:hover
{
   color:#D20000;
}
 
/* L image de largeur */
 
#largeur
{
	position: absolute;
	width: 120px;
	height: 250px;
	background-image: url(css/largeur.png);
	float:left;
	left: 10px;
	top: 300px;
 
}	
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
 
   color: #000000;
   background-color: #FFFFFF;
   background-repeat: repeat-x;
 
   border: 1px solid black;
}
 
#corps h1
{
   color: #000000;
   text-align: center;
   font-family: "Snap ITC";
   }
 
#corps h2
{
   height: 30px;
 
   background-repeat: no-repeat;
   font-family: "Snap ITC";
 
   padding-left: 40px;
   color: #000000;
   text-align: left;
}
 
#corps p
{
	text-indent: 20px;
	font-family: "Tahoma";
	font-size: 13px;	
}
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
 
   text-align: center;
 
   color: #B6B6B6;
   background-repeat: repeat-x;
}

**frog43** · 20/03/2007, 21h10

Salut,

essaye de mettre le div qui contient ton image dans le div du menu ... Il faudra peut-être modifier le CSS (enlever le float par exemple ...)

**lavazavio** · 21/03/2007, 00h16

Merci,

j'ai inclu la balise div de l'image dans celle du menu comme tu l'as proposé, modifier le css en conséquence et ca a l'air de marcher, du moins chez moi.

Est ce que qqn peut tester aussi chez lui avec un écran plus grand que 15' pour voir si c'est aligné ?