Feststehendes Menü, in CSS statt Frames -machbar? Einstellungen

[LukyLuke]

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

[Conny]

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

[Conny]

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

[TheSourceV2]

Ä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

[Conny]

...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

[i.b.g]

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

[LukyLuke]

Hallo.
Dank an alle
Na, hab ich ja wieder etwas zum spielen!

Robert

[TheSourceV2]

[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

[Conny]

Hallo,

...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

[TheSourceV2]

@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]