Feststehendes Menü, in CSS statt Frames -machbar? |
Willkommen, Gast ( Anmelden | Registrierung )
Feststehendes Menü, in CSS statt Frames -machbar? |
27.07.2005 - 18:36
Beitrag
#1
|
|
Rookie Gruppe: User Beiträge: 8 Mitglied seit: 15.06.2005 Mitglieds-Nr.: 5.198 |
Hallo zusammen.
Ich hab da mal wieder eine Frage. Ich habe zur Zeit sowohl die obere als auch die linke Navigation via Include-Befehl eingefügt. Damit gibt es auch keine Probleme. Ich möchte aber, falls das überhaupt möglich ist, das sich die Navigation beim scrollen immer im Blickfeld des Besuchers befindet. Also, ist das möglich oder verlang ich da einfach zuviel? Gruss Robert |
|
|
27.07.2005 - 20:09
Beitrag
#2
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hi,
ja, das ist möglich! Mittels css und Javascript. Ob es vernünftig ist, ist natürlich eine andere Frage denn nicht alle User haben JS aktiviert. Ich hatte es mal auf einer meiner Seiten. Lieder ist sie nicht mehr Online. Ich muss in der Tiele meiner Festplatten suchen ob ich die CSS Datei noch finden kann.... Melde mich dann wieder! cu Conny |
|
|
27.07.2005 - 20:29
Beitrag
#3
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Glück gehabt !
Ich habe da noch was gefunden: QUELLTEXT #box { width: 140px; height: 400px; margin: 0px; border: 3px ridge #D8D8C4; } #box { background-color: #F6F6EB; background-position: top; position: fixed; top: 40px; left: 17px; position: expression("absolute"); top: expression(parseInt(document.body.scrollTop + 40)); } #box[id] { position: fixed; } #shadow { width: 140px; height: 400px; } #shadow { background-color: #5F5F5F; position: fixed; top: 48px; left: 24px; position: expression("absolute"); top: expression(parseInt(document.body.scrollTop + 48)); } #shadow[id] { position: fixed; } Während das Fenster gescrollt wird, bleibt die Auswahlbox (ID BOX) stehen, er hebt sich, durch ein Schattenrand (ID SHADOW), sogar etwas vom Hintergrund ab! Die Farben und die Größe solltest Du Dir Deine Bedürfnisse anpassen. Denke Daran, daß die '#shadow' -Werte in direktem Zusammenhang mit den '#Box'-Werte stehen. Änderst Du die Zahlen, dann mußt Du das sowohl als auch machen! Try it! cu Conny |
|
|
27.07.2005 - 22:06
Beitrag
#4
|
|
is getting harder Gruppe: User Beiträge: 28 Mitglied seit: 12.06.2005 Mitglieds-Nr.: 5.192 |
Äh sorry.....
Aber der wichtigste Punkt ist doch das "position:fixed;".....nur hatte ich jedoch bisher Probleme das auch dem IE6 begreiflich zu machen, oder hab ich da jetzt was übersehen? Firefox und Opera alles ok, nur der übliche Verdächtige hat mal wieder quergeschossen.. Wenn es ohne Java geht, umso besser. Gruss, TS |
|
|
27.07.2005 - 23:02
Beitrag
#5
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
ZITAT(TS) ...oder hab ich da jetzt was übersehen?... Ja, hast Du! Sicher, position:fixed ist für den IE Problematisch, daher diesen Workaround: QUELLTEXT position: expression("absolute"); top: expression(parseInt(document.body.scrollTop + 40)); Und dann klappt es auch mit dem IE (Wenn's auch beim Scrollen ein wenig 'bibbert'). cu Conny |
|
|
28.07.2005 - 6:51
Beitrag
#6
|
|
Weiss zuviel!! Gruppe: Mods Beiträge: 668 Mitglied seit: 19.04.2002 Wohnort: Grimmen Mitglieds-Nr.: 385 |
Hallo,
das geht auch mit zwei CSS-Dateien (1 x Moz/FF/... und 1 x IE) und einer Browserweiche, die nur der IE versteht. In der CSS für IE habe ich alles was nur der IE versteht, den ganzen großen Rest in der für die anderen. CSS-IE QUELLTEXT html, body { margin: 0; padding: 0; height: 100%; overflow-y: hidden; font-family: Arial, sans-serif; color: black; background-color: #fbfbfb; } /*that must be to fix the menu-box - only ie*/ .container { height: 100%; width: 100%; overflow: auto; } /*box that contains the information*/ .content { position: static; margin: 0px 10px 10px 240px; background-color: #fbfbfb; border:0px; padding: 0px 10px 10px 10px; } /*box the contains the navigation*/ .menu { z-index: 1; background-color: #fbfbfb; position: absolute; top: 0px; left: 0px; width: 220px; height: 100%; /*535px;*/ overflow:auto; font-size:0.7em; } CSS-Moz/FF/... QUELLTEXT body { margin: 2px; height: 100%; font-family:Arial, sans-serif; color: black; /*font-size:12pt;*/ /*ie isn't able to scale fonts, if set font-size*/ background-color: #fbfbfb; } /*box that contains the information*/ .content { position: static; margin: 0px 10px 10px 240px; border: 0px solid black; background-color: #fbfbfb; padding: 0px 10px 10px 10px; } /*box the contains the navigation*/ .menu { position: fixed; background-color: #fbfbfb; left: 0px; top: 0px; width: 220px; height : 100%; /*535px;*/ overflow:auto; font-size:0.7em; padding-top:5px; padding-left:5px; } Browserweiche in jeder HTML-Datei im Head QUELLTEXT <!--[if gte IE 5]> <link href="css/ie5.css" rel="stylesheet" type="text/css"> <![endif]--> Grobstruktur der Seiten QUELLTEXT <html> <head> ... <link href="css/other.css" rel="stylesheet" type="text/css"> <!--[if gte IE 5]> <link href="css/ie5.css" rel="stylesheet" type="text/css"> <![endif]--> </head> <body> <div class="menu"> ... <div> <div class="container"> <div class="content"> ..... </div> </div> </body> Das arbeitet auf meiner Seite bestens mit den meisten mir bekannten Browsern. Der Beitrag wurde von i.b.g bearbeitet: 28.07.2005 - 10:39 |
|
|
28.07.2005 - 9:39
Beitrag
#7
|
|
Rookie Gruppe: User Beiträge: 8 Mitglied seit: 15.06.2005 Mitglieds-Nr.: 5.198 |
Hallo.
Dank an alle Na, hab ich ja wieder etwas zum spielen! Robert |
|
|
30.07.2005 - 20:14
Beitrag
#8
|
|
is getting harder Gruppe: User Beiträge: 28 Mitglied seit: 12.06.2005 Mitglieds-Nr.: 5.192 |
[SNIP]
. . QUELLTEXT position: expression("absolute"); top: expression(parseInt(document.body.scrollTop + 40)); [/SNIP] Ja, aber halt mit Java....und an so einer sensiblen Stelle des Pagedesigns würde ich mich nicht darauf verlassen wollen, das jeder Java aktiviert hat. Mal sehen ob der IE7 die CSS-Spezifikationen besser intus hat Schaun mer mal, und viel Dank. TS |
|
|
31.07.2005 - 11:24
Beitrag
#9
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hallo,
ZITAT(TS) ...aber halt mit Java....und an so einer sensiblen Stelle des Pagedesigns würde ich mich nicht darauf verlassen wollen... Sicher, das schrieb ich auch schon, es ist mit JS Kombiniert und daran 'kleben' sicherlich Nachteile. Genau aus dem von Dir beschriebenenen Grund, habe ich es damals aus meiner webseite wieder entfernt! So sehr ich dieses Gimick auch mochte. cu Conny |
|
|
31.07.2005 - 13:13
Beitrag
#10
|
|
is getting harder Gruppe: User Beiträge: 28 Mitglied seit: 12.06.2005 Mitglieds-Nr.: 5.192 |
@i.b.q.
Hey! Sehr elegante Lösung....bin begeistert, vor allem ohne Java . Vielen Dank dafür. Habe übrigens die IE5-Variante durch meine Browsermühle laufen lassen, und festgestellt, daß man sich zumindest bei diesen Browsern die "Weiche" sparen kann: IE6 SP2 FireFox 1.0.6 Netscape 7.1 und 8.0.1 Opera 7.22 und 8.02 Dann noch flugs einen Blick in die Web-Statistik eines Kunden geworfenund festgestellt, das (zumindest für diese Site) mit Firfox/Mozilla und IE6 98.57% aller Besucher abgedeckt sind. Ziemlich sichere Sache, wie ich meine, und wieder mal eine wo man sich fragt, wieso man da nicht früher darauf gekommen ist . Gruss, TS Der Beitrag wurde von TheSourceV2 bearbeitet: 31.07.2005 - 13:14 |
|
|
Google Bot |
Beitrag
#
|
Google Ads |
|
|
|
Vereinfachte Darstellung | Aktuelles Datum: 26.04.2024 - 7:19 |