Layout vorm probleem
Ik heb aan mijn site in de header een divje toegevoegd met random plaatjes, nu ziet het er in google chrome goed uit, maar in IE bijvoorbeeld niet...
Kan iemand mij vertellen wat ik kan veranderen zodat het er in alle browsers goed uit ziet?
Dit is mijn index:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?
<div id="totaal">
<div id="header">
<!-- <div id="cycler">
<img class="active" src="images/header/h1.jpg" alt="">
<img src="images/header/h2.jpg" alt="">
<img src="images/header/h3.jpg" alt="">
<img src="images/header/h4.jpg" alt="">
<img src="images/header/h5.jpg" alt="">
</div>
--> </div>
</div>
?>
<div id="totaal">
<div id="header">
<!-- <div id="cycler">
<img class="active" src="images/header/h1.jpg" alt="">
<img src="images/header/h2.jpg" alt="">
<img src="images/header/h3.jpg" alt="">
<img src="images/header/h4.jpg" alt="">
<img src="images/header/h5.jpg" alt="">
</div>
--> </div>
</div>
?>
Dit is mijn 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?
#header {
margin-top:0px;
padding:0px;
width:1000px;
height:122px;
vertical-align:top;
background-color:#FFFFFF;
background-image:url('../images/zscheader.jpg');
top:0;
}
#cycler {
position:relative;
right:-100px;
height:100px;
widht:400px;
}
#cycler img {
position:absolute;
z-index:1;
}
#cycler img.active {
z-index:3
}
?>
#header {
margin-top:0px;
padding:0px;
width:1000px;
height:122px;
vertical-align:top;
background-color:#FFFFFF;
background-image:url('../images/zscheader.jpg');
top:0;
}
#cycler {
position:relative;
right:-100px;
height:100px;
widht:400px;
}
#cycler img {
position:absolute;
z-index:1;
}
#cycler img.active {
z-index:3
}
?>
Alvast bedankt.
Om het visueel te zien:
http://www.zscwesterhoven.nl/testdex.php
(ik tel de zwarte vlakken niet mee als inhoud).
je header is 1000px breed.
Ik zou dan IN de header div TWEE divs maken die naast elkaar komen te staan. bijv. één van 700px en één van 300px. in css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?
#header {
margin-top:0px;
padding:0px;
width:1000px;
height:122px;
vertical-align:top;
background-color:#FFFFFF;
background-image:url('../images/zscheader.jpg');
top:0;
}
#header-left {
float:left;
width:700px;
}
#header-right{ /* dit is dan de cycler div*/
float:left;
width:300px;
}
?>
#header {
margin-top:0px;
padding:0px;
width:1000px;
height:122px;
vertical-align:top;
background-color:#FFFFFF;
background-image:url('../images/zscheader.jpg');
top:0;
}
#header-left {
float:left;
width:700px;
}
#header-right{ /* dit is dan de cycler div*/
float:left;
width:300px;
}
?>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?
<div id="totaal">
<div id="header">
<div id="header-left">
<!-- logo -->
</div>
<div id="header-right">
<img class="active" src="images/header/h1.jpg" alt="">
<img src="images/header/h2.jpg" alt="">
<img src="images/header/h3.jpg" alt="">
<img src="images/header/h4.jpg" alt="">
<img src="images/header/h5.jpg" alt="">
</div>
</div>
</div>
?>
<div id="totaal">
<div id="header">
<div id="header-left">
<!-- logo -->
</div>
<div id="header-right">
<img class="active" src="images/header/h1.jpg" alt="">
<img src="images/header/h2.jpg" alt="">
<img src="images/header/h3.jpg" alt="">
<img src="images/header/h4.jpg" alt="">
<img src="images/header/h5.jpg" alt="">
</div>
</div>
</div>
?>
Gewijzigd op 15/08/2013 18:30:03 door Frank Nietbelangrijk