Browsers luitsteren niet naar with 100%
Ik ben druk bezig om een layout te maken voor een backend van een cms systeem. Hierbij wil ik dat de gebruiker kan kiezen uit meerdere afbeeldingen die over de hele breedte kunnen worden uitgerekt. Dit is me gelukt met de volgende code:
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
<?php
/**
* default/layout.phtml
* De standaard template
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<?= $this->headTitle()."\n" ?>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<img src="http://fc39.deviantart.com/fs29/f/2008/094/b/2/One_Way_Wallpaper_Mod_by_in_dolly.jpg" style="position: fixed; z-index: -100;width: 100%; height: 100%;"/>
<div style="position: absolute;">
<div style="width: 100%;height: 30px; background-color: #000; opacity: 0.3;">
</div>
</div>
</body>
</html>
/**
* default/layout.phtml
* De standaard template
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<?= $this->headTitle()."\n" ?>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<img src="http://fc39.deviantart.com/fs29/f/2008/094/b/2/One_Way_Wallpaper_Mod_by_in_dolly.jpg" style="position: fixed; z-index: -100;width: 100%; height: 100%;"/>
<div style="position: absolute;">
<div style="width: 100%;height: 30px; background-color: #000; opacity: 0.3;">
</div>
</div>
</body>
</html>
Dit werkt opzich harstikke goed. Maar ik mis alleen 1 ding. De div met de opacity, is niet zichtbaar. Als ik er tekst in zal toevoeggen, is het alleen de breedte van de tekst, en niet de 100% die ik opgeef. Is er toevallig een manier om ervoor te zorgen dat deze div wel altijd 100% is?
Tom
PS: Screenshots:
zo ziet het er nu uit:
http://img15.imageshack.us/img15/7738/screenonepng.png
zo ziet het er uit met een klein beetje tekst, ik wil dat het dus 100% breedt is, ook al staat er geen tekst in.
http://img10.imageshack.us/img10/5841/screentwopng.png
Gewijzigd op 01/01/1970 01:00:00 door Tom K
Tip: gebruik de developer toolbar extensie van firefox. daarmee zie je meteen wat er gaan de is.