Positionnement logo difficile

**Addict`** · 14/01/2009, 13h19

Bonjour,

Je développe actuellement un site dynamique html/php avec une feuille de style.

J'aimerais positionner le logo de l'entreprise a la gauche du menu et juste au dessus de la colonne administration. Je n'y parviens pas.

Mon fichier 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Les partenaires - Métropolitains</title>
		<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" title="Normal" />
	</head>
	<body>
		<div id="header"><!--Entête / bannière à centrer-->
			<img src="./img/top.png" alt="Metropolitains.Org vous souhaite la bienvenue !">
		<div id="menu">
			<div class="menu" id="active">
				<a href="">Accueil</a>
			</div>
			<div class="menu" >
				<a href="">Pr&eacute;sentation</a>
			</div>
			<div class="menu" >
				<a href="">FAQ</a>
			</div>
			<div class="menu" >
				<a href="">Album photos</a>
			</div>
			<div class="menu" >
				<a href="">Partenaires</a>
			</div>
			<div class="menu" >
				<a href="">Calendrier</a>
			</div>
			<div class="menu" >
				<a href="">Contact</a>
			</div>
			<div class="menu" >
				<a href="">Liens utiles</a>
			</div>
		</div>
		</div>
		<br /><br /><br />
		<div id="conteneur">
			<div id="sidebar1"><!--Colonne gauche / Administration-->
				<h3>Administration</h3>
				<form method="post" action="../admin.php">
					<label for="pseudo"><strong>Login :</strong><br /></label>
					<input type="text" name="pseudo" id="pseudo" value="" /><br/><br/>
					<label for="pass"><strong>Mot de passe :</strong><br /></label>
					<input type="password" name="pass" id="pass" /><br/> <br/>
					<input type="submit" name="OK" value="Se connecter !"/>
				</form>
			</div>
			<div id="sidebar2"><!--Colonne droite / Commissions-->
				<h3>Commissions</h3>
                <a href="#"><img src="./img/stylexp.png" width="16" height="16">  Cinéma, Théatre </a><br />
                <a href="#"><img src="./img/stylexp.png" width="16" height="16">  Sport </a><br />
                <a href="#"><img src="./img/stylexp.png" width="16" height="16">  Loisir et spectacle </a><br />
                <a href="#"><img src="./img/stylexp.png" width="16" height="16">  Culture </a><br />
                <a href="#"><img src="./img/stylexp.png" width="16" height="16">  Temps forts </a><br />
			</div>
			<div id="part"><!--Section flash info-->
				<h3> <img src="part.png" width="213" height="43"></h3>
				<p>L'équipe des Métropolitains a mis en place jour après jour d'étroits partenariats pour mieux vous servir. Au travers de cette page, ce sont ces partenaires que nous avons souhaité mettre en avant, vous invitant ainsi à leur rendre une visite de courtoisie...</p>
					<td><a href="http://www.club-gymnesia.com/"><img src="./img/gymnesia.jpg" alt="Gymnesia"></a><p>Description de gymnesia</p></td>
                <hr />
					<td><a href="http://www.formule-kart-indoor.com/"><img src="./img/kart-indoor.jpg" alt="Kart-Indoor"></a><p>Description de gymnesia</p></td>
				<hr />
					<td><a href="http://www.vita-form.fr/"><img src="./img/logo_vitaform.jpg" alt="Vitaform"></a><p>Description de gymnesia</p></td>
			</div>
		</div>
		<div id="footer">
			Plan du site - mentions légales
		</div>
	</body>
</html>

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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background:#FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 1250px;
	color:#000;
}
 
a img {
  border:  none ;
}
a img:hover {
  border:  none ;
}
 
#menu{
	background:#e7474e;
	margin:0 auto;
	height:50px;
	margin: 5px 225px 5px 225px;
	display: block;
}
.menu{
	float:left;
	width:100px;
	height:45px;
	text-align:center;
}
.menu a{
	display:block;
	height:30px;
	padding-top:15px;
}
.menu a:link, .menu a:visited{
	text-decoration:none;
	color: #000000;
	font-family:verdana, sans-serif;
	font-size:12px;
	background:#abc url(../img/fond.jpg) 0 -45px;
}
.menu#activ a:link, .menu#activ a:visited{
	background:#abc url(../img/fond.jpg);
	color: #000000;
}
.menu a:hover, .menu a:active, .menu a:focus{
	background:#abc url(../img/fond.jpg) 0 -90px;
	color: #0099FF;
}
.menu#activ a:hover, .menu #activ a:active, .menu#activ a:focus{
	background:#abc url(../img/fond.jpg);
	color: #0099FF;
}
 
#conteneur { 
	margin: 0 auto;
	text-align: left;
	border-top: 1px solid;
	border-bottom: 1px solid;
	height: 100%;
 
}
 
#header {
	width: 1250px;
	height: 131px; 
	background:#FFFFFF;
	text-align:center !important;
} 
 
#sidebar1 {
	display:block;
	float:left;
	width: 220px;
	height: 100%;
	background: #FFFFFF;
	padding: 15px 0;
	font-size: 85%;
	text-align: left;
	border-right: 1px solid black;
}
#sidebar1 form {
	display:block;
	float: left;
	font-size: 85%;
	margin-left: 13%;
	text-align: center;
}
#sidebar1 h3 {
	display:block;
	width:188px;
	height:20px;
	line-height:18px;
	background-image:url(../img/fd_blue.png);
	color:white;
	text-decoration:none;
	font-size:12px;
	margin-left: 10px;
	margin-right: 10px;
	text-align: center;
}
 
#sidebar2 {
	display:block;
	float:right;
	width: 220px;
	height: 100%;
	background:#FFFFFF;
	padding: 15px 0;
	border-left: 1px solid black;
	border-right: 1px solid black;
	font-size: 15px;
}
#sidebar2 h3 {
	width:188px;
	height:20px;
	line-height:18px;
	background-image:url(../img/fd_blue.png);
	color:white;
	text-decoration:none;
	font-size:12px;
	text-align:center;
	margin-left: 10px;
	margin-right: 10px;
}
#sidebar2 a {
	display:block;
	text-decoration:none;
	padding-left:10px;
	color:black;
}
#sidebar2 a:hover {
	display:block;
	background-color:#0099FF;
	color:black;
	text-decoration:none;
}
#sidebar2 li {
	color: #000;
	text-decoration: none;
}
 
#flashinfodiv {
	margin: 5px 225px 5px 225px;
	height: auto;
}
#actudiv {
	margin: 5px 225px 5px 225px;
	height: auto;
	min-height: 100%
}
 
#contact {
	margin: 5px 225px 5px 225px;
	border: 2px solid #0099FF;
	padding: 10 10;
	font-size: 12px;
	height: auto;
}
 
#part {
	margin: 5px 225px 5px 225px;
	font-size: 13px;
	padding: 10 10;
	height: auto;
	min-height: 100%;
	text-align: center;
}	
#part p:first-letter {
	padding-left:10px;
	font-weight:bold;
	font-size:120%;
}
 
#footer {
	padding: 5 10px;
	background-color: #969696;
	height: 19px;
	font-size: 12px;
	text-align: right;
 
} 
#footer p {
	margin: 0;
	padding: 2px 0;
}
 
[if IE]>
<style type="text/css"> 
	#sidebar2, #sidebar1 { padding-top: 30px; }
	#mainContent { zoom: 1; padding-top: 15px; }
	/* hasLayout nécessaire pour éviter plusieurs bogues */
</style>
<![endif]

Et voici un aperçu de la page encore en construction

(fichier en pièce jointe):

Merci d'avance.

PS: si quelqu'un peut me dire comment centrer tout le contenu de la page dans la fenêtre d'explorateur, je le remercierai.

**Addict`** · 14/01/2009, 13h48

Réctificatif :

Aprés supression des 3 balises <br /> situées dans le code HTML, on obtient le résultat suivant:

Il faudrait donc monter le menu de 3 lignes... chose que je cherche!

**Addict`** · 14/01/2009, 13h57

J'ai réussi à resoudre le probléme en jouant avec le CSS.

Voici le nouveau si ça peut aider...

Code :

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

1
2
3
4
5
6
#menu{
	background:#FFF;
	margin: 0 225px 0 225px;
	display: block;
	padding-top: 86px;
}

Le 86px correspond en fait à la hauteur de mon logo - la hauteur de l'image en background de mon menu.

Voilà !

Bye

**sedryk** · 14/01/2009, 14h19

Bonjour Genqv,

Avant de commencer à te répondre, juste une petite remarque personnelle, difficile de régler parfaitement ton problème sans avoir les images utilisées par ton code html et ta feuille de style css

Pour ce qui est du logo et de son alignement verticale avec le menu :
- Suppression des BR comme tu l'as indiqué, en effet tenter de palier un problème de mise en page à coup de BR est toujours la mauvaise solution.
- Entourer ton image logo d'une DIV

Code :

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

<div id="logo"><img src="./img/top.png" alt="Metropolitains.Org vous souhaite la bienvenue !"></div>

- Ajouter le style dans la feuille CSS

Code :

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

1
2
3
4
5
#logo {
  width:220px; /* Taille mise au pif vu que je n'ai pas l'image. */
  position:absolute;
  left:0;
}

- Modification du style de la DIV menu

Code :

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

1
2
3
4
5
6
7
#menu{
	background:#e7474e;
	height:50px;
	width: 800px; /* Taille mise au pif aussi */
	position: absolute;
	left:220px;
}

En ce qui concerne le centrage que tu avais fais sur ta DIV menu avec le margin: 0 auto c'était en effet une bonne idée mais ça ne marche que si la DIV à une largeur fixée ce qui n'était pas ton cas.

Pour conclure, j'espère que ça t'aide un peu mais comme je n'ai pas l'ensemble des médias, je ne peux pas être sur que tout est résolu

PS : tu as des balises TD qui se baladent toutes seules dans la DIV part, c'est pas normal

**Addict`** · 14/01/2009, 14h42

Salut sedryk,

Je viens d'appliquer ta solution et cela marche trés bien. J'avais légèrement peur d'utiliser la propriété margin et je penses que cela reste plus sur !

Désolé de n'avoir pas tout mis les images... je débute et j'apprends !

Merci et @+

Positionnement logo difficile

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager