nicht angemeldet
Navileist in Javascript wird zu lang
0 0 0 
Matthias Apsel
0 0 0 Matthias Apsel
0
Navileist in Javascript wird zu lang
JürgenB
Gunnar BittersmannHallo,
ich habe auf der linken Seite meines Projektes einen Navileiste.
Diese ist, ähnlich dem Verzeichnisbaum in Windows und kann einzelne Verzeichnisse auf- und zuklappen.
Wenn ich nun alle Verzeichnisse aufklappe, wird die Liste so lang, dass sie nach unten aus dem Sichtbereich läuft. Kann ich das irgendwie so hinbekommen, dass ich alle einträge sehen kann??
Die Navileiste ist im CSS mit #Navi gekennzeichnet.
Ich habe auch schon versucht dieses Element mit overflow:scoll zu ergänzen.
Auch das hat leider nicht funktioniert.
Kann mir jemand einen Tipp geben?
body { font-family:arial,sans-serif; background-color:#EBE9D8; margin-left:40px; margin-right:250px; margin-top:30px; 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; }
h3 { 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; }
#navi { position:fixed;}
#inhalte { padding-left:280px;}
-
Moin,
Kann mir jemand einen Tipp geben?
Natürlich. Heißer Tipp: Lies die Tipps für Fragende durch und bringe ein Online-Beispiel oder zumindest ein Bild deines Problems.
Grüße Marco
-
Geht leider nicht, weil es eine Programmhilfe ist, deren Inhalte vertraulich sind und ich nicht online stellen darf, sonst hätte ich das gemacht.
Ich muss im Prinzip nur den Anzeigebereich des Navielementes nach unten begrenzen, oder?
-
Om nah hoo pez nyeetz, donnerkai!
Probiere mal aus, was man auf dieser Seite so alles probieren kann. Möglicherweise erkennst du deinen Fehler.
Matthias
--
1/z ist kein Blatt Papier.
-
Moin,
Probiere mal aus, was man auf dieser Seite so alles probieren kann. Möglicherweise erkennst du deinen Fehler.
Da er nach seiner eigenen Beschreibung eine sehr lange Navigation hat, kommt für ihn eigentlich nur diese Lösung in Betracht. Gefixte Elemente gehören IMHO sowieso in kein userfreundliches Webseiten-Layout.
Da lieber, wie es auf den Seiten von SelfHTML auch ist, zwischendurch kleine Links, die wieder hoch zur Navigation führen.
Grüße Marco
-
Das sieht mir nach der richtigen Lösung aus. Leider bin ich dafür zu blöd und verstehe den Code nicht.
hier nochmal die Indexseite als Codeblock. Das Stylesheet von eben passt dazu.
Wo genau müsste ich den Code aus der Lösung denn hinkopieren?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head lang="de-DE"> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title>VG</title> <link rel="stylesheet" type="text/css" href="../formate.css"> </head> <body> <div id="navi"> <form id="search" method="get" action="suchen.php"> <p> <p><b><label for="suchbegriff">Im Programm suchen:</label></b></p> <input type="text" name="q" id="suchbegriff" value="Suchbegriff" /> <input type="submit" value="Los !" /> </p> </form> <?php include "/vg-navi.php"; ?> </div> <div id="inhalte">-
Moin,
Wo genau müsste ich den Code aus der Lösung denn hinkopieren?
Der CSS-Teil kommt in dein CSS-Stylesheet und das Javascript, was du am Ende der Seite downloaden kannst, wird einfach in den das Head-Element per <script>-Tag eingebunden, so wie ich das verstanden habe.
Grüße Marco
-
-
Om nah hoo pez nyeetz, misterunknown!
Ich habe verstanden, dass die Navigation für die Bildschirmgröße zu lang ist. Da heißt dann wohl das Zauberwort
position: absolute;stattposition: fixed;.Zur Positionierung gibt es von mir ein Tutorial.
Matthias
--
1/z ist kein Blatt Papier.
-
Zur Positionierung gibt es von mir ein Tutorial.
Danke für das Tutorial!
"Die CSS-Eigenschaft position wird gerade von Neulingen in der HTML/CSS-Praxis häufig nach Versuch und Irrtum verwendet,"
erwischt :)
"was meiner Meinung nach an der schnell irreführenden Bezeichnung der Werte absolute und relative liegt."
Jau, dat sach ich wohl. -
Das Tutorial ist super. Wenn ich aber position:absolute verwende hat das denn Nachteil, dass wenn ich die Seite ganz nach unten scrolle auch die Navileiste weg ist weil sie ja nach oben aus dem Sichtbereich verschwindet.
Ausserdem habe ich dann das Phänomen, dass der Inhaltsbereich der sich rechts neben der Navi befindet dann ein ganzes Stück weiter nach unten schiebt und zwar genau an das Ende des Navielementes. Obwohl es ja nur daneben dargestellt wird.
Oh man, alles nicht so einfach.Om nah hoo pez nyeetz, misterunknown!
Ich habe verstanden, dass die Navigation für die Bildschirmgröße zu lang ist. Da heißt dann wohl das Zauberwort
position: absolute;stattposition: fixed;.Zur Positionierung gibt es von mir ein Tutorial.
Matthias
-
Hallo donnerkai,
ich habe das mal so gelöst:
im CSS position:absolute
Mit Javascript dann prüfen
- kann der Browser position:fixed (IE 6 kann das nicht)
- ist die Seite hoch genug
dazu Höhe der Seite, Höhe der Navigation und Position der Navigation ermitteln
wenn beides OK wird position:fixed gesetzt.
Gruß, Jürgen
-
@@donnerkai:
nuqneH
Wenn ich aber position:absolute verwende hat das denn Nachteil, dass wenn ich die Seite ganz nach unten scrolle auch die Navileiste weg ist weil sie ja nach oben aus dem Sichtbereich verschwindet.
Das muss kein Nachteil sein.
Qapla'
PS: Bitte kein TOFU!
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
-
Moin,
Geht leider nicht, weil es eine Programmhilfe ist, deren Inhalte vertraulich sind und ich nicht online stellen darf, sonst hätte ich das gemacht.
Ich muss im Prinzip nur den Anzeigebereich des Navielementes nach unten begrenzen, oder?
So wie ich das verstehe ja. Da das Element fixed ist, kannst du height:100% aber nur effektiv verwenden, wenn das Element direkt oben links in der Ecke beginnt, da ein Element, was mit position:fixed; positioniert wird als "containing block" immer den Viewport hat (wenn ich das richtig verstehe). Du kannst dem Element also nur eine feste Höhe geben, was aber wieder Leute mit kleineren Viewports ausschließt. Und das sind nicht nur Netbook-Kandidaten, sondern auch Profis mit 24"-Monitoren, die den Browser nur als relativ kleines Fenster in einer Ecke laufen lassen.
Grüße Marco
-
-