Ich möchte auf meiner Website (siehe Signatur) links und rechts einen „Schatten“ hinzufügen. Dazu habe ich 3 divs erstellt, die alle mit einem float:left; versehen sind. In meiner Navigation funktioniert es nach dem gleichen Prinzip, wieso klappts dann hier nicht?
[code]
pspmedia.de.vu | Willkommen
<div id="header_color">
<div id="header">
<p id="navigation_top">
<a class="white" href="index.php?section=willkommen" title="Zurück zur Startseite">Home</a> | <a class="white" href="index.php?section=impressum">Impressum</a>
</p>
<p id="slogan">
<a class="none" href="index.php?section=willkommen">
<img src="logo.png" width="229" height="22" border="0" alt="pspmedia" title="Zurück zur Startseite">
</a>
<br>
Das große Downloadportal für deine PSP und PSP Slim & Light.
</p>
</div>
</div>
<div id="navigation">
<div id="downloads">
<a id="demo" href="index.php?section=demos" title="Demos">Demos</a>
<a id="application" href="index.php?section=programme" title="Programme"></a>
<a id="theme" href="index.php?section=themes" title="Themes"></a>
<a id="wallpaper" href="index.php?section=wallpaper" title="Wallpaper"></a>
<a id="flash" href="index.php?section=flash" title="Flash"></a>
<br class="clear">
<div id="downloads_titles_one"><a class="navi" href="index.php?section=demos" title="Demos">Demos</a></div>
<div class="downloads_titles"><a class="navi" href="index.php?section=programme" title="Programme">Programme</a></div>
<div class="downloads_titles"><a class="navi" href="index.php?section=themes" title="Themes">Themes</a></div>
<div class="downloads_titles"><a class="navi" href="index.php?section=wallpaper" title="Wallpaper">Wallpaper</a></div>
<div class="downloads_titles"><a class="navi" href="index.php?section=flash" title="Flash">Flash</a></div>
<br class="clear">
</div>
</div>
<div id="content">
<?php
if($_GET['section'] == "willkommen")
{ include "section/willkommen.php"; }
if($_GET['section'] == "impressum")
{ include "section/impressum.php"; }
if($_GET['section'] == "demos")
{ include "section/demos.php"; }
if($_GET['section'] == "programme")
{ include "section/programme.php"; }
if($_GET['section'] == "themes")
{ include "section/themes.php"; }
if($_GET['section'] == "wallpaper")
{ include "section/wallpaper.php"; }
if($_GET['section'] == "flash")
{ include "section/flash.php"; }
?>
</div>
<div id="footer">
<a class="white" href="#wrapper">zum Seitenanfang</a> |
Copyright © 2008 by <a class="white" href="index.php?section=impressum">pspmedia</a> |
<a class="white" href="index.php?section=impressum">Impressum</a>
</div>
</div>
<div id="schatten_rechts"></div>
body {
height:100%;
margin-top:0px;
margin-bottom:0px;
font-family:Arial;
font-size:12px;
background-image:url(hintergrund.png);
background-attachment:fixed;
}
a:link, a:visited { color:#EE0000; text-decoration:none; }
a:hover, a:active, a:focus { color:#8B0000; text-decoration:underline; }
.navi:link, .navi:visited { color:#000000; text-decoration:none; }
.navi:hover, .navi:active, .navi:focus { color: #4D4D4D; text-decoration:underline; }
.white:link, .white:visited { color:#000000; text-decoration:none; }
.white:hover, .white:active, .white:focus { color:#FFFFFF; text-decoration:underline; }
/* Allgemeines START */
img {
vertical-align:middle;
}
h1 {
font-size:12px;
text-transform:uppercase;
color:#FF8C00;
border-bottom:1px dotted #FF8C00;
}
p {
text-align:justify;
}
.clear {
clear:both;
}
.datenbank {
width:100%;
height:500px;
margin:20px 0px 0px 0px;
border:1px dotted #FF8C00;
}
#bookmarks {
position:fixed;
left:10px;
top:10px;
padding:5px;
border:1px solid #000000;
background-image:url(transparent.png);
}
.bookmarks_multi {
margin-top:5px;
}
/* Allgemeines ENDE */
/* Layout START */
#wrapper {
position:relative;
min-height:100%;
width:60%;
margin:auto;
background-color:#FFFFFF;
}
#schatten_links {
width:20px;
height:100%;
float:left;
background-color:#000000;
}
#schatten_rechts {
width:20px;
height:100%;
float:left;
background-color:#000000;
}
#website {
float:left;
}
#header_color {
background-color:#FF8C00;
}
#header {
margin:0px 20px 0px 20px;
}
#navigation_top {
margin:0px;
padding:5px 0px 5px 0px;
font-size:10px;
text-align:right;
}
#slogan {
margin:0px;
font-size:11px;
text-align:center;
}
#content {
padding:0px 20px 51px 20px;
background-color:#FFFFFF;
}
#footer {
position:absolute;
bottom:0px;
width:100%;
font-size:10px;
line-height:30px;
text-align:center;
border-top:1px dotted #FFFFFF;
background-color:#FF8C00;
}
/* Layout ENDE */
/* Navigation START */
#navigation {
margin:0px;
padding:38px 0px 38px 0px;
background-image:url(farbverlauf.png);
background-repeat:repeat-x;
}
#downloads {
width:400px;
margin:auto;
}
#demo {
width:64px;
height:64px;
display:block;
float:left;
padding:0px;
border:0px;
font-size:0px;
background:url(section/demos.png) 0 0 no-repeat;
}
#demo:hover {
background-position:-64px 0;
}
#application {
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border:0px;
font-size:0px;
background:url(section/programme.png) 0 0 no-repeat;
}
#application:hover {
background-position:-64px 0;
}
#theme {
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border:0px;
font-size:0px;
background:url(section/themes.png) 0 0 no-repeat;
}
#theme:hover {
background-position:-64px 0;
}
#wallpaper {
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border:0px;
font-size:0px;
background:url(section/wallpaper.png) 0 0 no-repeat;
}
#wallpaper:hover {
background-position:-64px 0;
}
#flash {
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border:0px;
font-size:0px;
background:url(section/flash.png) 0 0 no-repeat;
}
#flash:hover {
background-position:-64px 0;
}
#downloads_titles_one {
width:64px;
float:left;
padding:0px;
font-size:10px;
text-align:center;
}
.downloads_titles {
width:64px;
float:left;
margin-left:20px;
padding:0px;
font-size:10px;
text-align:center;
}
/* Navigation ENDE */[/code]
