Edit: laat maar, ik moet de headerbox position:relative meegeven. Dat had ik eigenlijk ook, maar haalde ik voor het voorbeeld eruit. Ook had headerbox een float:left. Hier bleek het aan te liggen. Echter: float:left heb ik wel nodig in mijn website voor deze headerbox. Dus wie kan me toch vertellen waarom het neit werkt als float:left in headerbox is aangezet?!
Oorspronkelijk bericht:
Ik heb de onderstaande code (het is een stukje geript uit een bestaande website, maar voor het gemak kleiner gemaakt).
Wat ik wil:
Je ziet een layer die weer 2 andere layers (top en icons), welke naast elkaar liggen, omsluit: headerbox.
Nu wil ik een afbeelding straks over deze 2 andere layers laten meebewegen als ik over bepaalde menu-items beweeg. (dat menu staat er nu niet bij, maar komt eronder te staan).
Ik dacht dus dat het handig was om na het laden, de afbeelding met createElement te realiseren en toe te kennen aan de omsluitende layer (headerbox) en deze dan absoluut te positioneren t.o.v. de headerbox. M.i. zou de afbeelding dan linksboven moeten komen te staan in de box, boven de andere 2 layers.
Nu werkt dit in Firefox prima, maar in IE 6.x krijg ik de afbeelding maar niet te zien.
Wie kan mij hier mee helpen of heeft de gouden hint?
Z-indexen mochten helaas niet baten.
Oorspronkelijk bericht:
Ik heb de onderstaande code (het is een stukje geript uit een bestaande website, maar voor het gemak kleiner gemaakt).
Wat ik wil:
Je ziet een layer die weer 2 andere layers (top en icons), welke naast elkaar liggen, omsluit: headerbox.
Nu wil ik een afbeelding straks over deze 2 andere layers laten meebewegen als ik over bepaalde menu-items beweeg. (dat menu staat er nu niet bij, maar komt eronder te staan).
Ik dacht dus dat het handig was om na het laden, de afbeelding met createElement te realiseren en toe te kennen aan de omsluitende layer (headerbox) en deze dan absoluut te positioneren t.o.v. de headerbox. M.i. zou de afbeelding dan linksboven moeten komen te staan in de box, boven de andere 2 layers.
Nu werkt dit in Firefox prima, maar in IE 6.x krijg ik de afbeelding maar niet te zien.
Wie kan mij hier mee helpen of heeft de gouden hint?
Z-indexen mochten helaas niet baten.
code:
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
| <!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=iso-8859-1" />
<title>Testbestand</title>
<script type="text/javascript">
function setArrow(){
if(document.getElementById){
var root = document.getElementById('headerbox');
var el = document.createElement('img');
el.setAttribute('name','imgNavArrow');
el.setAttribute('id','imgNavArrow');
el.setAttribute('src','img/gif/navigatiepijl.gif');
el.setAttribute('width','17px');
el.setAttribute('height','14px');
el.style.left = 0+'px';
el.style.top = 0+'px';
root.appendChild(el);
el = null, root = null;
}
}
</script>
<style type="text/css" media="all">
#headerbox{
height: 70px;
width: 747px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #2b4d7c;
z-index: 8000;
}
#top{
width: 400px;
height: 70px;
color: inherit;
z-index: 7000;
}
#icons{
width: 202px;
float: right;
background-image: url(img/gif/stripe_bg1.gif);
background-repeat: repeat-y;
text-align: right;
padding-right: 15px;
height: 70px;
z-index: 7000;
}
#imgNavArrow{
position: absolute;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
z-index: 90000;
}
</style>
</head>
<body>
<div id="headerbox">
<div id="icons"> </div>
<div id="top"> </div>
</div>
<br style="clear:both;" />
<a href="javascript:void(0);" onclick="setArrow();">pijltje</a>
</body>
</html> |
[ Voor 16% gewijzigd door Verwijderd op 21-05-2006 19:47 ]
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
En relative stond al aan, maar doordat ik ook float:left erbij had, werkte het niet.