Div width 100%, achtergrond die mee veranderd met browser
Ik wil graag de header 100% (dus de width: 100% en height: auto) alleen dit lukt niet.
Dat hij mee resized doet het wel alleen ik heb voor de header nog een menu div en dan de header de onder werkt niet helemaal zo als het moet. Je ziet de header nu maar half omdat hij de 100px van de menu ook mee neemt in header height.
Ik hoop dat jullie het snappen, kunnen jullie mij helpen?
CSS:
Code (php)
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
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
#headerwrap {
float:left;
width:100%;
margin:0;
padding:0;
text-align: center;
}
.headerbox{
position: relative;
height: 1200px;
z-index: 1;
}
#header{
background-image: url('/images/header.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
.menu
{
width: 100%;
height: 100px;
background-color: #000000;
opacity:0.60;
filter:alpha(opacity=60);
}
float:left;
width:100%;
margin:0;
padding:0;
text-align: center;
}
.headerbox{
position: relative;
height: 1200px;
z-index: 1;
}
#header{
background-image: url('/images/header.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
.menu
{
width: 100%;
height: 100px;
background-color: #000000;
opacity:0.60;
filter:alpha(opacity=60);
}
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div class="menu">
<div class="logo">
</div>
<div class="nav">
Home - BLA - BLA
</div>
</div>
<div id="headerwrap" >
<div id="header" class="headerbox">
</div>
</div>
<div class="logo">
</div>
<div class="nav">
Home - BLA - BLA
</div>
</div>
<div id="headerwrap" >
<div id="header" class="headerbox">
</div>
</div>
Voorbeeld:
Al vast bedankt
Gewijzigd op 16/07/2013 11:47:55 door Timo Kleinhout
