nicht angemeldet
Hilfe bei fixierten Navigationsbereichen
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.
-
Hi,
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.
gar nicht. Dann musst Du zwangsläufig auf die Fixierung verzichten.
freundliche Grüße
Ingo -
Keiner weiss einen Rat ?
-
Hi,
Keiner weiss einen Rat ?
Du hast doch bereits eine Antwort bekommen.
Wenn dir diese nicht weiterhilft, dann beschreibe bitte *warum* nicht. (Und zwar an der Stelle, wo du sie erhalten hast.)
MfG ChrisB
-
-
Weiss denn keiner Rat ?
-
Sorry für die zwei sinnlosen Posts, mein Browser hat mir meine Nachricht etwas komisch angezeigt sodass ich gar nicht gesehen habe das schon eine Antwort geliefert wurde.
Bitte vielmals um Entschuldigung ;)