comment centrer logo et menu

**ml1234** · 11/03/2010, 19h31

bonjour,

je m'inspire du site free greefies mais je souhaiterais modifier pour avoir un logo de 189x77px centré dans le header et je souhaiterais que mon menu soit parfaitement centré dans sa barre de menu.
Pouvez-vous svp me dire comment faire ?
margin left et right à auto ne semble pas fonctionner.

Pouvez-vous aussi me dire pourquoi dans dreamweaver, les textes de menu (home, services,...) sont coupés en deux par la barre bleue et quand on visualise tout est ok. c'est perturbant, je pense toujours faire une erreur de div quand cela arrive. manque-t-il un clear both ?

merci d'avance
marc

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
<!--
body {
	background-color: #d7dfe2;
	margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0px;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #416271;
}
 
#main_container {
	width:900px;
	height:auto;
	margin:auto;
	background-color:#FFFFFF;
}
 
#header {
	width:900px;
	height:auto;
	margin:auto;
}
 
#logo {
	float : left;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 30px;
}
 
#menu {
	width:900px;
	height:42px;
	padding:0px;
	clear:both;
	background-color:#416271;
}
 
#menu ul {
	list-style:none;
	margin:auto;
	display:block;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 230px;
}
 
#menu ul li {
	list-style:none;
	display:inline;
	float:left;
	width:auto;
	height:42px;
	padding:0px;
	line-height:42px;
	font-family:Arial, Helvetica,sans-serif;
	font-size:13px;
}
 
#menu ul li a {
	height:42px;
	width:auto;
	float:left;
	text-decoration:none;
	padding:0 0 0 25px;
	margin:0px 3px 0px 3px;
	color:#fff;
	text-align:center;
}
 
#menu ul li a:hover {
	height:42px;
	width:auto;
	text-decoration:none;
	padding:0 0 0 25px;
	color:#fff;
	background:url(images/menu_arrow.gif) no-repeat left;
}
 
#menu ul li a.current {
	height:42px;
	width:auto;
	float:left;
	text-decoration:none;
	padding:0px;
	color:#fff;
	padding:0 0 0 25px;
	background:url(images/menu_arrow.gif) no-repeat left;
}
 
 
#main_content{
width:auto;
height:auto;
clear:both;
}
 
</style>
 
</head>
 
<body>
 
<div id="main_container">
 
    <div id="header">
 
    	<div id="logo">
 			<a href="home.html"><img src="images/logo.gif" alt="" title="" border="0"/></a>  
  	 	</div>  <!-- logo  -->
 
    </div>  <!-- header  -->
 
   <!-- initialement le menu était dans le header mais je n'aimais pas ces div emboités.
   le us de contact us est bcp plus bas ce qui explique la grande zone entre les div dans dreamweaver -->
 
    <div id="menu">
    		<ul>
        		<li><a class="current" href="home.html" title="">home</a></li>
            	<li><a href="home.html" title="">services</a></li>
            	<li><a href="home.html" title="">clients</a></li>
            	<li><a href="home.html" title="">testimonials</a></li>
           		<li><a href="home.html" title="">contact us</a></li>
        	</ul>
    </div>  <!--menu-->
 
 
     <div id="main_content">
     <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. </p>
 
     </div>  <!-- main_content -->
 
</div> <!-- main container -->
 
</body>
</html>

**Erwan31** · 11/03/2010, 22h36

Bonsoir,
si tu met ton logo en float:left il risque pas de se centrer

Ton menu es centré horizontalement.
Tu as oublié de refermé ton commentaire dans style > aucun affichage dans IE.

Pour Dreamweaver, ne pas te fier à son mode de visualisation qui malgré son moteur de rendu embarqué (celui d'Opera) n'affiche pas les éléments correctement.

**ml1234** · 11/03/2010, 22h49

merci erwan,
effectivement sans le float left, margin à 0 auto 0 auto marche beaucoup mieux -)
désolé !

je suppose que pour centrer verticalement, il suffit que j'utilise le même padding top et bottom. margin à auto 4 fois ne marche pas

Pour le menu, tu veux dire que margin est à auto partout, donc centré ?
et pourtant le padding left de 230 ne peut être mis à 0

merci
marc

**Erwan31** · 11/03/2010, 23h37

Les marges automatique ne sont faite que pour centrer horizontalement. Pour le centrage vertical d'une ligne de texte, utiliser la même valeur de line-height que height.

**ml1234** · 12/03/2010, 06h51

merci beaucoup erwan,
ah, voilà pourquoi le menu fait 42px et le line height aussi !!! de plus comme le "us" de contact us est à la ligne dand dreamweaver, cela fait ces grands décallages de div qui n'existent pas en réalité.

et quid du menu centré mais qui nécessite un padding de 230px pour le rester ?

merci
marc

comment centrer logo et menu

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager