PHP gevorderde |
|
Beste,
Ik heb 2 problemen:
- firefox, en chrome doen moeilijk met margin-top (de afbeelding moet aan elke kant 6px van die witte rand over houden, padding werkt ook niet echt.
- Onderaan de afbeelding, zie je de opacity van 50%. Dit is allenmaal goed maar nu moet links nog een titel komen (tekst) en rechts 2 icons (IMG) die moeten navigeren, maar ook deze titel en navigatie-buttons worden met 50% verlicht.
Voorbeeld]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>test</title>
<style type="text/css">
body
{
margin: 30px;
background-color: #181a18;
}
.SlideShowBG
{
width: 520px;
height: 200px;
background-color: #FFFFFF;
}
.SlideShowAfbeelding
{
margin: 6px;
width: 508px;
height: 188px;
background-image: url('img/slideshow_bg.png');
}
.SlideShowIndeling
{
margin-top: 147px;
width: 100%;
height: 22%;
float:left;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
background-image: url('img/slideshow_opacity.png');
}
.project
{
margin-top: 6px;
margin-left: 6px;
color: #fbffd3;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
width: 100px;
height: 20px;
float: left;
}
.knoppen
{
background: none;
margin-top: 14px;
margin-right: 6px;
width: 40px;
height: 20px;
float: right;
}
</style>
</head>
<body>
<div class="SlideShowBG">
<div class="SlideShowAfbeelding">
<div class="SlideShowIndeling">
<div class="project">
blaat
</div>
<div class="knoppen">
<img src="img/slideshow_vorige.png" alt="" style="cursor: pointer;"/>
<img src="img/slideshow_volgende.png" alt="" style="cursor: pointer;"/>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>test</title> <style type="text/css"> body { margin: 30px; background-color: #181a18; } .SlideShowBG { width: 520px; height: 200px; background-color: #FFFFFF; } .SlideShowAfbeelding { margin: 6px; width: 508px; height: 188px; background-image: url('img/slideshow_bg.png'); } .SlideShowIndeling { margin-top: 147px; width: 100%; height: 22%; float:left; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; background-image: url('img/slideshow_opacity.png'); } .project { margin-top: 6px; margin-left: 6px; color: #fbffd3; font-family: Verdana; font-weight: bold; font-size: 11px; width: 100px; height: 20px; float: left; } .knoppen { background: none; margin-top: 14px; margin-right: 6px; width: 40px; height: 20px; float: right; } </style> </head> <body> <div class="SlideShowBG"> <div class="SlideShowAfbeelding"> <div class="SlideShowIndeling"> <div class="project"> blaat </div> <div class="knoppen"> <img src="img/slideshow_vorige.png" alt="" style="cursor: pointer;"/> <img src="img/slideshow_volgende.png" alt="" style="cursor: pointer;"/> </div> </div> </div> </div> </body> </html>
|