zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden faux columns und height:100% sind keine Lösungen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.05.2005, 15:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2005
Beiträge: 12
Mambo_mango befindet sich auf einem aufstrebenden Ast
Standard faux columns und height:100% sind keine Lösungen

Moinsen an alle!

Ich wollte hier mal über die bereits oft gesprochene Problematik der Höhe von DIV's sprechen.
Ich glaube, dass weder height:100%; noch die faux columns eine Lösung darstellen.

Folgende Problematik:
Man erstelle ein Zweispaltiges Layout mit DIV's. Die eine wird links gefloated, hat 15% und heißt "menu". Die andere wird rechts gefloated, hat 85% und heißt "content". Beide DIV's bekommen eine Unterschiedliche Hintergrundfarbe. Im Body bleibt der Hintergrund weiß. Menu bekommt Header-DIV's für Üverschriften. Alle Header-DIV's bekommen eine eigene Hintergrundgrafik und sind in der breite auf "auto" eingestellt. Naja und Links kommen auch mit rein. Content wird dann auch noch mit Inhalt gefüllt. Das ganze sieht so wie in Abb. 1 aus. Die DIV's werden nur bis zum Ende des Inhaltes gestreckt.

Wenn man jetzt BODY und HTML die Höheneigenschaft von 100% gibt
Code:
body, html { padding:0; margin:0; height:100% }
und auch den beiden DIV's diese Eigenschaft zuweist, dann werden die DIV's bis zum Ende des Bildschirms gestreckt. Geht der Inhalt eines DIV's aber über den Bildschirmrand hinaus, sodass man scrollen muss, werden die DIV's nicht weiter gestreckt. Der Inhalt bleibt nicht in den DIV's, sondern geht darüber hinaus - siehe Abb.2.

Jetzt kommen die faux columns. Ich mache jetzt also ein Hintergrundbild, dass die beiden Spalten darstellt. Sagen wir 1px hoch.
Dieses Bild lasse ich jetzt per repeat-y als Hintergrundbild laufen. Das sieht ja gut aus, aber wenn ich auch hier so viel Inhalt habe, dass ich scrollen muss passiert etwas unschoenes. Die DIV's bzw. Ihre Vorgetaeuschte Hintergundfarbe wird zwar weiter gestreckt, aber die Header-DIV's passen nicht mehr mit dem Hintergrund überein. So wie in Abb.3. Ich kann zwar den Hintergrund auf diese Breite einstellen, dann muss aber gewaehrleistet sein, dass ich immer so viel Inhalt habe, dass ich scrollen muss.

Außerdem muss man beachten, dass die Bilder ja statisch sind. Was ist also wenn jemand eine andere Auflösung als der Autor hat. Oder die Seite einfach in einem verkleinertem Browserfenster geöffnet wird.


Für dieses Problem muss es doch eine ordentliche Lösung geben!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.05.2005, 15:26
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Wenn Du willst, dass sich ein gekacheltes Hintergrundbild auch noch weiter kachelt, darfst Du für BODY entweder kein height: 100% angeben oder Du musst (korrekterweise) min-height: 100%; setzen (was der IE und Safari aber nicht kennen).
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.05.2005, 15:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2005
Beiträge: 12
Mambo_mango befindet sich auf einem aufstrebenden Ast
Standard

Wenn du das Hintergrundbild meinst, dass ich bei faux columns benutzt habe, dann hast du mich wohl falsch verstanden, denn das streckt sich ja super. Nur die das Bild von den Headern in der Menuleiste passt nicht mehr zum Hintergrundbild, wenn ich so viel Inhalt habe, dass ich scrollen muss. Siehe Abb. 3.

Das mit min-height habe ich auch schon gelesen, aber da halt immer noch viele den ie benutzen schreckt es ab das zu benutzen.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.05.2005, 15:43
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
Das mit min-height habe ich auch schon gelesen, aber da halt immer noch viele den ie benutzen schreckt es ab das zu benutzen.
Da hast Du umsonst Angst. Der IE kennt zwar min-height nicht, interpretiert aber (fälschlicherweise) height genau so wie min-height.

Also: gib für alle braven Browser min-height und für den IE (via Sternchenhack oder Conditonal Comments) height an.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #5 (permalink)  
Alt 04.05.2005, 16:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2005
Beiträge: 12
Mambo_mango befindet sich auf einem aufstrebenden Ast
Standard

Meinst du das so? (Beispiel am AUszug meines Codes)
Code:
body, html { padding:0; margin:0; font-family:Arial, Verdana, sans-serif; min-height:100%; }
* html body, html { padding:0; margin:0; font-family:Arial, Verdana, sans-serif; height:100%; }

#menu { border:0px; width:15%; float:left; text-align:center; background-color:#dee3e7; min-height:100%; }
* html #menu { border:0px; width:15%; float:left; text-align:center; background-color:#dee3e7; height:100%; }

#content { border:0px; width:85%; float:right; background-color:#efefef; min-height:100%; }
* html #content { border:0px; width:85%; float:right; background-color:#efefef; height:100%; }
Mit Zitat antworten
  #6 (permalink)  
Alt 04.05.2005, 16:12
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Äh, ich schätze mal ja (ohne es getestet zu haben) ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #7 (permalink)  
Alt 04.05.2005, 16:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2005
Beiträge: 12
Mambo_mango befindet sich auf einem aufstrebenden Ast
Standard

Also im FF funktioniert es nicht.
Im IE funktioniert es ebenfalls nicht.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.05.2005, 16:34
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Vielleicht solltest Du es mal online zur Verfügung stellen, das macht es leichter ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #9 (permalink)  
Alt 04.05.2005, 16:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2005
Beiträge: 12
Mambo_mango befindet sich auf einem aufstrebenden Ast
Standard

LINK GELOESCHT

FF und IE stellen es beide nicht ordentlich da.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.05.2005, 17:30
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Kannst Du auch einen Screenshot machen, wie es aussehen soll?

Beachte auch, dass der IE bei % Angaben Rundungsfehler macht und das DIV für den Inhalt so gerne mal unter das Menü rutscht.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
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
Probleme mit Faux Columns deazra CSS 9 25.09.2011 21:48
4 Spalten Design mit Faux Columns Trick stipo CSS 2 11.07.2009 14:45
Faux Columns - sonderbarer weise Zeigt der IE alles richtig an jojoho CSS 1 16.09.2008 13:12
Ist bei dem Design was mit Faux Columns?! oder gibt es überhaupt ne Möglichkeit? dmxrideordie CSS 2 17.12.2007 19:50


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