Je ne comprends pas le comportement de mes div

**lolaalol** · 13/06/2013, 00h48

Bonjour,

Je suis entrain de me faire une barre qui va être fixée au top de l'écran (50px de hauteur et 100% de largeur).

Dans cette barre au centre, je vais mettre mon logo et mon menu, mais mon problème est que le menu est comme à l'extérieur de ma barre.

CSS :

Code css :

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
body
{ 
	background:url(../images/bg1.png);
	font-family:Arial;
	font-size:12px; 
	color:#333; 
	overflow-x:hidden;
}
 
.main #header
{
	background:url(../images/bg-footer.png);
	background-repeat:repeat-x;
	position:fixed;
	width:100%;
	height:50px;
}
 
.main #header-content
{
	margin-right:auto;
	margin-left:auto;
	height:50px;
	width:750px;
}
 
.main #top-logo
{
	background:url(../images/logo-top.png);
	background-repeat:no-repeat;
	height:50px;
	width:100px;
}
 
.main #top-menu
{
	color:#FFFFFF;
	font-family:calibri;
	font-size:14px;
	height:50px;
	width:450px;
	margin-left:200px;
}

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
<body class="main">
	<div id="header">
		<div id="header-content">
			<div id="top-logo"></div>
				<div id="top-menu">
					<table>
						<tr>
							<td>SITE WEB</td>
							<td>MARKETING WEB</td>
							<td>CONTACTEZ-MOI</td>
						</tr>
					</table>
				</div>
		</div>
	</div>
</body>

**NoSmoking** · 13/06/2013, 20h13

Bonjour,
essaies de mettre un float:left à ta DIV <div id="top-logo"></div>.

Remarque:
L'utilisation d'une TABLE pour mettre ton menu est loin d'être sympa

**CCyrillus** · 13/06/2013, 22h04

Bonsoir,

Je suis surpris de ton HTML.
Aujourd'hui, on s'attend plutôt à voir ceci:

Code html :

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

1
2
3
4
5
6
7
8
<header>
  <h1><img src="http://placehold.it/100x50&text=Mon Site" alt="Mon Site" /></h1>
  <nav>
    <a href="#" title=""> SITE WEB</a>
    <a href="#" title=""> MARKETING WEB</a>
    <a href="#" title=""> CONTACTEZ-MOI</a>  
  </nav>
  </header>

Pour ton soucis, float + text-align + line-height + inline-block devrait te permettre d'atteindre ton premier objectif:
1 logo a gauche, 1 menu centré et aligné verticalement.

Demo : http://liveweave.com/4a39bt
Cdt,
GC

Je ne comprends pas le comportement de mes div

CSS

Discussions similaires

Partager

Partager