nicht angemeldet
DIV-Layout- Spaltenhöhe 100%
Hi
ich habe ein Problem bei der Websitegestaltung.
Ich habe ein 2 Spalten DIV Layout (http://www.abis2003.com/t2/template2.html).
Um die beiden Spalten habe ich ein weiteres DIV gelegt, da die beiden Spalten immer die gleiche Höhe haben sollen.
Wie im Bild zu sehen ist macht der InternetExplorer alles so wie ich es mir vorgestellt habe.
Der Firefox stellt die Spalten jedoch nicht richtig, wie im CSS deklariert (height: 100%;), dar.
Daher suche ich nach einer Möglichkeit das DIV im Firefox so wie im Internet Explorer, nämlich heigth=100% - die Höhe des Parent Divs -, darzustellen.
Meine Versuche über JS/DOM die Höhe der ContentBox auszulesen und als Höhe im CSS (expression();) zu verwenden schlugen fehl.
Grüße, Sonix
-
hi,
Um die beiden Spalten habe ich ein weiteres DIV gelegt, da die beiden Spalten immer die gleiche Höhe haben sollen.
An dem Thema haben sich schon einige Leute die Zähne ausgebissen.
Der Firefox stellt die Spalten jedoch nicht richtig, wie im CSS deklariert (height: 100%;), dar.
CSS sieht es nicht vor, dass zwei voneinander unabhängige Elemente sich gegenseitig in ihrer Höhe beeinflussen.
Und Prozentangaben für die Höhe beziehen sich immer auf die Höhe des/der Vorfahrenelemente. Wenn dieses nun aber keine explizite Höhe hat, sondern seine wiederum von der der Nachfahren beziehen soll - dann beißt sich die Katze in den Schwanz.
Daher suche ich nach einer Möglichkeit das DIV im Firefox so wie im Internet Explorer, nämlich heigth=100% - die Höhe des Parent Divs -, darzustellen.
Faux Columns wäre ein Stichwort für einen manchmal halbwegs brauchbaren Workaround.
Meine Versuche über JS/DOM die Höhe der ContentBox auszulesen und als Höhe im CSS (expression();) zu verwenden schlugen fehl.
Natürlich, die Expression-Syntax kennt der Firefox nicht, die ist etwas IE-eigenes.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi,
Meine Versuche über JS/DOM die Höhe der ContentBox auszulesen und als Höhe im CSS (expression();) zu verwenden schlugen fehl.
Warum willst Du mit expression arbeiten? Wenn schon JS, kannst Du doch gleich die entsprechende Style-Eigenschaft setzen.
Gruesse, Joachim
--
Am Ende wird alles gut. -
Hallo,
ergänzend zu dem, was wahsaga ja schon gesagt hat (siehe dazu z.B. http://alistapart.com/articles/fauxcolumns/), noch folgendes:
man hört mittlerweile wieder von einigen Leuten, die dann auch mal wieder auf sehr einfache und schlanke Layout-Tabellen für das Seitenraster zurückgreifen. Ob man dies will, ist dann so eine Art Gewissensfrage.
Ich selbst habe mir das bislang verkniffen.
(Mich würde aber die Meinung des Forums dazu interessieren. Werden so erzielte Fortschritte wieder aufgegeben wegen optischer Belange? Oder sind solche Tabellen einfach pragmatisch und ok?)Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...)-
Hi,
Werden so erzielte Fortschritte wieder aufgegeben wegen optischer Belange? Oder sind solche Tabellen einfach pragmatisch und ok?)
Letztlich stellt sich ja die Frage nach dem kleineren Übel. Ich hänge hier mal einen 2-Spalten-Hack dran, der sich im Gegensatz zu Background-Image-Varianten sogar skalieren lässt. Ob das aber wirklich sauberer ist, ist disskussionswürdig.
Natuerlich ist es nicht bei jedem Entwurf _unbedingt_ erforderlich, dass sich Spalten aneinander ausrichten, aber als Designer kann man genausowenig immer mit der "Schere im Kopf" arbeiten.
Ok, zusammengehackt, laeuft auf IE6, FF, Opera 8.4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head><style type="text/css">
.main {
min-height:100%;
border-left: 10em solid #e9e9e9;
border-right: 10em solid #e9e9e9;
width:1em;
}.main .left {
width:9em;
margin:0.5em 0.5em 0.5em -9.5em;
float:left;
}.main .right {
width:9em;
margin:0.5em 0.5em 0.5em 1.5em;
float:left;
}</style>
<!--[if lte IE 6]>
<style>
.main {
height:100%;
overflow:hidden;
}.left {
position:relative;
left: 0;
margin:0.5em 0.5em 0.5em 0.5em;
}.main div.right {
position:relative;
left: 1em;
margin:0.5em 0.5em 0.5em 0.5em;
}
</style>
<![endif]--></head>
<body>
<div class="main"><div class="left">
Test<br>
test<br>
<p>Der Tester testet alles was er testen kann</p>
</div>
<div class="right">
Alles<br>
Gute<br>
<p>Hier steht ganz anderer Text Hier steht ganz anderer Text Hier steht ganz anderer Text Hier steht ganz anderer Text </p>
</div><br style="clear:left">
</div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo,
die Idee ist cool.
Neben den "conditional comments" für den IE ist ein großer Nachteil aber, daß so ein Layout nicht sehr flexibel ist.Ich würde aber auch dazu tendieren, für schwere Fälle eine Layout-Tabelle zu erlauben, die nur das Seitenraster definiert. Die Frage ist, ob so eine Tabelle tatsächlich eine Barriere darstellen kann und ob diese semantische Unsauberkeit hinnehmbar ist.
In unserer Agentur wurden - nach schweren Diskussionen - für zwei Projekte wieder solche Tabellen benutzt.Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...)
-
-