zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bei resize zentriert und fixed zugleich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.01.2012, 21:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2012
Beiträge: 8
cuginoCoso befindet sich auf einem aufstrebenden Ast
Standard bei resize zentriert und fixed zugleich

Hallo,

ich versuche gerade eine Seitenstruktur aufzubauen und habe dabei Probleme.

Ich hätte gerne einen Container in der Mitte der Seite. Also wenn das Fenster resized wird bewegt sich der container mit.

Oben in dem Container ist ein Element was fixed sein soll (also nicht mitscrolled) aber dennoch sich im äußeren Container bewegt, wenn man die Fenstergröße ändert.
Darunter sind 3 weitere Elemente.
Ein Container links (sidebar) die auch wie der header fixed ist aber sich bewegt bei resize.
Dann der content container der scrolled und sich natürlich auch immer mittig hält (der container ist mit dem 960 grid formatiert, also 960 breit, eigentlich glaube ich nicht so wichtig)
und dann noch eine weitere sidebar, rechts, die auch fixed ist

Zur Anschauung hier noch eine skizze
http://dl.dropbox.com/u/4193224/css_problem.jpeg

wenn man das fenster klein zieht dürfen die 3 elemente natürlich nicht umbrechen und untereinander angezeigt werden …

Ich weiß nicht richtig wie man diese Struktur möglichst browserkompatibel aufbaut und freue mich sehr über Tips und Ansätze

Danke
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2012, 05:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Hi cuginoCoso

ich denke mit heutigen CSS Mitteln ist so ein Layout noch gar nicht möglich!

In CSS 3 soll es irgendwann mal die Möglichkeit der Berechnung für Maße geben (siehe Jens Meiert), was zum jetzigen Zeitpunkt aber wohl noch kaum unterstützt werden dürfte. Somit scheidet diese Methode als Praxislösung aus.

Eventuell ließe sich da was mit Java-Script machen, was in der Praxis jedoch auch zu Problemen führen wird, da es das Layout ohne Java-Script zerlegt. Also solltest du dir ein anderes "umsetzbares" Layout ausdenken.


Aber wer weiß, vielleicht haben die Forenprofis ja doch noch eine Lösung parat, schließlich bin ich ja nicht allwissend.

Gruß
Webcoder
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.01.2012, 11:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2012
Beiträge: 8
cuginoCoso befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
danke für die Antwort …

wo liegt denn genau das Problem? Das es so unmöglich ist, war mir dann auch noch nicht bewusst …

ich hab das ganze schon irgendwie halbwegs hingeschoben bekommen, aber es war wirklich dirty und sehr trail & error mäßig.

ich hab versucht container ineinander zu verschachteln, die dann unterschiedliche position styles hatten …

und die fixed elemente in dem zentrierten container bewegen sich auch mit beim skalieren …

derher vermute ich mal das es nicht unmöglich ist …

ich weiß nur nicht wie man das sauber aufsetzen soll …

ich glaube der kniff liegt in cleveren position vererbungen …

weiterhin freu ich mich über tips

Danke
Mit Zitat antworten
  #4 (permalink)  
Alt 23.01.2012, 12:12
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ist der Wrapper, welcher die Contentboxen umfasst immer fest und gleichbleibend breit?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 23.01.2012, 12:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2012
Beiträge: 8
cuginoCoso befindet sich auf einem aufstrebenden Ast
Standard

fest – insofern, dass er immer zentriert ist im browser (also eigentlich flexible)

die kann gerne festgelegt sein …
Mit Zitat antworten
  #6 (permalink)  
Alt 23.01.2012, 12:34
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Mein Frage bzw. die Antwort darauf ist für die Aufgabenstellung maßgeblich entscheidend. Es gibt nämlich nur wenige Möglichkeiten, eine davon ist nach dem heutigen Stand der Technik, wie Webcoder schon schrieb, unmöglich.

Technik 1: Der Wrapper ist flexibel in der Breite, die Main-Contentbox ist flexibel, die Sidebars sind fest definiert: Ohne JS und unschöne Nebenwirkungen unmöglich. Das resultiert daraus, dass die Contentbox nicht weiß wie viel Platz wirklich ist. Bei Prozentangaben werden dann die Abstände zu den Sidebars rechts und links immer größer.

Technik 2: Der Wrapper ist flexibel in der Breite, die Main Contentbox ist flexibeln, die Sidebars sind flexibel: Möglich, allerdings nur mit flexiblen Abständen zwischen den Boxen.
Problem: Hier werden die Äbstände mit zunehmender Größe des Wrappers ebenfalls größer, es entstehen Lücken. Dies kann man zwar über CSS 3 und entsprechende Einschränkungen ab bestimmten Viewportgrößen in den Griff bekommen, allerdings nur in neuen Browsern (IE erst seit Version 9).

Technik 3: Der Wrapper ist fest in der Breite. Die restlichen Elemente ebenfalls.
Dies ist die einfachste Möglichkeit.

Zentrieren kann man sie alle (margin:0 auto;), da feste Breiten angegeben werden (egal ob prozentual oder fest), somit wäre das kein Problem mehr.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 23.01.2012, 12:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2012
Beiträge: 8
cuginoCoso befindet sich auf einem aufstrebenden Ast
Standard

okay –

schonmal danke für die Antwort!

Wie würde denn so ungefähr die TECHNIK3 dann aussehen?

Welcher Container/Wrapper bekommt welche position eigenschaft?


Danke.
Mit Zitat antworten
  #8 (permalink)  
Alt 23.01.2012, 12:58
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

bei Technik 3 brauchst du keine Positionseigenschaften. Du kannst die einfach entsprechend floaten. Das ist super einfach
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #9 (permalink)  
Alt 23.01.2012, 14:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2012
Beiträge: 8
cuginoCoso befindet sich auf einem aufstrebenden Ast
Standard

hmm …

ich glaube das hatte ich versucht …
und hatte dann das problem, dass sich bei window resize die container untereinander stapeln …

das ist doch eigentlich der sinn von float …

oder kann man das irgendwie umgehen?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.01.2012, 17:51
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

In dem von mir genannten Beispiel 3 wird das nicht passieren, da auch der Wrapper eine feste Breite hat. Somit wird der Container nicht schmaler und es kommt bei floats nicht zu Umbrüchen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
clear, css, fixed, float, resize, scroll

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS tabelle wird im FF nicht zentriert dargestellt neugierig_asdf CSS 2 08.02.2009 14:23
Positionierung einiger Elemente falsch CrAzYs CSS 4 09.10.2008 21:45
3 Spalten, mitte fixed width und immer horizontal zentriert - realisierbar?! vXel CSS 0 06.05.2008 00:33
Positionierte Tabelle - fixed, zentriert, vertikal zentriert nick CSS 0 20.08.2006 03:33
Zweispaltenlayout - Zentriert + Position fixed Mikronesien CSS 1 03.07.2006 23:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:06 Uhr.