Position der Navileiste
0 
Felix Riesterer
0
Position der Navileiste
Hallo und guten Tag.
Ich habe folgendes Problemchen. Ich habe den Auftrag bekommen eine Homepage zu erstellen und habe mich deshalb etwas in HTML eingelesen.
Auf der linken Seite soll eine Navigationsleiste seien, auf der rechten Seite der Inhalt. Dafür habe ich im Stylesheet 2 Bereiche definiert:
body { font-family:arial,sans-serif; font-weight:bold; background-color:#EBE9D8; margin-left:1%; margin-right:7%; margin-top:10px; margin-bottom:10px; }
p, h1, h2, h3, h4, ul, ol, li, div, td, th, address, blockquote, nobr, b, i { font-family:arial,sans-serif; color:#070204; }
h1 { font-size:18pt; color:#070204; }
h2 { font-size:14pt; color:#070204; }
h2.sh2 { font-size:16pt; color:#070204; }
h3, h3.xmp, h3.xpl, h3.inf, h3.tip { font-size:12pt; color:#070204; }
h4 { font-size:12pt; color:#070204; }
p, ul, ol, li, div, td, th, address, nobr, b, i { font-size:12pt; color:#070204; }
pre { font-family:courier new,courier; font-size:12pt; color:#070204; }
a:link { color:#0000FF; text-decoration:underline; }
a:visited { color:#800080; text-decoration:underline; }
a:hover { color:#FF0000; text-decoration:none;}
a:active { color:#FF0000; text-decoration:none; }
a:link img { text-decoration:none; }
.imageinfo { font-size:10pt; font-weight:bold; text-align:left; }
#navi {position:fixed; padding-left:5px;}
#inhalte {padding-left:300px;
Leider ist es jetzt so, dass der Inhalt zwar rechts und die Navileiste links angezeigt wird, der Inhalt aber erst auf der Mitte der Seite beginnt. Nämlich genau auf der Höhe wo die Navileiste aufhört.
Hat da jemand eine Idee was ich falsch gemacht habe?
Vielen Dank
-
Lieber Donnerkai,
schau doch einmal in das Kapitel <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Mehrspaltige CSS-basierte Layouts> hinein. Dort findest Du konkrete Beispiele, wie man genau dieses Problem http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm@title=lösen kann.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hmmmm,
also ich habe es mir angeschaut und es wie folgt geändert:#navigation {float: left; } #inhalte {margin-left:230px;margin-top:0px}Leider bleibt die Anzeige im Browser unverändert.
ich habe es wohl nicht richtig verstanden...Lieber Donnerkai,
schau doch einmal in das Kapitel <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Mehrspaltige CSS-basierte Layouts> hinein. Dort findest Du konkrete Beispiele, wie man genau dieses Problem http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm@title=lösen kann.
Liebe Grüße,
Felix Riesterer.
-
Moin,
#navigation {float: left;
}
#inhalte {margin-left:230px;margin-top:0px}Die float-Eigenschaft bedingt eine Breitenangabe. Bei dir wäre wohl 220px optimal, damit beide Elemente nebeneinander angezeigt werden. Sollte das nicht funktionieren, wäre ein Online-Beispiel ganz hilfreich ;) Grüße Marco
-
-
-
Super, mit der width Angabe hat wunderbar geklappt. Ein Problem geht, das nächste kommt.
Nun ist es so, dass die Navi Leiste (wie ja auch gewünscht) gefixt ist.
Das hat zur Folge, dass ich beim Scrollen natürlich nur den Inhalt scrolle.
Soweit ist das auch alles gewollt.
Wenn ich nun allerdings die Navileiste aufklappe wird sie länger als die Seite und einige Einträge können nicht mehr gelesen werden.
Hinscrollen geht ja auch nicht weil ich ja nur den Inhalt Scrollen kann.
Weiss jemand eine Lösung für dieses Dilemma?Hallo und guten Tag.
Ich habe folgendes Problemchen. Ich habe den Auftrag bekommen eine Homepage zu erstellen und habe mich deshalb etwas in HTML eingelesen.
Auf der linken Seite soll eine Navigationsleiste seien, auf der rechten Seite der Inhalt. Dafür habe ich im Stylesheet 2 Bereiche definiert:body { font-family:arial,sans-serif; font-weight:bold; background-color:#EBE9D8; margin-left:1%; margin-right:7%; margin-top:10px; margin-bottom:10px; }
p, h1, h2, h3, h4, ul, ol, li, div, td, th, address, blockquote, nobr, b, i { font-family:arial,sans-serif; color:#070204; }
h1 { font-size:18pt; color:#070204; }
h2 { font-size:14pt; color:#070204; }
h2.sh2 { font-size:16pt; color:#070204; }
h3, h3.xmp, h3.xpl, h3.inf, h3.tip { font-size:12pt; color:#070204; }
h4 { font-size:12pt; color:#070204; }
p, ul, ol, li, div, td, th, address, nobr, b, i { font-size:12pt; color:#070204; }
pre { font-family:courier new,courier; font-size:12pt; color:#070204; }
a:link { color:#0000FF; text-decoration:underline; }
a:visited { color:#800080; text-decoration:underline; }
a:hover { color:#FF0000; text-decoration:none;}
a:active { color:#FF0000; text-decoration:none; }
a:link img { text-decoration:none; }
.imageinfo { font-size:10pt; font-weight:bold; text-align:left; }
#navi {position:fixed; padding-left:5px;}
#inhalte {padding-left:300px;> > Leider ist es jetzt so, dass der Inhalt zwar rechts und die Navileiste links angezeigt wird, der Inhalt aber erst auf der Mitte der Seite beginnt. Nämlich genau auf der Höhe wo die Navileiste aufhört. > Hat da jemand eine Idee was ich falsch gemacht habe? > > Vielen Dank-
Lieber Donnerkai,
bitte unterlasse TOFU. Danke.
Weiss jemand eine Lösung für dieses Dilemma?
Gib Deiner aufgeklappten Navi eine feste Höhe, die im Anzeigebereich bleibt und lasse sie mittels overflow:auto scrollbar werden.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
-