nicht angemeldet
Verschobene UL
Hellö
Ich weiss echt nicht, wieso der Button "Seite 1" verschoben ist.
Hoffe, dass mir jemand helfen kann.
Ausserdem habe ich ein weiteres kleineres Problem.
Beim verändern der Grösse des Fensters, ändert sich auch der Abstand der beiden Inhalte. Wie kann ich das ändern?
Hier ist der Code:
[code lang=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixierte Navigation nur für moderne Browser</title>
<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
#Inhalt {
position: static;
}
}
</style><![endif]-->
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
min-width: 60em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
}
p {
margin: 3em 0 0 3em; /* Positionierung des 'zurueck'-Links */
}
p a {
color:black; /* Farbe des 'zurueck'-Links */
}
html {
padding: 0;
}
body {
margin: 0; padding: 0;
}
#fixiert {
position: absolute;
top: 0em; left: 0em;
width: 100.01%;
background-color: white;
border: 1px solid silver;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
#fixiert img {
height: 2.8em;
}
#Inhalt1 {
float: left;
margin-left: 1%;
width: 45.1%;
padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray; border-right: 2px ridge gray;
}
#Inhalt1 h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt1 p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt1 #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
#Inhalt2 {
float: right;
margin-right: 1%;
width: 45.1%;
padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray; border-right: 2px ridge gray;
}
#Inhalt2 h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt2 p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt2 #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
h1 {
padding: 0.1em;
font-size: 1.5em;
margin-top: 3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
width: 99%;
}
#Navigation {
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
font-size: 0.83em;
text-align: center;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
display: inline;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
float: left; width: 6em;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
ul#Navigation div {
clear: left;
}
</style>
</head>
<body>
<div id="Scrollbereich"> <!-- erst fuer den folgenden Workaround benoetigt -->
<h1>Fixierte Navigation</h1>
<div id="Inhalt1">
<h2>1</h2>
<p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
<p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div>
<div id="Inhalt2">
<h2>2</h2>
<p>Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
mit einer Schriftvergrößerung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
<p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div>
<div id="fixiert"> <!-- verhindert auch Anzeigefehler einer fixierten ul -->
<ul id="Navigation">
<li><a href="../Desktop/Text1.html">Seite 1</a></li>
<li><a href="../Desktop/Text1.html">Seite 2</a></li>
<li><a href="../Desktop/Text1.html">Seite 3</a></li>
<li><a href="../Desktop/Text1.html">Seite 5</a></li>
</ul>
</div>
</body>
</html>
[/code]
-
Ich weiss echt nicht, wieso der Button "Seite 1" verschoben ist.
Verschoben ist der Button übrigens nur bei FF3. Bei IE7 nicht.
Unglaublich! Hatte noch nie Darstellungsprobleme mit FF
-
Hi,
schau mal zuerst dass dein Code valide ist. Das sollte immer das Erste sein, bevor man hier Fragen stellt. Damit meine ich 2*id=Fusszeile geht nicht. Mach Klassen daraus.
Hab ein wenig geschaut, siehet so aus als würde das an der CSS Eigenschaft 'padding' unter '#Navigation li' liegen. Setz das mal auf 0 und schau was passiert
-
Danke, habe den Namen der ID geändert. Ausserdem lag es tatsächlich am padding. Ist jetzt so wie's sein muss.
schau mal zuerst dass dein Code valide ist. Das sollte immer das Erste sein, bevor man hier Fragen stellt.
Ich bin offen für weitere Kritiken!
-