[CSS] indeling van afbeeldingen in header
Ik was bezig met een simpele header op het moment dat ik voor dit probleem kwam:
de afbeeldingen ( de header ) moeten de hele pagina vullen, maar aangezien mensen een andere resolutie kunnen hebben moet het dus met * %. Daarnaast wilde ik dat er rechts een speciaal stuk staat en links een speciaal stuk staat.
Het probleem is dat het middenstuk, of terwijl de afbeelding die zich herhaalt om de pagina te vullen, het rechter stuk wegduwt.
iemand ideeën ?
Alvast bedankt,
Ivo
voorbeeld: http://img509.imageshack.us/img509/4709/prtsrn.png
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
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
.statusbar
{
height: 90px;
width: 100%;
}
.statusleft
{
float: left;
height: 90px;
width: 407px;
background: url('/design/statusleft.png');
}
.statusright
{
float: right;
height: 90px;
width: 390px;
background: url('/design/statusright.png');
}
.statuscenter
{
height: 90px;
width: 100%;
background: url('/design/statuscenter.png');
}
{
height: 90px;
width: 100%;
}
.statusleft
{
float: left;
height: 90px;
width: 407px;
background: url('/design/statusleft.png');
}
.statusright
{
float: right;
height: 90px;
width: 390px;
background: url('/design/statusright.png');
}
.statuscenter
{
height: 90px;
width: 100%;
background: url('/design/statuscenter.png');
}
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="center">
<div class="left">
links
</div>
<div class="right">
rechts
</div>
</div>
<div class="left">
links
</div>
<div class="right">
rechts
</div>
</div>
Of begrijp ik je nu verkeerd? Je legt het namelijk anders uit dan je op je plaatje laat zien (waar ik al helemaal niks van snap).
Code (php)
1
2
3
4
5
2
3
4
5
<div class="statusbar">
<div class="statusleft"></div>
<div class="statuscenter"></div>
<div class="statusright"></div>
</div>
<div class="statusleft"></div>
<div class="statuscenter"></div>
<div class="statusright"></div>
</div>
Door de width:100% zal statuscenter altijd te breed zijn, om statusright op de regel toe te laten.
Probeer dit eens:
Code (php)
1
2
3
4
5
2
3
4
5
<div class="statuscenter">
<div class="statusleft"></div>
<div class="statusright"></div>
<div style="clear:both;font-size:1px;"></div>
</div>
<div class="statusleft"></div>
<div class="statusright"></div>
<div style="clear:both;font-size:1px;"></div>
</div>
Misschien is het handiger als je de div indeling die je in je html gebruikt ook post.
Ik geef toe dat mijn uitleg idd onzin was... was een beetje moe :-)
@Lapidi
Stom dat ik niet zelf aan dat omdraaien dacht. Het werkt nu gewoon goed.
bedankt ;-)