[CSS] Variabler Abstand zu den Seiten mit position:fixed

[[Mitglied 17ad…]]

Hallo allerseits,

ich habe ein Programmierproblem. Ich habe vorerst drei Divs. Zwei davon werden zur Navigation eingesetzt, die sollen den Wert position:fixed haben. Eins der Divs beinhaltet den Text, das soll sich bewegen. Soweit erstmal kein Problem.

Das Problem ist jetzt der Abstand zu den Seitenrändern. Ich würde ihn gerne mit Prozentzahlen angeben; dabei sollen aber die Abstände zwischen den Divs gleich bleiben. Jetzt hätte ich ein Containerdiv um alles gelegt, und dann die einzelnen Divs mit position:relative passend eingebaut. und dann hätte ich die Prozentangaben für das Container-Div angegeben. Die fixierten Divs lassen sich aber logischerweise nicht in einen Container setzen. Gibts da eine Lösung? Oder muss ich mit den üblichen Möglichkeiten auskommen?

Eine Testseite (noch ohne Container, weils ja nicht geht) findet sich hier: http://home.mnet-online.de/hta/test/

Vielen Dank schonmal.

Grüße,

Christoph

[[Mitglied Cajo…]]

Kannst du mal eine Skizze machen, auf der du einzeichnest, was variabel und was fest sein soll? Ich tu mich grad schwer damit zu verstehen, was genau du meinst.

[[Mitglied 17ad…]]

Ja, klar.

Blau markiert ist, was sich beim scrollen bewegen soll. (bisher positioniert mit der Eigenschaft "absolute")

Rot markiert ist, was sich beim scrollen nicht bewegen soll. (bisher positioniert mit der Eigenschaft "fixed")

Ich nummeriere jetzt mal durch, damit ihr sagen könnt was ihr evtl. nicht versteht:

(1) Den grauen bereich links, also den Abstand zur linken Seite, möchte ich mit Prozentzahlen definieren und nicht mit Pixelwerten.

(2) Der abstand zwischen den beiden weißen Säulen (nebeneinander) soll immer der gleiche sein (10px), auch wenn sich der Abstand. aus (1) verändert.

Frage: Wie kann ich das erreichen? Kann ich es überhaupt erreichen?

Was nicht geht:

Mit einem Container-Div (also einem Div, innerhalb dessen im Quelltext alle anderen Divs stehen) ist das Problem, dass die Eigenschaft fixed bei den Blauen Divs (siehe Skizze) dafür sorgt, dass sie nicht teil des Container-Divs sind.

[[Mitglied Nina…]]

Vielleicht steh ich jetzt komplett auf dem Schlauch, aber wenn Du einfach nicht das ganze Fenster scrollen lässt, sondern nur den blauen Div in sich (overflow: auto), dann brauchste die andern auch nicht fixed positionieren, da sie von der Scrollerei eh nicht betroffen sind.

(Hatte genau dieses Problem auch kürzlich grade und war sehr glücklich, als es sich dergestalt löste. :) )

[[Mitglied Nina…]]

& noch was: Die Navi in dem Balken ganz oben würd ich eher empfehlen als Grafiken einzubauen. Bei mir (Mac, FiFo3) wird das umgebrochen, weil der Text zu groß kommt, und das sieht doof aus. 8) :)

[Ralf Herrmann]

Die fixierten Divs lassen sich aber logischerweise nicht in einen Container setzen.

Ja, logisch, weil sie ja mit fixed aus dem Dokumentfluss herausgenommen werden. Ich versteh gar nicht warum da ein Container drumrum soll?! Lass den obigen fixed-Container einzeln und gib ihm seinem Rand und genauso bekommt der Text-Container (nicht fixed!) seinen eigenen Rand und nach oben einen entsprechend großen, damit er beim ersten Laden der Seite unterhalb des fixed-Containers sitzt, weil zu dem hat er ja sonst keine Beziehung mehr im Textfluss.

[[Mitglied 17ad…]]

& noch was: Die Navi in dem Balken ganz oben würd ich eher empfehlen als Grafiken einzubauen. Bei mir (Mac, FiFo3) wird das umgebrochen, weil der Text zu groß kommt, und das sieht doof aus. 8) :)

Danke für den Hinweis. Hast Du die Schriftgröße größer als "normal" eingestellt? Sonst dürfte das nämlich eigentlich nicht passieren, wenn ich richtig denke. Aber ich könnte auch statt Grafiken einfach die Schriftgröße in pt angeben, dann reagiert sie glaub ich auch nicht mehr auf die Browseranweisung nach einer größeren Schrift...(oder doch?!)

Vielleicht steh ich jetzt komplett auf dem Schlauch, aber wenn Du einfach nicht das ganze Fenster scrollen lässt, sondern nur den blauen Div in sich (overflow: auto), dann brauchste die andern auch nicht fixed positionieren, da sie von der Scrollerei eh nicht betroffen sind.

(Hatte genau dieses Problem auch kürzlich grade und war sehr glücklich, als es sich dergestalt löste. :) )

Danke auch dafür. Das ist auf jeden Fall eine praktikable Lösung, daran hatte ich gar nicht gedacht! Ich finds allerdings eher Unschön, wenn ich ehrlich bin; mich stört da der Scrollbar "im Design" dann. Aber als Notlösung zieh ichs auch jeden Fall mal in Betracht.

Lass den obigen fixed-Container einzeln und gib ihm seinem Rand und genauso bekommt der Text-Container (nicht fixed!) seinen eigenen Rand und nach oben einen entsprechend großen, damit er beim ersten Laden der Seite unterhalb des fixed-Containers sitzt, weil zu dem hat er ja sonst keine Beziehung mehr im Textfluss.

Danke auch dir. Diesmal blick ich glaub ich nicht ganz durch: Kann ich denn unter das Fixed-Div (oben) einfach ein andere setzen, das sich anreiht?

Edit: Ich glaub jetzt versteh ich dich. Was du meinst ist glaub ich genau das was ich jetzt grade mache. Das Problem ist aber, dass ich so die Prozent-Abstände nach Links nicht machen kann, weil ich so den kleinen Fixed unten rechts nicht in Verbindung mit dem Textdiv bekomme...

[[Mitglied Nina…]]

Meine Schriftgröße ist meines Wissens normal eingestellt. Aber mit den Schriftgrößen in unterschiedlichen Betriebssystemen und Browsern ist das ja so ein Ding. Ein Biest! (Schau Dir Deine Seite mal hiermit an: Browsershots.)

Ich dächte, das sicherste Maß für eine fixierte Schriftgröße ist nicht pt, sondern px. Aber auch das bietet bei weitem keine Garantie.

wenn Du einfach nicht das ganze Fenster scrollen lässt, sondern nur den blauen Div in sich (overflow: auto)

Danke auch dafür. Das ist auf jeden Fall eine praktikable Lösung, daran hatte ich gar nicht gedacht! Ich finds allerdings eher Unschön, wenn ich ehrlich bin; mich stört da der Scrollbar "im Design" dann.

Jo, das ist üblicherweise das Argument dagegen. Zumindest für «alle Browser außer MSIE» kann man das allerdings easy umgehen (und bei Windows hat es mich jetzt nicht soo gestört, da die zumindest keine quietschblauen Scrollbalken haben).

Ich habs bei dieser Website* so gelöst, dass ich dem scrollenden Div statt einer Breite nur einen left: [whatever] und right: 0 zugewiesen habe,** damit zieht er den Scroll-Container rechts bis ganz an den Rand (natürlich overflow: auto). Dann einen zweiten Container für den Text dort hineinschachteln, in Deinem Fall mit fixer Breite (aber ohne Höhenangabe!), damit der Text auf der Breite bleibt, wo er sein soll; dann erscheint der Scrollbalken wie gewohnt «außen» am Rand des Fensters.

Du müsstest dann nur sichergehen, dem unteren Menü da rechts einen höheren z-index zuzuweisen als dem Scrolldingens, damit es «darüberliegt» und anklickbar ist / funktioniert.

* Gestaltung ist nicht von mir, nur die Umsetzung.

** Das right=0 frisst der IE leider nicht. Da müsste man dann ein alternatives Stylesheet definieren, halt mit fixer Breite …

[Ralf Herrmann]

Danke auch dir. Diesmal blick ich glaub ich nicht ganz durch: Kann ich denn unter das Fixed-Div (oben) einfach ein andere setzen, das sich anreiht?

Ja, natürlich. Anders geht es doch gar nicht. Allerdings "reiht" sich das nicht im Textfluss an, sondern eben optisch durch deine Positionierung. Wenn der Header fixed ist, beeinflusst er ja nichts anderes mehr. Der blaue Textcontainer muss also einfach zu seinem Ursprung am oberen Seitenrand entsprechend verschoben werden, d.h. einen entsprechendes Padding oder Margin nach oben haben.

. Das Problem ist aber, dass ich so die Prozent-Abstände nach Links nicht machen kann, weil ich so den kleinen Fixed unten rechts nicht in Verbindung mit dem Textdiv bekomme...

Doch, klar. Versuche einfach die blauen und roten Container als völlig unabhängig voneinander zu verstehen, dann klappt das. Übrigens müssen die blauen überhaupt nicht absolut positioniert werden sondern einfach ganz normal static mit entsprechendem Rand.

[[Mitglied 17ad…]]

Übrigens müssen die blauen überhaupt nicht absolut positioniert werden sondern einfach ganz normal static mit entsprechendem Rand.

Ach, ich kann auch Fixed mit Rand kombinieren. NA dann ist ja alles kein Problem, glaube ich. Werd mich nochmal Spielen, danke!

Ich habs bei dieser Website* so gelöst, dass ich dem scrollenden Div statt einer Breite nur einen left: [whatever] und right: 0 zugewiesen habe,** damit zieht er den Scroll-Container rechts bis ganz an den Rand (natürlich overflow: auto). Dann einen zweiten Container für den Text dort hineinschachteln, in Deinem Fall mit fixer Breite (aber ohne Höhenangabe!), damit der Text auf der Breite bleibt, wo er sein soll; dann erscheint der Scrollbalken wie gewohnt «außen» am Rand des Fensters.

Du müsstest dann nur sichergehen, dem unteren Menü da rechts einen höheren z-index zuzuweisen als dem Scrolldingens, damit es «darüberliegt» und anklickbar ist / funktioniert.

Danke für die ganzen Hinweise. Gut zu wissen. Und mit dem Scrollbalken rechts werd ich mich mal spielen, falls ich mit dem, was ich mir nach Ralfs Beitrag vorstelle, nicht klappt.

Also nochmal Danke euch beiden. Ich lasse von mir hören!

Grüße,

Christoph

[[Mitglied Proe…]]

Danke für den Hinweis. Hast Du die Schriftgröße größer als "normal" eingestellt? Sonst dürfte das nämlich eigentlich nicht passieren, wenn ich richtig denke. Aber ich könnte auch statt Grafiken einfach die Schriftgröße in pt angeben, dann reagiert sie glaub ich auch nicht mehr auf die Browseranweisung nach einer größeren Schrift...(oder doch?!)

Und wenn jemand ein extrem hoch auflösendes Display hat? Oder schlechte Augen? Meiner Meinung nach, solltest du den Leuten ihre Schrifteinstellungen lassen (also auch nicht unbedingt eine Grafik verwenden ...) Außerdem wäre es nett wenn du auf der Seite statt "width" "max-width" verwenden würdest, sonst muss man auf kleinen Bildschirmen (Net-Books, Smart-Phones etc.) vertikal scrollen.

Herzlichen Dank

Proedie

[[Mitglied 17ad…]]

Vertikal scrollen? Das ist doch normal und so gedacht? Du meinst horizontal, oder? Oder bring ich grade was durcheinander?

max-width ermöglich dann, dass es auch schmäler dargestellt wird?

Du hast recht, dass man jedem seine Schrifteinstellung lassen sollte. Das war auch gar nicht irgendwie negativ gemeint, sondern eigentlich wertneutral. Das Problem ist nur: Wenn ich es so hab wie jetzt, dann hauts mir das Design bei dem ein oder anderen durcheinander, wenn ich Grafiken hab, kanns der ein oder andere gar nicht lesen. Ich muss das mal überdenken und Prioritäten setzen, wie's aussieht. Wenn ichs überhaupt so mache.

Mal eine ganz andere Frage: Wie findet ihr denn das Design grundsätzlich?

Grüße,

Christoph

[[Mitglied Proe…]]

Vertikal scrollen? Das ist doch normal und so gedacht? Du meinst horizontal, oder? Oder bring ich grade was durcheinander?

Ääääääähm, ja. Natürlich. Entschuldige.

max-width ermöglich dann, dass es auch schmäler dargestellt wird?

Jawohl:

max-width: 60em;

bedeutet z. B., dass das Element maximal 60 Geviertstriche breit sein darf, wenn du also eine größere Schrift nimmst, darf die Seite auch breiter werden, vielleicht hilft dir das auch sonst weiter?

Mal eine ganz andere Frage: Wie findet ihr denn das Design grundsätzlich?

Für mich muss eine Seite in erster Linie funktionieren. Wenn sie dann noch gut aussieht, ist das ein Bonus, auf den ich auch verzichten könnte. Technische Spielereien wie JavaScript oder Flash stören mich eher. In sofern gefällt mir deine Seite schonmal sehr gut: Sie ist schlicht. Das mag ich.

Einspaltiger Text gefällt bei bei Websites sowieso besser als zweispaltiger, das ist also für mich eine echte Verbesserung gegenüber deinem alten Entwurf! Dass du dabei auch vom Flattersatz auf Blocksatz umgestiegen bist, gefällt mir persönlich weniger. Blocksatz und Silbentrennung gehören für mich einfach so sehr zusammen, dass Blocksatz im Web (noch) nichts verlohren hat, aber das wäre für mich kein Grund eine Website zu boykottieren (Das wäre der Fall bei Flash und JavaScript, man vergleiche nur die Ladezeiten von http://www.dilbert.com und http://www.dilbert.com/fast -- dazwischen liegen Welten!)

Rein auf den Bonus Gestaltung beschränkend fielen mir nur zwei Verbesserungspunkte ein:

• Die obere Navigation scheint bein Scrollen den Textbereich zu "fressen". Einen kleiner Abstand zwischen den beiden Feldern fände ich nett.[/*:m:1oes3vpy]
• Die Seite wirkt insgesamt ein wenig blass. (Ich weiß, ich weiß, das gehört so.)[/*:m:1oes3vpy]

Lieben Gruß

Proedie

[[Mitglied 17ad…]]

Hallo,

danke für die Kritik, ich werd mal sehen, was ich machen kann. Das mit dem Abstand oben klingt durchaus sinnvoll.

Jetzt spiel ich mich mal endlich wieder ein bisschen. Hatte seit Threaderstellung keine Zeit mehr...

Grüße,

Christoph

PS: Eine Sache noch: Wenn ich mit "em" die Breite definiere (was für den Zweck absolut richtig ist, danke!) dann kann ichs nicht so schön auf die Breite der Grafik anpassen. Grade auch wenn die Schriftgröße verändert wird. Ich kann natürlich die Grafik in ein "div" packen, aber dann ist nicht mehr alles schön genauso breit wie die Grafik. Aber damit muss ich dann wohl leben.

[[Mitglied 17ad…]]

Kann es sein, dass "float" bei Fix positionierten Divs nicht wirkt?

Grüße,

Christoph

[Ralf Herrmann]

Kann es sein, dass "float" bei Fix positionierten Divs nicht wirkt?

Nein, natürlich nicht – deswegen sind sie ja fix.

[[Mitglied 17ad…]]

Dann ist mein Problem so wie du meintest nicht lösbar. Denn es ging mir ja um den Abstand zwischen dem linken (blauen) Div und dem rechten (kleinen roten) Div. Schade. Dann muss ich mir jetzt mal überlegen, ob ich das so mache wie Nina vorgeschlagen hat oder ganz anders. Ihr werdet es sehen. (;

Grüße,

Christoph

[Ralf Herrmann]

Dann ist mein Problem so wie du meintest nicht lösbar. Denn es ging mir ja um den Abstand zwischen dem linken (blauen) Div und dem rechten (kleinen roten) Div.

Doch, klar. Du musst nur anders denken. Du hast quasi 2 Ebenen (fixed und floated), die völlig unabhängig voneinander sind und unabhängig gestaltet werden, aber dann im Zusammenspiel das gewünschte Layout erzeugen.

Nicht bös’ gemeint, aber mir scheint, du stocherst noch etwas wild in der Materie herum, ohne die Grundlagen der unterschiedlichen DIV-Verhalten wirklich verstanden zu haben. Wir können zwar jetzt hier in einem wahrscheinlich endlosen Thread zu dem gewünschten Ergebnis kommen, aber es wäre sicher auf Dauer zweckmäßiger, wenn du dir mal ein gutes Buch zum Thema CSS anschaust. Wenn danach noch konkrete Fragen sind, kann man ja gern weiterhelfen. Aber ansonsten wird das hier ein »Wie-funktioniert-CSS-Thread« …

[[Mitglied Proe…]]

Hallo,

mir hat die Seite http://www.css4you.de sehr geholfen, falls du die noch nicht kanntest.

Proedie

[[Mitglied 17ad…]]

Hallo,

eigentlich meine ich, dass ich mich schon ganz gut mit CSS auskenne. Ich habe mich auch mal eingehend damit befasst. Und keine Sorge, ich fass das nicht als blöd gemeint auf. :D

Dass Fixed und Static dann zwei Ebenen ergeben ist auch klar.

Was mir nur nicht in den Kopf geht ist: Wie soll ich zwischen einem statisch und einem fix definierten Div einen festen, sagen wir mal 10 Pixel breiten Rand bauen, wenn sie auf zwei Ebenen liegen. Genau das ist ja mein Problem. Beim oberen Navigationsdiv und dem darunter liegenden Textdiv ist das einfach. Da sorge für das Textdiv ich einfach für einen passenden Abstand von oben. Aber wie ich das in der waagerechte schaffen soll, ohne beiden Divs absolute Werte zu verpassen, das weiß ich nicht. Wenn das wirklich geht: Hast du dazu evtl. einen passenden Link, der sich genau damit beschäftigt?

Und es sei noch angemerkt: ich weiß eure Bemühungen zu schätzen. Dankeschön!

Grüße,

Christoph

[[Mitglied Cajo…]]

Ich glaube, das wirkliche Problem ist der prozentuale linke Abstand.

Du kannst ohne Probleme dem statisch positionierten Inhaltsbereich sagen „hab nach links 200px abstand“, oder auch 20%. Du kannst das auch dem Impressumsbereich sagen und diesen fixiert positionieren. Aber du kannst bei prozentualem linken Abstand und fester Breite des Inhaltsbereiches dann den Abstand zwischen Inhalt und Impressum nicht bestimmen. Zumindest weiß ich da keine Möglichkeit. Mit einem festen linken Abstand (also z.B. 200px) kannst du alles passend positionieren, hast dann aber in großen Viewports (der Anzeigebereich des Browserfensters) eben ein am linken Rand klebendes Layout, und bei kleinem Viewport auch Probleme, bei denen max-width nicht hilft.

Wenn du ein Element relativ positionierst, beziehen sich absolute Positionierungen auf dieses Element statt auf den Viewport. Leider scheinen sich fixierte Positionen immer auf den Viewport zu beziehen. Fixiert, aber bezogen auf relativ wäre das, was du brauchst, aber nicht geht.

*grad ein bisschen in Eile bin und deshalb vermutlich unverständlich schreib*

[Ralf Herrmann]

eigentlich meine ich, dass ich mich schon ganz gut mit CSS auskenne.

Dann würdest du nicht fragen, warum float bei fixen Containern nicht funktioniert ...

Was mir nur nicht in den Kopf geht ist: Wie soll ich zwischen einem statisch und einem fix definierten Div einen festen, sagen wir mal 10 Pixel breiten Rand bauen, wenn sie auf zwei Ebenen liegen.

Kommt drauf an, mit welchen Einheiten du arbeitest. Wenn du prozentuale Ränder willst, dann sollte auch alles andere in der gleichen Ausrichtung (horizontal/vertikal) prozentual sein. Wenn dann z.B. ein Bereich 60 Prozent breit ist und der andere 35 bleibt logischerweise immer ein Abstand von 5 Prozent stehen. Ein Pixelabstand geht dann logischerweise nicht bzw. würde Probleme machen.

Wenn du generell auf Pixel gehst und ein nichtprozentuales Layout hast, geht das genauso. Notfalls macht man einen Wrapper auf, um einen neuen Ursprung zur Positionierung zu haben (z.B. bei zentrierten Layouts).

[[Mitglied 17ad…]]

Dann würdest du nicht fragen, warum float bei fixen Containern nicht funktioniert ...

Ich weiß, dass das jetzt nach einer Ausrede klingt und es soll auch kein Angriff sein: Aber ich bin ja auf diese Idee erst nach deinem Beitrag gekommen, den ich in diese Richtung falsch interpretiert habe.

Kommt drauf an, mit welchen Einheiten du arbeitest.

Ja, klar. Aber die Divs mit Prozentzahlen auf eine Breite zu definieren mag ich nicht, weil das dann auf meinem Bildschirm zum beispiel viel breiter angezeigt würde als auf einem kleineren. Ursprünglich wollte ich die Breite in Pixel angeben und den abstand von links in Prozent. Dann habe ich aber ja das bekannte Problem. Inzwischen hat mich Proedie dankenswerterweise auf die angabe in "em" gebracht, was ich jetzt auch machen werde. Auch wenn ich dann den Abstand von links wohl mehr oder weniger fest angeben muss. Oder ich lass die Fixed-Sache sein. Das muss ich mir noch überlegen.

Ich glaube, das wirkliche Problem ist der prozentuale linke Abstand.

...

Aber du kannst bei prozentualem linken Abstand und fester Breite des Inhaltsbereiches dann den Abstand zwischen Inhalt und Impressum nicht bestimmen.

Danke, genau das war der Punkt auf den ich von Anfang an rauswollte: ob das geht oder nicht.

Hab ich mich wohl nicht klar genug ausgedrückt?

Grüße,

Christoph