nicht angemeldet
Nabend Leute,
ich bin gerade dabei meine alte Seite komplett zu überarbeiten, damit ich die Frames durch CSS ersetzen kann.
Nun habe ich eine Hauptseite 'index.html', mit folgendem Inhalt :
<html>
<head>
<title>Meine Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js.js" type="text/javascript">
</script>
<script type="text/javascript">
</script>
<body>
<div id="Scrollbereich">
<br><br /><center><img src="logo.png"></img><center>
<div id="Inhalt">
<div><font color="#cc2e2e">
<br><br /><br><br /><br><br />
<center>
Willkommen auf meiner Seite =)
</center></font></div>
</div>
</div>
<div id="fixiert">
<ul id="Navigation">
<li><a href="test.html">Link01</a></li>
<li><a href="test.html">Link02</a></li>
<li><a href="test.html">Link03</a></li>
<li><a href="test.html">Link04</a></li>
</ul>
</div>
</body>
</html>
Und in meiner CSS-Datei habe ich folgendes stehen :
body {
font: normal 100.01% Arial;
color: #0000;
}
img {
border:0;
}
p a, h3 a {
color: #000;
}
html, body {
margin: 0; padding: 0; background: #2e2e2e;
}
#fixiert {
position: absolute;
top: 13em; left: 1em;
width: 10em;
background-color: #4C4C4C;
border: 0px solid silver;
}
html>body #fixiert {
position: fixed;
}
#Inhalt {
margin-left: 15em; padding: 0 1em;
}
#Inhalt h2 {
font-size: 1.2em;
margin: 1em 0 1em 1.5em;
color: #c40214;
border-bottom: 1px solid silver;
}
#Inhalt img{
float:right;
margin:0 0 1em 2em;
}
#Inhalt ul{
max-width:35em;
}
#Inhalt ul.Beispiele{
max-width:100000000em;
list-style-type:none;
}
#Inhalt ul.Beispiele li{
display:block;
float:left;
margin-top:2em;
}
#Inhalt ul.Beispiele li img{
float:none;
}
#Inhalt p, #Inhalt h3 {
font-size: 1em;
margin: 1em;
max-width:35em;
}
#Inhalt div {
clear:right;
}
h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
color:#c40214;
}
#Navigation {
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
font-weight:bold;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #C0C0C0;
}
ul#Navigation a:visited {
color: black; background-color: #B2B2B2;
}
ul#Navigation a:hover {
color: black; background-color: #CC0000;
}
ul#Navigation a:active, ul#navigation a:focus {
color: white; background-color: gray;
}
@media print{
div#fixiert {
display:none;
border:10px solid red;
}
div#Inhalt{
margin:0;
padding:0;
}
}
@media screen {
* html, * html body {
height: 100%; overflow-y: hidden;
}
* html #Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
* html #Inhalt {
position: static;
}
}
Nun ist der Navigationsbereich ja fixiert wenn ich diese allerdings mit vielen Links fülle und sie aus dem Browserfenster 'heraus wächst' scrollt sie nicht mit beim scrollen und somit kann man die unteren Links weder sehen noch anklicken, wie kann ich nun vorgehen um dieses Problem zu lösen.