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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>pspmedia.de.vu | Willkommen</TITLE>
<link rel="stylesheet" type="text/css" href="standard.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="lt_ie7.css">
<![endif]-->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="all">
<meta name="description" content="Wir bieten dir alle Hilfsmittel, um deine PSP softwaremäßig aufzumotzen - Demos, Apps, Themes und noch vieles mehr erwarten dich.">
<meta name="author" content="Jens Assmann">
<meta name="keywords" content="psp spiele, psp demos, psp programme, psp applikationen, psp themes, psp wallpaper, psp flash, psp, psp konsole, psp slim & light, psp slim and light, psp-media, psp media, psp downloads">
</HEAD>
<BODY>
<!-- Histats.com START -->
<a href="http://www.histats.com" target="_blank" title="web statistics">
<script type="text/javascript" language="javascript">
var s_sid = 363051;var st_dominio = 4;
var cimg = 0;var cwi =150;var che =30;
</script>
<script type="text/javascript" language="javascript" src="http://s11.histats.com/js9.js"></script>
</a>
<noscript><a href="http://www.histats.com" target="_blank">
<img src="http://s103.histats.com/stats/0.gif?363051&1" alt="web statistics" border="0"></a>
</noscript>
<!-- Histats.com ENDE -->
<!-- Bookmarks START -->
<div id="bookmarks">
<a href="http://www.mister-wong.de/add_url/" onClick="location.href="http://www.mister-wong.de/index.php?action=addurl&bm_url="+encodeURIComponent(location.href)+"&bm_description="+encodeURIComponent(document.title)+"";return false" title="Diese Seite zu Mister Wong hinzufügen" target="_top"><img src="http://www.mister-wong.de/img/buttons/logo16.gif" alt="Diese Seite zu Mister Wong hinzufügen" border="0"></a><br>
<div class="bookmarks_multi">
<a href="http://www.favoriten.de/url-hinzufuegen.html" onClick="location.href="http://www.favoriten.de/url-hinzufuegen.html?bm_url="+encodeURIComponent(location.href)+"&bm_title="+encodeURIComponent(document.title);return false" title="Diese Seite zu Favoriten.de hinzufügen" target="_top"><img src="http://www.favoriten.de/buttons/16x16_1.gif" alt="Diese Seite zu Favoriten.de hinzufügen" border="0"></a>
</div>
</div>
<!-- Bookmarks ENDE -->
<div id="wrapper">
[COLOR=Red] <div id="schatten_links"></div>
<div id="website">[/COLOR]
<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>
[COLOR=Red] </div>
<div id="schatten_rechts"></div>[/COLOR]
</div>
</BODY>
</HTML>
Code:
html {
height:100%;
}
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;
}
[COLOR=Red]#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;
}[/COLOR]
#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 */