Hy,
ich habe mal wieder ein Problem.
Ich habe eine Seite die durch verschiedene übereinandergelegte Grafiken erstellt wird.
Nun wollte ich um das komplette Konstrukt einen Schatten legen, also einen div Container drum herum und einen Schatten an diesem Container.
Nun hört er aber bei ca. 300px einfach mit dem Container auf obwohl der ja parent sein sollte.
Hat einer eine Idee?
Es geht um die id wrapper
Die Seite ist zwischen 700-1000px hoch
Ich habe schon ne weile gegooglet und vieles versucht, doch was funktionales kam nicht dabei raus.
Vielen Dank
ich habe mal wieder ein Problem.
Ich habe eine Seite die durch verschiedene übereinandergelegte Grafiken erstellt wird.
Nun wollte ich um das komplette Konstrukt einen Schatten legen, also einen div Container drum herum und einen Schatten an diesem Container.
Nun hört er aber bei ca. 300px einfach mit dem Container auf obwohl der ja parent sein sollte.
Hat einer eine Idee?
PHP-Code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title> </title>
<meta name="robots" content="noindex">
<link href="../css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="header">
<a href="../index.php"><img src="../images/wortlaut.png" alt="wortlaut" id="wortlaut"></a>
<img src="../images/banner.png" alt="banner" id="banner">
<img src="../images/bg_img.png" alt="Background" id="backgroundimage">
<div id="headfield">
<div id="pmenu"><div id="admin"><a href="/selfAdmin/"><img src="../images/admin_icon.png"
onmouseover="this.src='../images/admin_icon_hover.png';"
onmouseout="this.src='../images/admin_icon.png';"></a></div><div id="pm"><a href="/profil/pmbox.php"><img src="../images/pm_new_icon.png"
onmouseover="this.src='../images/pm_new_icon_hover.png';"
onmouseout="this.src='../images/pm_new_icon.png';"></a></div>
<div id="profil"><a href="/profil/view.php?pid=YLmaDFoWxpmk39gG9Qad"><img src="../images/profil_icon.png"
onmouseover="this.src='../images/profil_icon_hover.png';"
onmouseout="this.src='../images/profil_icon.png';"></a></div>
<div id="logout"><a href="/logout.php" onclick="return window.confirm('Wirklich abmelden?');">
<img src="../images/logout_icon.png"
onmouseover="this.src='../images/logout_icon_hover.png';"
onmouseout="this.src='../images/logout_icon.png';"></a></div>
</div> </div>
</div>
<div id="logo" style="background: url(../images/logo.png) no-repeat;"></div>
<div id="main">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<div align="center"><br>
Inhalt
</div>
</td>
</tr>
<tr>
<td><center>|
<a href="index.php?site=home">Home</a> | <a href="index.php?site=agb">AGB</a> | <a href="index.php?site=kontakt">Kontakt</a> | <a href="index.php?site=impressum">Impressum</a> | </center><br></td>
</tr>
</table>
</div>
<div id="footer"></div>
</div>
<br style="clear:both" />
</body>
</html>
Die Seite ist zwischen 700-1000px hoch
HTML-Code:
* { padding: 0; margin: 0; } body, html { width: 900px; margin: auto; background-color:#D5EFF1; } div#wrapper { position: absolute; left: auto; right: auto; top: 35px; height: 100%; min-height:100%; width: 900px; -webkit-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.67); -moz-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.67); box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.67); } img#banner { position: absolute; left: 0px; top: 45px; width: 900px; height: 75px; z-index: 2; } img#backgroundimage{ position: absolute; left: 0px; top: 0px; width: 900px; height: 540px; z-index: 1; } img#wortlaut { position: absolute; left: 30px; top: 62px; width: 290px; height: 30px; z-index: 3; } div#log_mail { /*background: url(log_user.png) no-repeat;*/ position: absolute; left: 450px; top: 55px; width: 185px; height: 27px; z-index: 4; } #mail,#password { background-color: transparent; border: 0; position: absolute; outline: 0 none; left: 30px; top: 0px; width: 145px; height: 27px; z-index: 4; } div#log_key { position: absolute; left: 650px; top: 55px; width: 185px; height: 27px; z-index: 5; } #enter { position: absolute; left: 850px; top: 55px; width: 27px; height: 27px; z-index: 6; } #logo { position: absolute; left: 734px; top: 472px; width: 143px; height: 143px; z-index: 7; } p { font-family: "Arial";} .link_banner { font-size: 11px; color:#fff ; text-align: center; position: absolute; left: 420px; top: 70px; width:200px; z-index: 9; } .welcome { font-size: 45px; color: #5FBCE3; text-align: center; position: absolute; left: 400px; top: 50px; width:500px; z-index: 9; } /* a {text-decoration:none; color: #A6C6E0;} a:hover { color:#5FBCE3; } */ div#main { position: absolute; /*border-radius: 18px;*/ left: 0px; top: 540px; width: 862px; height: auto; z-index: 1; } div#pmenu { position: absolute; float: right; left: 500px; top: 50px; width: 400px; height: 50px; z-index: 4; } div#admin { position: absolute; left: 160px; top: 0px; width: 50px; height: 50px; z-index: 4; } div#pm { position: absolute; left: 220px; top: 0px; width: 50px; height: 50px; z-index: 4; } div#profil { position: absolute; left: 280px; top: 0px; width: 50px; height: 50px; z-index: 4; } div#logout { position: absolute; left: 340px; top: 0px; width: 50px; height: 50px; z-index: 4; } div#wrapper:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */
Vielen Dank
Kommentar