feste Navigatiobsleiste
kerle-perle
- html
Hallo,
ich habe eine Frage:
Ích teile das Fenster in die klassische Form oben Header, links Navi und Mitte Content mittels Layer ein.
Wenn ich jetzt den Content-Teil scrolle, ist es dann möglích den Header und die Navileiste fest stehen zu lassen? (Wie man es bei Frames kennt)
Danke für Eure Hilfe im voraus und viele Grüße!
aloha heja he
Wenn ich jetzt den Content-Teil scrolle, ist es dann möglích den Header und die Navileiste fest stehen zu lassen? (Wie man es bei Frames kennt)
position:fixed;
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position
man liest sich
Wilhelm
Super elegante Lösung!
Gruss Stefan
aloha heja he
Super elegante Lösung!
Allerdings nicht fuer den IE ;-)
Da muss man wie http://www.fabrice-pascal.de/artikel/posfixedie6/index.php etwas tricksen.
man liest sich
Wilhelm
Hallo,
position:fixed;
Finde ich persoenlich grosse Scheisse. SCNR.
Dann noch lieber Frames - die kann man als Benutzer wenigstens knacken,
und man kann in den einzelnen Frames scrollen, wenn man nicht alles sieht.
Mit position:fixed verschwendet der Autor wertvollen Bildschirm-Platz des Benutzers.
Es gibt IMHO nichts, was so wichtig waere, dass man es "immer sehen muss".
Und wenn der Bildschirm klein ist und der Autor nicht schlau genug war, mit
einer overflow-Angabe vorzusorgen, sieht man unter Umstaenden nicht einmal
das ganze Menue, hat aber keine Chance, den Rest zu sehen.
So, nach dieser Polemik noch zwei Links zum Thema, die vielleicht helfen,
einige der Fehler und Probleme zu vermeiden, die man mit position:fixed kriegt:
http://www.jendryschik.de/wsdev/css/fixed/
http://molily.de/css-position-fixed
Gruesse,
Thomas
Hi,
Mit position:fixed verschwendet der Autor wertvollen Bildschirm-Platz des Benutzers.
Es gibt IMHO nichts, was so wichtig waere, dass man es "immer sehen muss".
grundsätzlich stimme ich Dir ja zu, aber ich sehe auch Ausnahmen. Während ein fix positionierter Header eigentlich immer Platzvergeudung ist, kann eine feststehende Navigation am Seitenrand durchaus Sinn machen, da der übrige Platz zur Anzeige von Fließtext i.d.R. nicht nur ausreicht, sondern oft aus Gründen der Lesbarbeit limitiert wird.
Wo siehst Du z.B. den Unterschied zwischen einem Design, bei dem der Inhaltsbereich einen festen Randabstand nach links hat und sich dadurch nicht unter die Navigation schieben kann?
Eine feststehende Navigation erspart hier zumindest das zurückscrollen.
Aber zum Thema: auf einen feststehenden Header würde ich ncht nur aus Platzgründen verzichten, sondern auch, weil sich das (im Gegensatz zu einem feststehenden Seitenbereich) nur sehr schlecht und nicht 100%ig für den IE umsetzen läßt.
freundliche Grüße
Ingo
Hallo,
Wo siehst Du z.B. den Unterschied zwischen einem Design, bei dem der Inhaltsbereich einen festen Randabstand nach links hat und sich dadurch nicht unter die Navigation schieben kann?
Ich denke da vor allem an "kleine" Bildschirme.
Handys, Handhelds, Sehbehinderte, ...
(Und nein, dass man bei einigen Browsern CSS abschalten kann,
lasse ich diesmal nicht gelten.)
Nehmen wir mal ein Beispiel:
Links Navigation, 200px breit.
Rechts Content, mit einem 500px breiten Bild.
Bildschirmbreite: 640px.
Bei einer Layout-Tabelle oder entsprechenden CSS-Konstrukten
fuer Zwei-Spalten-Layouts scrolle ich einmal horizontal nach rechts.
Das Menue ist jetzt nur noch teilweise sichtbar, was mir voellig egal
ist, denn ich will ja den Content sehen, und das gelingt auch: ich sehe
jetzt ungestoert das ganze Bild auf einmal.
Bei Frames oeffne ich nur die Seite mit dem Content in einem
eigenen Fenster und sehe nun das ganze Bild auf einmal.
Bei position:fixed habe ich keine Chance, die Navigation
wegzuschieben und das ganze Bild auf einmal zu sehen.
(Nein, ich meine nicht: nur das Bild - via Kontextmenue,
Adresse kopieren oder so. Das gilt nicht. Ich will das Bild
in seinem Zusammenhang auf der Seite selbst sehen.)
Mit etwas Glueck (d.h. dank "richtiger" Reihenfolge im HTML
oder mit Angabe von z-indexen) ueberlagert der Content
beim horizontalen Scrollen die Navigation, aber schoen ist
sowas nicht.
Ich lasse mich aber gerne durch ein Online-Beispiel (am liebsten
real, nicht "Lorem Ipsum" Testcase) eines besseren belehren. ;-)
Gruesse,
Thomas
Hi,
Nehmen wir mal ein Beispiel:
Links Navigation, 200px breit.
Rechts Content, mit einem 500px breiten Bild.
Bildschirmbreite: 640px.
Bei position:fixed habe ich keine Chance, die Navigation
wegzuschieben und das ganze Bild auf einmal zu sehen.
zugegeben, sowas kann ziemlich ärgerlich werden und sollte natürlich beachtet werden. Bei solchen Konstruktionen würde ich Deinem geänderten Beitragstitel auch zustimmen.
Ich lasse mich aber gerne durch ein Online-Beispiel (am liebsten
real, nicht "Lorem Ipsum" Testcase) eines besseren belehren. ;-)
ok, z.B. http://www.dm-formationen2004.de/impressum.html - wobei hier die Startseite und "Karten" leider auch gleichzeitig ein Negativbeispiel darstellen, denn diese benötigen schon mindestens ein ca. 800px breites Fenster.
freundliche Grüße
Ingo
Hallo,
Danke. Habs angeguckt mit Mozilla.
Der Content-Bereich _dieser_ Seite enthaelt kein breites Bild oder aehnliches.
Somit laesst sich das Fenster auf ca. 550 Pixel verschmaelern, ohne dass
es zu Problemen kommt.
Bei noch schmalerem Fenster erscheint dann ein horizontaler Scrollbalken,
der jeweils nur den Content scrollt, wobei es zu den genannten
Ueberlagerungen kommt, d.h. der Inhalt verschwindet hinter der Navigation,
vermutlich, weil Du im HTML-Quelltext die Reihenfolge 1. Inhalt, 2. Navi hast.
Abhilfe koenntest Du ggf. mit (z.B. absoluter) Positionierung der Inhalts
und z-index schaffen. Auf eigenes Risiko!
Wie Du richtig erkannt hast, tritt das von mir beschriebene Problem
eben vor allem dort auf, wo der Content-Bereich "breite" Inhalte hat,
also beispielsweise Bilder oder Tabellen, wie z.B. hier:
http://www.dm-formationen2004.de/karten.html
http://www.dm-formationen2004.de/ort.html
Vorbildlich finde ich an diesen Seiten uebrigens, dass sie dank einem
guten Print-Stylesheet gut ausdruckbar sind. Bravo!
Freundliche Gruesse,
Thomas
(begeisterter Hobby-Taenzer - ohne Turniere gluecklich ;-)
Hi,
Abhilfe koenntest Du ggf. mit (z.B. absoluter) Positionierung der Inhalts
und z-index schaffen. Auf eigenes Risiko!
nein danke.. ich finde in diesem Ausnahmefall eine funktionierene Navigation wichiger als den Inhalt, der dann halt etwas verdeckt wird. Außerdem erwarte ich auf diesen Seiten ehrlich gesagt keine Besucher mit weniger als 800px (möglicher) Fensterbreite.
Vorbildlich finde ich an diesen Seiten uebrigens, dass sie dank einem
guten Print-Stylesheet gut ausdruckbar sind. Bravo!
Danke. War mir auch gerade in diesem Fall sehr wichtig. Am meisten Arbeit hatte mir hierbei übrigens der Sitzplan bei 'Karten' gemacht (Hintergrundfarben werden ja kaum mitgedruckt..).
freundliche Grüße
Ingo
aloha heja he
Ich denke da vor allem an "kleine" Bildschirme.
Handys, Handhelds, Sehbehinderte, ...
Ich bitte allerdings zu beachten, dass nicht alle Inhalte im weiten Netz fuer Handys oder Handhelds geeignet sind und dies bewusst. Es gibt Content, der einfach einen normalen Monitor voraussetzt. Klar, ich hoere Deinen Einwand "Dann ist es kein guter Content", aber Du darfst Deine Einstellung nicht immer zum Mass fuer Andere machen. Ich z.B. sehe das Netz nicht mehr nur als reines Nachschlagewerk sondern auch als visuelle Plattform.
Bei position:fixed habe ich keine Chance, die Navigation
wegzuschieben und das ganze Bild auf einmal zu sehen.
(Nein, ich meine nicht: nur das Bild - via Kontextmenue,
Adresse kopieren oder so. Das gilt nicht.
Die Fixierung hat Vor- und Nachteile wie vieles was mit HTML/CSS moeglich waere, aber bei diesem macht dieser Browser Mucken, bei anderen Kniffen ein anderer, beim naechsten der Hardware-Client.
Irgendeinen Tod stirbt man IMHO immer.
man liest sich
Wilhelm
Hi Wilhelm,
Ich bitte allerdings zu beachten, dass nicht alle Inhalte im weiten Netz fuer Handys oder Handhelds geeignet sind und dies bewusst.
selbst wenn sie sich eignen würden, so ignorieren die meisten das für sie vorgesehene Stylesheet. Wäre dem nicht so, ließen sich viele Inhalte einfacher an die beschränkten Platzverhältnisse anpassen.
Es gibt Content, der einfach einen normalen Monitor voraussetzt.
Womit wir wieder beim Thema Handheld wären? *g*
Bei position:fixed habe ich keine Chance, die Navigation
wegzuschieben und das ganze Bild auf einmal zu sehen.
Wenn ein Teil daneben mitscrollt auch nicht. Das ist kein Argument gegen position:fixed, sondern eines für Layout per float.
Irgendeinen Tod stirbt man IMHO immer.
Naja, solang's nur ein kleiner ist...
Grüße,
Roland
aloha heja he
selbst wenn sie sich eignen würden, so ignorieren die meisten das für sie vorgesehene Stylesheet. Wäre dem nicht so, ließen sich viele Inhalte einfacher an die beschränkten Platzverhältnisse anpassen.
Leider.
Bei position:fixed habe ich keine Chance, die Navigation
wegzuschieben und das ganze Bild auf einmal zu sehen.Wenn ein Teil daneben mitscrollt auch nicht. Das ist kein Argument gegen position:fixed, sondern eines für Layout per float.
Grau ist alle Theorie. ;-) Bei [pref:t=76753&m=442348] konnte ich die Probleme mit float/clear nicht loesen und bin wieder brav zu absolute (IE) und fixed (Rest) gedackelt.
BTW: Die Chancen-Aussage war nicht von mir.
man liest sich
Wilhelm
Hallo Roland,
selbst wenn sie sich eignen würden, so ignorieren die meisten [Handhelds/Handys] das für sie vorgesehene Stylesheet. Wäre dem nicht so, ließen sich viele Inhalte einfacher an die beschränkten Platzverhältnisse anpassen.
Genau. Das ist ein grosser Jammer... ;-)
Bei position:fixed habe ich keine Chance, die Navigation
wegzuschieben und das ganze Bild auf einmal zu sehen.
Wenn ein Teil daneben mitscrollt auch nicht.
Was meinst Du?
Ich meine folgendes: Layout-Tabelle oder Spalten-Layout mit CSS
(z.B. mit position:absolute oder mit margin-left fuer den Content).
Linke Spalte Navigation, rechte Spalte Content mit breitem Bild oder so.
Hier laesst sich eben durch horizontales Scrollen die Navigation wegschieben
und der Content - so er denn auf den Bildschirm passt - auf einmal und
ohne Ueberlagerungen sehen.
Das ist kein Argument gegen position:fixed, sondern eines für Layout per float.
Jaja, float-Loesungen waeren schoen... ;-)
Freundliche Gruesse,
Thomas
Ja, aber nicht 100% statisch...
Du kannst Layer und Div Bereiche mit CSS und JavaScript (=>DHTML) so kontrollieren, dass sie immer an einer festen stelle sind.
Dazu schau dir mal das Beispiel unter http://selfhtml.teamone.de/dhtml/beispiele/navigation.htm an.
Wenn Du den Inhalt eines Tabellenfeldes scrollen willst, kannst Du das über einen CSS Befehl steueren, der aber meines Wissens nicht dokumentiert ist. Beispiele hierzu findest Du auf Directbox.com (die lassen die Emails auf diese weise scrollen). Ich komme von hier aus leider nicht auf diese seite, womit ich dir auch nicht den code raussuchen kann, sorry.
Gruss, Stefan
Hallo.
Wenn Du den Inhalt eines Tabellenfeldes scrollen willst, kannst Du das über einen CSS Befehl steueren, der aber meines Wissens nicht dokumentiert ist.
Aktualisiere dein Wissen auf http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#overflow -- und vergiss in diesem Zusammenhang den Begriff "Befehl".
MfG, at