Faux Colums....
0 0 0 0 0 
Detlef G.
Faux Colums....
Hallo, wie schafft man das, dass sich Faux Colums in der Fensterbreite
des Browsers anpassen?....bzw. dass Sie bei allen Auflösungen
funktionieren ?
-
Hi!
Hallo, wie schafft man das, dass sich Faux Colums in der Fensterbreite
des Browsers anpassen?....bzw. dass Sie bei allen Auflösungen
funktionieren ?Hm? Kommt drauf an. Wenn du einfach eine Hintergrundgrafik hast, die sich ueber die Breite erstreckt, erstmal gar nicht. Zentieren waere da eine Moeglichkeit um den Platz optisch besser auszunutzen.
Wenn Du die gefakten Spalten durch unterschiedliche Hintergruende in Containern loest, stellt sich die Frage aber auch eigentlich gar nicht.
Das Problem sollte nur bei kuenstlich 'aufgespannten' Layouts auftreten, die immer ueber den ganzen Viewport verteilt sind. Dann waere die Loesung, sich vom 'Tabellendenken' zu entfernen und ein fliessendes Layout zu erstellen.
Fuer eine konkrete Antwort braucht man aber ein konkretes Problem. Da waere es nett, wenn Du uns schilderst, was genau dir vorschwebt. Code (ein Link) soll ja hilfreich sein. ;)
-
Servus,
hier ist mein konkretes Problem:
Ich habe einen Header, den ich über 100% strecken möchte, mit einer
bestimmten Höhe.Nun möchte ich unter diesem Header ein 3 Spaltiges Layout, das aber
nicht höher als 100% ist(also kein Scrollbalken).Allerdings sollten sich jetzt diese 3 Spalten je nach Browser und
Auflösung bis nach unten strecken, und bei Bedarf auch automatisch
vergrößern.Aber auch wenn nur eine Spalte länger wird, so sollen die anderen
auch länter werden !!!Hier ein Beispiel wie es nicht sein soll (wegen dem Scrollbalken):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
background-color:green;
}
.div_header{
width:100%;
height:100px;
background-color:red;
}
.div_left{
width:20%;
height:100%; /*Ich weiß das das Falsch ist, weiß aber nicht wie es anders gehen könnte*/
background-color:blue;
float:left;
}
.div_center{
width:60%;
height:100%; /*Ich weiß das das Falsch ist, weiß aber nicht wie es anders gehen könnte*/
background-color:black;
float:left;
}
.div_right{
width:20%;
height:100%; /*Ich weiß das das Falsch ist, weiß aber nicht wie es anders gehen könnte*/
background-color:pink;
float:left;
}
</style>
</head>
<body>
<div class="div_header"></div>
<div class="div_left"></div>
<div class="div_center"></div>
<div class="div_right"></div>
</body>
</html>-
Moin,
bitte entschuldige, dass ich nicht ausführlicher Antworte. Ich möchte Dir nur kurz 2 Links posten, die Dir wahrscheinlich weiterhelfen können:
http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layouts/
und
http://css.maxdesign.com.au/selectutorial/index.htm
Erstmal geht's vordergründig um Selektoren, aber sieh mal Beispiel 22 an, da wird dann das Endergebnis klar.Das Problem mit der Höhe ist auch machbar. Am einfachsten ein min. 100% hohes Element mit den 3 faux colums als Hintergrund, anders als static positionert. Darin ein weiteres Element mit padding 100px, das den Inhalt trägt. Darüber mit absolut positioniert den 100px hohen header. Vielleicht geht das auch eleganter, aber auf die Schnelle wäre das meine erste Idee.
Das mit den obigen Ansätzen zu kombinieren sollte auch machbar sein.
viel Erfolg
Ulrich--
Teiltransparente Bereiche
selfcode: sh:| br:> ie:% mo:) va:) de:] zu:) fl:( ss:| ls:[
um-fritz.de-
ok, das mit dem Header und hab ich verstanden, aber wie mach ich das jetzt, das meine 3 Spalten alle gleich lang sind, wenn eine größer als 100% wird ?
Weil Faux Colums funktionieren ja nur bei fester Breite, oder ?
Und bei mir ist die Breite ja nicht fest....es soll sich der Fensterbreite anpassen.Vielen Dank schon mal für eure Bemühungen !!!
Stefan
-
Weil Faux Colums funktionieren ja nur bei fester Breite, oder ?
Und bei mir ist die Breite ja nicht fest....es soll sich der Fensterbreite anpassen.Nein. Wenn du nicht mit einer festen Hintergrundgrafik arbeitest sind sie das nicht. Angenommen, Du hast 2 Spalten - Menue und Content:
Dann hast Du einen Container (Wrapper) in dem die beiden Container fuer Menue und Content liegen. Dan gibst Du z.B. dem Wrapper die Farbe fuer das Menu und machst dieses transparent. Der Content bekommt seinen Hintergrund. Wenn der Content den Wrapper aufspannt, sieht es so aus, als waere der Menuecontainer genauso hoch, ist er aber nicht. Nur in dem Fall, dass das Menue hoeher wird, als der Content wird man unter diesem dann den Hintergrund des Wrappers sehen. Das ist eine Standardmethode.
Schau doch mal hier, ob Du was passendes findest. http://www.intensivstation.ch/templates/
-
-
-
Aha.
Dann schau doch mal in diesen Thread weiter unten:
https://forum.selfhtml.org/?t=159889&m=1039937Wenn ich dich richtig verstanden habe, findest Du hier den ersten Ansatz fuer dein Vorhaben.
-
Hallo Stefan
Aber auch wenn nur eine Spalte länger wird, so sollen die anderen
auch länter werden !!!Vielleicht kann dir dieses Beispiel helfen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-