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

[Auge]

Hallo

Ja, aber halt mit Java

<gebetsmuehle>JavaScript, nicht Java.</gebetsmuehle>

und an so einer sensiblen Stelle des Pagedesigns würde ich mich nicht darauf verlassen wollen, das jeder Java aktiviert hat.

Dann scrollt die Navigation halt mit. Das sollte ja wohl kein Problem sein, oder? Was eine weitere Frage aufwirft: Wie kommt ein Benutzer der Seite an die vollständige Navigation, wenn die Höhe der Navigation größer ist, als die Höhe des Browserfensters? Mit position:fixed; bleibt sie ja immer an der gleichen Stelle.

Mal sehen ob der IE7 die CSS-Spezifikationen besser intus hat

Laut IEBlog soll er auf die vollständige Unterstützung von CSS 2.0 aufgebohrt werden, sowie auch die bereits bekannten Features von CSS 2.1 verarbeiten.

Tschö, Auge

[i.b.g]

Hallo,

da sind einige Leute aber völlig anderer Meinung (ohne alte Klischees bedienen zu wollen)

>> Guckst du hier! <<

[Auge]

Hallo

Ich bin beileibe kein Fan des MSIE (benutze selbst seit über vier Jahren den Mozilla). Allerdings geht aus der Heise-Meldung nicht hervor, worauf sich die Kritik bezieht.

Die erste Beta ist, soweit ich es gelesen habe, nichts weiter als ein MSIE 6 mit zwei Bugfixes (soweit es die Unterstützung von CSS angeht). Allerdings sollen im Verlauf der weiteren Entwicklung weitere Bugs beseitigt und CSS-Features (z.B. Kind-, Attribut- und Folgeselektoren) hinzugefügt werden.

Wir müssen aber davon ausgehen, dass der MSIE auch weiterhin einen großen Marktanteil haben wird. Auch wenn der neue IE nur für WIN XP und seine(n) Nachfolger gedacht ist, was neue Probleme heraufbeschwört. Ignorieren hilft also nichts, trotz aller Kritik und Boykottaufruf.

Was den Acid 2-Test angeht, es gibt nicht sehr viele browser, die den knacken. Zu denen, die das schaffen, gehören auch die beiden größten Konkurrenten (Moz/Opera) unter Windows nicht.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 03.08.2005 - 18:45

[TheSourceV2]

Moinsen !

<gebetsmuehle>JavaScript, nicht Java.</gebetsmuehle>

GnaGnaGnaGna....hast ja recht; Fehler meinerseits....

Andereseits, eine Navigation auf Basis von Java-Appletts ?!? Gibt es doch bestimmt auch....

Dann scrollt die Navigation halt mit. Das sollte ja wohl kein Problem sein, oder? Was eine weitere Frage aufwirft: Wie kommt ein Benutzer der Seite an die vollständige Navigation, wenn die Höhe der Navigation größer ist, als die Höhe des Browserfensters? Mit position:fixed; bleibt sie ja immer an der gleichen Stelle.

Spätestens wenn einem bei einer sehr textlastigen Site das Scrollrad aus der Maus kullert und sich der Zeigefinger verkrampft, weiss man eine ständig erreichbare und zugängliche Site-Navigation zu schätzen; und die Navigation von der Höhe so gross anzulegen, daß mann scrollen muss, um alle Steuerelemente erreichen zu können : Aua (IME)!

Und für ganz harte Fälle gibt es ja noch

QUELLTEXT

overflow:auto;

Wobei natürlich Site-Design IMHO eine Sache ist, über die sich vortrefflich streiten läßt....

Laut IEBlog soll er auf die vollständige Unterstützung von CSS 2.0 aufgebohrt werden, sowie auch die bereits bekannten Features von CSS 2.1 verarbeiten.

Einen Standard zu implementieren ist eine Sache - was die eigentlichen Probleme bereitet ist die Umsetzung in der Darstellung. Man betrachte einfach mal was Mozilla/FireFox mit "padding" so alles in der Darstellung anstellt

Es bleibt also spannend

Guten Start in die Woche an Alle,

TS

[i.b.g]

Hallo,

Man betrachte einfach mal was Mozilla/FireFox mit "padding" so alles in der Darstellung anstellt

Genau das, was in der Spezifikation steht. Wenn man dieses >> Box model << erst einmal verstanden hat, dann ist alles andere erklärlich. Nur wird es eben nicht von allen Browser so umgestzt, wie die Spezifikation es vorgibt. Und dann gibt es Design-Probleme.

Der Beitrag wurde von i.b.g bearbeitet: 08.08.2005 - 6:43

[TheSourceV2]

Hallo....

Wenn man dieses >> Box model << erst einmal verstanden hat, dann ist alles andere erklärlich.

Ohrfeige angekommen; habe mich von einer fehlerhaften Erinnerung an Dan Shafer's "HTML Utopia" in die falsche Richtung jagen lassen (Stichwort "Mozilla-Bug").

Spezifikation gelesen und nun wirklich verstanden und die Buchseiten nochmals in den richtigen Zusammenhang gebracht


Danke,

TS

[Conny]

Ja, Ingo vielen Dank!
Die Seite rückt das Ganze wieder ins rechte Licht.
Ich habe sie sogar gebookmarkt (neudeutsch)

cu
Conny

[i.b.g]

Hallo,

ich habe mir das Teil >>heruntergeladen<< und lokal installiert, da muss ich nicht online gehen, um nachzulesen.

[Auge]

Hallo

<gebetsmuehle>JavaScript, nicht Java.</gebetsmuehle>

GnaGnaGnaGna....hast ja recht; Fehler meinerseits....

hehehe

Andereseits, eine Navigation auf Basis von Java-Appletts ?!? Gibt es doch bestimmt auch....

Ja sowas gibt es. Ich habe aber mit meinem Browser, damals ohne Java-Runtime, so manches mal vor verschlossenen Türen (Links) gestanden. So macht man eine Seite für so manchen unbenutzbar. Schließlich gibt es einerseits Firmennetze, wo auf den Clients keine Runtime installiert sein darf und andererseits werden auch andere Geräte nicht immer eine Runtime haben. Ich vermute das mal keck für Braillezeilen, Screenreader und bestimmt auch so manchen PDA. Und zumindest letztere gewinnen mehr und mehr an Bedeutung.

Dann scrollt die Navigation halt mit. Das sollte ja wohl kein Problem sein, oder? Was eine weitere Frage aufwirft: Wie kommt ein Benutzer der Seite an die vollständige Navigation, wenn die Höhe der Navigation größer ist, als die Höhe des Browserfensters? Mit position:fixed; bleibt sie ja immer an der gleichen Stelle.

Spätestens wenn einem bei einer sehr textlastigen Site das Scrollrad aus der Maus kullert und sich der Zeigefinger verkrampft, weiss man eine ständig erreichbare und zugängliche Site-Navigation zu schätzen; und die Navigation von der Höhe so gross anzulegen, daß mann scrollen muss, um alle Steuerelemente erreichen zu können : Aua (IME)!

Und für ganz harte Fälle gibt es ja noch

QUELLTEXT

overflow:auto;

Wenn die Navigation so viele Menüpunkte hat, dass sie nicht mehr auf eine Bildschirmseite passt, ist es eben so. Zumal du nicht wissen kannst, wie groß das Browserfenster des Benutzers ist. Nicht jeder wird das Browserfenster im Vollbildmodus anzeigen lassen. Dies gilt speziell für größere Bildschirmauflösungen, die man eher dazu benutzt, auf mehrere Programmfenster gleichzeitig zuzugreifen, sie somit auch gleichzeitig anzuzeigen.

Man kann in so einem Fall natürlich mit overflow:scroll; oder auto; arbeiten. Da gibt es aber auch wieder Leute, die darauf verweisen, dass der Benutzer nicht gewöhnt ist, mitten im Dokument auf Scrollbalken zu stoßen (Textfelder in Formularen lassen grüßen!). Den Einsatz sollte man halt genau abwägen und dann auch dazu stehen.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 12.08.2005 - 14:59

[Google Bot]