Ik ben ondertussen druk bezig met v3 van wallpaperheaven, ik loop alleen tegen een irritant probleem aan.
Ik zal eerst ff de situatie schetsen:
Ik heb een aantal images op het onderste gedeelte van mijn header zitten(headerlowerbar). De header lowerbar is dus een backgroundimage. Op die background image komt natuurlijk tekst, dat werkt allemaal prima. maar op de lowerbar image moet nog een plaatje komen(headerlogincp) met daarop weer tekst. het plaatje op de headerlowerbar wordt dus weer een background image.
Dit is met css en divjes helemaal niet moeilijk:
je maakt voor de lowerbar een div en in die div zet je weer je div voor de headerlogincp)
maar nu het vervelende:
De headerlogincp breekt uit de headerlowerbar div, ook eigenschappen die enkel betrekking hebben op headerlogincp worden toegepast op headerlowerbar.
Dit is vooral met de margin irritant aangezien dan de positie van de hele container veranderd wordt ipv alleen de image.
weet iemand wat ik fout doe?
Hieronder de relevante code:
header.php:
1
2
<img src="images/header.png" width="820" height="123" alt="" /><br />
<div class="headerlowerbar"><div class="headercontentleft"> Welcome: Hunterseaker (User CP)</div><div class="headerlogincpimage"></div></div>
css:
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
.headerlowerbar
{
background:url(../images/header_lowerbar.png);
width: 820px;
height: 24px;
max-height:24px;
}
.headercontentleft
{
width:220px;
float:left;
text-align:left;
font-family: Tahoma, Arial, Verdana;
color:#FFFFFF;
text-decoration:none;
font-size: 11px;
font-weight: bold;
padding-top: 5px;
margin-left: 5px;
}
.headerlogincpimage
{
background:url(../images/Header_loginbg1.png) repeat-x;
width:36px;
height: 18px;
margin-left:230px;
font-family: Tahoma, Arial, Verdana;
color:#FFFFFF;
text-decoration:none;
font-size: 11px;
font-weight: bold;
padding-top: 0px;
}en nog ff de index aangezien daar ook wat stijlen inzitten:
1
2
3
4
5
6
7
8
9
<div id="master">
<?php include ('header.php'); ?>
<div style="float:left; width:170px;">
<?php include ('menu.php'); ?><?php include ('linkpartners.php'); ?><?php include ('affiliates.php'); ?><?php include ('stats.php'); ?>
</div>
<div style="float:left;">
<?php include ('welcome.php'); ?><?php include ('news.php'); ?><?php include ('popular.php'); ?><?php include ('latestuploads.php'); ?><?php include ('footer.php'); ?>
</div>
</div>Hier een screenshot van de situatie:
[url]http://www.uploadworld.nl/users/hunterseaker/uploadworld_headerlogincp.jpg[/url]
De bedoeling is dus dat dat "blokje" precies in die lowerbar past, ik krijg dat echter niet voor elkaar omdat de eigenschappen niet alleen binnen zijn container gelden....
Wat ook raar is: als ik een height voor de hoofd container in wil stellen dan wordt de hele layout gaar in FF.
Oh en als je bovenstaand verhaal niet snapt maar wel weet hoe je dat plaatje op zn plek moet krijgen is je reactie ook welkom.
[Laatst bewerkt door Hunterseaker op zondag 27 mei 2007, om 18:22]
