nicht angemeldet
Probleme von fixierter Navigation mit CSS
0 0 0 0 0 
Der Martin
0
Probleme von fixierter Navigation mit CSS
Hallo,
ich habe beschlossen eine eigene kleine Homepage einzurichten und möchte sie gerne komplett selbst schreiben.
Dabei würde ich gerne eine Navigation haben die statisch ist d.h immer vorhanden ist, auch wenn man scrollt. Ich benutze CSS anstatt Frames und habe mir die Seite von <http://de.selfhtml.org/css/layouts/fixbereiche.htm@title=Selfhtml als Vobild genommen>.
Nun ist es aber passiert, dass meine Navigation nicht munter mitwandert. Ich habe daraufhin einfach den kompletten Quelltext kopiert und als html Seite auf meinem Desktop gespeichert und geöffnet.
Auch hier trat das selbe Problem auf. Wenn ich mir das Beispiel angucke funktioniert es, aber sobald ich es auf meiner eigenen Seite anwende klappt es nicht.
Was mach ich falsch?
Ich habe keine all zu großen Kenntnisse in HTML/CSS daher kann es auch an einem ganz einfachen Fehler liegen.
Würde mich über eine baldige Antwort freuen.
Gruß,
Julie
_________________________________
Quelltext meines Beispiels:
<html>
<head>
<title>
Homepage - Home
</title>
<style type="text/css">
body {
background-color:#123456;
margin: 0;
padding: 0;
min-width: 35em; }
#menu {
position:absolute;
top:1.5em;
left:1em;
border:1px dashed #111333;
background-color:#667799; }
html>body #fixiert {
position: fixed; }
.inhalt1 {
border:5px solid #009900;
padding:1em;
margin:2em; }
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><div class="inhalt1">Es war einmal...</div>
<div id="menu"> Impressum usw.</div>
</body>
</html>
-
Hallo!
Nun ist es aber passiert, dass meine Navigation nicht munter mitwandert.
[...]
Was mach ich falsch?
[...]
html>body #fixiert {
position: fixed; }
[...]
<br><div class="inhalt1">Es war einmal...</div>
<div id="menu"> Impressum usw.</div>Warum sollte sie das auch? Ich sehe nichts, wo
position:fixed;angewendet werden könnte.--
LG,
Snafu -
Hallo,
body {
background-color:#123456;
margin: 0;
padding: 0;
min-width: 35em; }#menu {
position:absolute;
top:1.5em;
left:1em;
border:1px dashed #111333;
background-color:#667799; }html>body #fixiert {
position: fixed; }.inhalt1 {
border:5px solid #009900;
padding:1em;
margin:2em; }
</style>ich würds ja ganz anderst machen ^^.
mach nen div-container für navigation:
div#navigation { position:fixed; <!-- damit die Navigation fest steht --> left: 0; <!-- damit sie links steht --> width: 250px; <!-- beliebige breite --> }und einen für den inhalt:
div#inhalt { margin-left: 250px; <!-- siehe width navigation --> }Mit freundlichen Grüßen,
Atom Waffel -
Hi,
Nun ist es aber passiert, dass meine Navigation nicht munter mitwandert.
wieso "nicht"? Ich denke, sie soll fixiert sein - was bedeutet: nicht mit dem Inhalt scrollen.
Ich habe daraufhin einfach den kompletten Quelltext kopiert und als html Seite auf meinem Desktop gespeichert und geöffnet.
Das hast Du offenbar nicht:
Quelltext meines Beispiels:
<html>
davor fehlt schon mal der DOCTYPE - ohne diesen versetzt Du die Browser in den quirks("rate")modus.
html>body #fixiert {
position: fixed; }ich hoffe, Du testest nicht im IE6, denn für den ist dieses Beispiel nicht ausgelegt.
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><div class="inhalt1">Es war einmal...</div>
<div id="menu"> Impressum usw.</div>so ein Murks ist auch nicht im Beispiel.
freundliche Grüße
Ingo-
Ich hab den Fehler jetzt endlich gefunden, es fehlt Dodctype. Danke.
Und nein, ich hatte nicht vor mit dieser HTML Datei das Beispiel genau zu übernehmen. Es ging nur darum die Funktion zu verstehen und auf eine mögichst einfache Ebene zu übertragen.
Daher sollte es zwei Berieche geben. Einer der mitscrollt und einer der fest am unteren Bereich des Dokuments.
Ich habe nie gelernt warum man Doctype einbinden sollte, daher habe ich es bei allen Dokumenten völlig außer Acht gelassen. Ich werde mir es nun genau durchlesen.
-
Hallo,
Ich habe nie gelernt warum man Doctype einbinden sollte
aus demselben Grund, warum man am Gewürzregal dranschreiben sollte, was für ein "Zeug" in der jeweiligen Lade drin ist. Natürlich kann man auch jedesmal reinschnuppern oder ausprobieren, und oft wird das auch zum gewünschten Ergebnis führen. Aber die Gefahr ist groß, irgendwann mal Pfeffer anstatt Zimt oder Salz anstatt Zucker zu erwischen.
Ganz ähnlich ist es mit dem DOCTYPE, der -wie die Bezeichnung schon sagt- angibt, welchem Typ das Dokument entspricht. Die Theorie ist eigentlich, dass ein Browser anhand dieser Angabe die feinen Unterschiede zwischen den diversen HTML-Dialekten richtig umsetzen kann. Ob und wie weit die Browserhersteller das tatsächlich umsetzen, weiß ich nicht.
Aber in der Praxis kommt noch ein weiterer wichtiger Punkt dazu: Wenn der DOCTYPE fehlt oder unvollständig ist (keine DTD angegeben), dann schalten die meisten Browser in eine Art Kompatibilitätsmodus, auch Quirks Mode genannt. Sie gehen dann davon aus, dass der Autor die Regeln nicht einhält, und versuchen im Zweifelsfall zu raten, was er *wirklich* gemeint haben könnte. Dieses Raten ist oft richtig; aber besonders der IE geht dann oft genau von den falschen, d.h. nicht standardkonformen Annahmen aus.
daher habe ich es bei allen Dokumenten völlig außer Acht gelassen. Ich werde mir es nun genau durchlesen.
Tu das. Es kann nie schaden, Bescheid zu wissen. ;-)
Schönes Wochenende,
Martin--
Kleine Geschenke erhalten die Freundschaft.
Große verderben sie aber meist auch nicht. -
Hi,
Es ging nur darum die Funktion zu verstehen und auf eine mögichst einfache Ebene zu übertragen.
trotzdem solltest Du versuchen, sinnvollen Code zu schreiben.
Haufenweise <br> und dazu noch direkt im <body> ist das genauso wenig wie class="inhalt1".freundliche Grüße
Ingo
-
-