zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3-Spalten-Layout: Mitte feste Weite, links und rechs und links flexible Weite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.02.2011, 16:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2011
Beiträge: 7
jogiwebster befindet sich auf einem aufstrebenden Ast
Standard 3-Spalten-Layout: Mitte feste Weite, links und rechs und links flexible Weite

Hallo!

Mein Layout sieht folgendermaßen aus:

Spalte links 50% Restbreite | Spalte mitte 980px fest | Spalte rechts 50% Restbreite

Optimierung auf 1024px Breite, zentriert, die äußeren Spalten sollen nur soweit sichtbar sein, wie es die Auflösung erlaubt, bei 1024px also beide um 22px abgeschnitten, es darf aber keine Scrollbar dadurch entstehen, alle Spalten 100% Höhe.

Hier noch mal etwas genauer:

Spalte links:
Bei mehr als 1024px Auflösung soll die Spalte min. 40px haben und die BG-Grafik soll rechts ausgerichtet y-kacheln.
Bei 1024px Auflösung kann die Grafik nur 22px breit sichtbar sein, es darf aber keine x-Scrollbar entstehen.
100% Höhe.

Spalte mitte:
Feste breite 980px, zentriert, 100% Höhe.

Spalte rechts:
Bei mehr als 1024px Auflösung soll die Spalte min. 40px haben und die BG-Grafik soll rechts ausgerichtet y-kacheln.
Bei 1024px Auflösung kann die Grafik nur 22px breit sichtbar sein, es darf aber keine x-Scrollbar entstehen.
100% Höhe.

Meine Ansätze und Probleme:
Ich habe versucht der Mitte eine feste breite und den Seiten Prozenwerte zu geben, das geht nicht.
Beim IE bekomme ich in diesem Fall overflow:hidden nicht hin. Geht das überhaupt bei den beiden Außenspalten?

Wer kann mir helfen? Danke!

PS: Sorry für die Tippfehler im Titel (ist mein erstes Posting Und die PX-Angaben sind ca. Werte, da der Viewport-Rahmen noch hinzu kommt.

Geändert von jogiwebster (25.02.2011 um 16:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.02.2011, 16:38
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Das wird einmal gehen, mit css3 calc, kann aber bisher nur der IE9. Hatte dafür letztens mal ein Beispiel wg. einer Frage in nem anderen Forum gebastelt, wie es mit js funktioniert... habs noch online: http://www.cebito.de/examples/variabel/ lässt sich leicht auf dein Problem anpassen. Wichtig für dich ist nur das Script am Ende der Seite (und natürlich jQuery), das andere war vom Fragesteller, wg. seinem Hintergrundbild...

Geändert von cebito (25.02.2011 um 16:42 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.02.2011, 16:40
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Hast du eine Grafik/Vorlage die du nachbauen möchtest?
Ich glaube du denkst viel zu kompliziert, wahrscheinlich lässt sich dein Problem mit einer normalen zentrierten Seite und einem Hintergrund für body oder/und html lösen.

@cebito
Wenn CSS3, dann brauchst du dafür kein calc, sondern kannst es ganz elegant mit flex boxes lösen.

Geändert von inta (25.02.2011 um 16:42 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.02.2011, 16:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2011
Beiträge: 7
jogiwebster befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antwort. Geht es wirklich nicht? Mit einer Tabelle wäre es ja sehr einfach zu lösen...
Kannst Du mir den Link zu deinem JS posten? Danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 25.02.2011, 16:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2011
Beiträge: 7
jogiwebster befindet sich auf einem aufstrebenden Ast
Standard

@inta
CSS3 möchte ich eigentlich noch nicht bemühen.
Das habe ich auch gedacht und zuerst einfach einen Container per margin:auto zentriert und die beiden Spalten (die nur eine y-kachelnde BG-Grafik beinhalten) über den Hintergrund für die eigentliche Seite realisiert.
Das Problem dabei ist, dass die horizontale Position des Divs zur BG-Grafik beim Verändern der Viewportgröße um 1px "springt", es besteht also keine Genauigkeit, die ich für mein Layout aber benötige (möchte mein PS-Layout umsetzen).

Geändert von jogiwebster (25.02.2011 um 16:52 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 25.02.2011, 16:48
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von inta Beitrag anzeigen
@cebito
Wenn CSS3, dann brauchst du dafür kein calc, sondern kannst es ganz elegant mit flex boxes lösen.
Muss ich mir mal in Ruhe durchlesen...

@jogi - das js befindet sich am Ende des Quelltextes, den einfach mal anzeigen lassen.
Edith sagt noch - zeig doch mal dein PS-Layout, wahrscheinlich denkst du wirklich nur zu kompliziert...
Mit Zitat antworten
  #7 (permalink)  
Alt 25.02.2011, 16:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2011
Beiträge: 7
jogiwebster befindet sich auf einem aufstrebenden Ast
Standard

Hier noch eine optische Erläuterung, die grünen Linien zeigen an wo der Schatten bei 1024 abgeschnitten werden soll.
Und falls jemand es auf seinem Monitor nicht sieht, der Schatten geht jweils über die grüne Linie hinaus...


Geändert von jogiwebster (25.02.2011 um 16:54 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 25.02.2011, 16:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ohne CSS3 oder JS: http://xhtmlforum.de/57653-3-div-con...tml#post438295

Deine bg-Bilder gehen an Elemente, die alle 3 Spalten umgeben, siehe FAQ 1.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 25.02.2011, 16:54
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
Das wird einmal gehen, mit css3 calc, kann aber bisher nur der IE9.
Firefox 4.0 kennt -moz-calc()
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.02.2011, 16:57
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Und da kommt es zu einem Versatz, wenn du aus dem Schatten eine zentrierte Hintergrundgrafik machst, die du vertikal wiederholen lässt?

Ich erinnere mich dunkel daran, dass hier schon mal das Thema aufkam, dass bei zentrierten Hintergrundgrafiken und Elementen keine 100%ige Deckungsgleichheit herauskommt. Mir ist das bisher allerdings nicht aufgefallen, oder hat mich nicht gestört.

Kannst du ein Testcase online stellen wo man dein Pixelversatzproblem sieht?
Mit Zitat antworten
Sponsored Links
Antwort

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
3 Spalten Layout - aussen fixe Breite, mitte variabel semikolon CSS 1 04.12.2005 18:14
3 Spalten | Aussen: variable Breite; Mitte: feste Breite dreamshocker CSS 9 17.08.2005 17:23
3 Spalten, 100% Breite und Mitte feste breite lookom CSS 0 23.07.2005 18:19
frage zu 3 spalten layout mit festem bereich in der mitte otomo CSS 3 08.03.2005 02:41
Im 3 Spalten Layout geht Mitte "unten durch" Zwacky CSS 3 16.12.2004 23:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:16 Uhr.