nicht angemeldet
td height und vertical-align:bottom im ie
hallo liebe leude,
ich bin hier echt bal am verzweifeln - wegens der kompatibilität und der genauigkeit habe ich auf dieser seite:
http://brenzlig.de/tmp.htm
eine maintable benutzt. geht alles wunderbar, bis auf den ie (beide stellen im quelltext markiert):
-
das bild wird nicht 'bottom' angezeigt, auch mit 'position: relative; bottom:0px' ist nichts zu machen. vermutlich hängt dieses problem mit dem zweiten zusammen:
-
meine zeilen/felder werden im ie nicht auf die höhe beschränkt, sondern immer mit vergrössert. wenn ich dieses ausgleiche, indem ich die folgende zeile auf 'height:100%' stelle, dann wird logischerweise die tabelle zu lang.
*ismirschlecht*
kann mir bitte jemand helfen?
danke sacht der andi
-
hey,
habe jetzt nochmal ein ganz minimalistisches beispiel hochgeladen, bei dem ich mich einfach nur frage, warum die 100% höhe sich nicht auf das elternelement beziehen, sondern auf das brauserfenster.andi
-
Hallo andi
habe jetzt nochmal ein ganz minimalistisches beispiel hochgeladen, bei dem ich mich einfach nur frage, warum die 100% höhe sich nicht auf das elternelement beziehen, sondern auf das brauserfenster.
Die Höhe bezieht sich doch auf das Elternelement.
Das Elternelement von mainBox ist paddingBox,
paddingBox hat 100% Höhe von centerBox,
centerBox hat 100% Höhe von body,
body hat 100% Höhe vom Browserfenster.
Also hat paddingBox 100% Höhe vom Browserfenster,
über paddingBox befindet sich aber headerBox mit 71px Höhe.
Daraus folgt:
Die gesamte Höhe sind jetzt 100% des Browserfensters + 71px.MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
okey, hast gewonnen ;) und wie bekomme ich nun 100% inclusive 71px hin?
danke sacht der andi
-
Hallo andi
okey, hast gewonnen ;) und wie bekomme ich nun 100% inclusive 71px hin?
Indem du z.B. dem unteren Div nur eine oberen Border gibst und die restlichen dem übergeordneten Element. Entspricht dann zwar nicht 100%ig deiner Vorgabe, vermeidet aber dieses height-Problem.
Egal, wie du es machst, die Seite wird aber immer 100% + border Höhe haben.Eine Frage dazu, was kommt eigentlich ins untere Div.
Ist es sicher, das der Inhalt in _allen_ Fenster und Schriftgrößen nicht zu groß wird?
Sonst wird in Standardkonformen Browsern der untere Border im Text angezeigt.MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Eine Frage dazu, was kommt eigentlich ins untere Div.
da sollte eine fussleiste hin, allerdings mit hintergrund, so dass man die position genau erkennen kann. hatte jetzt schon eine ganz nette idee, diese scheitert aber schon wieder an zwei sachen. zu einen, weil 'vertical-align:bottom' nicht funktioniert, um anderen wegen dem hier:
Ist es sicher, das der Inhalt in _allen_ Fenster und Schriftgrößen nicht zu groß wird?
Sonst wird in Standardkonformen Browsern der untere Border im Text angezeigt.hmm, irgendsowas musste ja noch kommen. ich bin echt frustrated. dann wirds eben doch kein xhtml... :(
trotzdm will ich dir mal meine idee noch mitschicken. der sinn ist, dass ein leicht unterschiedlicher abstand zwischen text und der impressumsleiste sicherlich nicht auffällt. deswegen puffern das die 'BufferBoxen' ab. den langen text teste ich gleich mal...
#borderBox{
height:98%;
border-top: 5px solid red;
border-left: 5px solid red;
border-right: 5px solid red;
}
#upBufferBox{
height:96%;
border:1px solid black;
}
#downBufferBox{
height:4%;
border:1px solid black;
vertical-align:bottom;
}
#headerBox{
height:71px;
background:#993333;
}
#menuBox{
background:green;
}
#mainBox{}
#footerBox{
height:20px;
background:red;
vertical-align:bottom;
}
-->
</style></head>
<body style="height:100%">
<div id="centerBox">
<div id="paddingBox">
<div id="borderBox">
<div id="upBufferBox">
<div id="headerBox">
header
</div>
<div id="menuBox">
menu
</div>
<div id="mainBox">
hallo
</div>
</div>
<div id="downBufferBox">
jhhkj </div>
</div>
</div>
</div>
</body>
</html>ah0i, andi
-
Hallo andi
hmm, irgendsowas musste ja noch kommen. ich bin echt frustrated. dann wirds eben doch kein xhtml... :(
Das hat damit nicht viel zu tun.
trotzdm will ich dir mal meine idee noch mitschicken.
[...]Das hat ja nicht allzuviel Ähnlichkeit mit dem vorigen, habe mir das nur kurz angesehen.
Du solltest dir als erstes die logische Struktur der Seiteninhalte überlegen.
Was soll auf die Seite drauf?
Was ist eine Überschrift, welche Ordnung (h1, h2,...)?
Was ist eine Liste?
Was ein Absatz?Dabei interessiert das Layout überhaupt noch nicht.
Das Ergebnis ist dann erst einmal eine Seite mit logischen Auszeichnungen, ohne irgendein besonderes Layout. So wird die Seite dann auch in Uraltbrowsern dargestellt.Dann geht es an den Layoutentwurf.
Überlege dir, zeichne auf ein Blatt Papier oder mittels eines Grafikprogramms, wie die fertige Seite dann aussehen soll. (Bei mir macht dies mein Sohn, der sonst Designs für Plakate, Flyer oder CD-Hüllen entwirft.) Überlege dabei, wie sich die Seite bei kleineren oder größeren Browserfenstern oder bei unterschiedlichen Schriftgrößen verhalten soll.Erst dann ist es wirklich sinnvoll, das CSS zu schreiben.
Du schaust, welche Seiteninhalte sind in welchen Elementen und formatierst diese mittels CSS. Elemente, die immer identisch sein sollen über den Elementenamen, einmalig pro Seite benötigte Formatierungen mittels Id und mehrfach benutzte Formatierungen mittels Class.
Nur wenn es unvermeidbar ist, also Seiteninhalte formatiert werden müssen, die kein eigenes Element bilden oder mehrere Elemente zu eine Gruppe zusammengefasst werden müssen, und _nur_ dann fügst du zusätzliche Divs oder Spans ein um diese dann zu formatieren. Das CSS schreibst du möglichst gleich in eine separate Datei, damit dies einmalig für mehrere Seiten verfügbar ist.
So erhältst du Seiten, die einfach und übersichtlich strukturiert sind, wo ein jemand anderes auch mit zurecht kommt und du auch noch nach ein paar Jahren. Außerdem sind diese in einem Uraltbrowser oder bei abgeschaltem CSS zwar vielleicht nicht so schön aber gut verständlich und benutzbar.
Eventuell werden dabei kleine Abstriche ans gewünschte Layout gemacht werden müssen.Leider habe ich jetzt nicht mehr genug Zeit, dir praktisch zu helfen.
Ich muss mich jetzt für die nächsten Tage verabschieden, morgen in aller Frühe fahre ich für drei Tage weg, dort komme ich an keinen Rechner, und ich habe auch keine Sachen gepackt.
Wenn dieser Thread noch nicht im Archiv sein sollte, finde ich ihn wieder, sollte er am Mittwoch nicht mehr zu finden sein, kannst du gern einen Neuen, mit deinen dann aktuellen Fragen beginnen.MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
:) danke dir für deine ausführliche antwort. im gug habe ich das schon so gemacht wie due sagtest, das problem ist, wenn man mit jemandem zusammen arbeitet, der nur printsachen kennt ('der zeilenumbruch hier soll aber anders sein'...)*grr*
mir persönlich gefällt die xhtml vatriante uch um einiges besser, ist auch einfacher zu handlen, _aber_ da wir eine halbwegs 'immer-über-die-komplette-höhe-gehenden' rahmen haben wollen, habe ich hier ein problem.nuja, danke nochmal und schönen urlaub,
andi
-
-
-
-
-
-
-
Hallo andi
ich bin hier echt bal am verzweifeln - wegens der kompatibilität und der genauigkeit habe ich auf dieser seite:
http://brenzlig.de/tmp.htm
eine maintable benutzt. geht alles wunderbar, bis auf den ie (beide stellen im quelltext markiert):Naja, scheinbar ist die Genauigkeit so doch nicht so einfach zu erreichen.
Würde sich dieses Layout nicht relativ einfach ohne Tabelle realisieren lassen?
- das bild wird nicht 'bottom' angezeigt, auch mit 'position: relative; bottom:0px' ist nichts zu machen. vermutlich hängt dieses problem mit dem zweiten zusammen:
In meinem IE 6.0.2800... wird das Logo untenbündig angezeigt.
position: relative; bottom:0px bedeutet, das Element soll um 0px verschoben werden, ist also Nonsens.
Das Element wird bei position:relative genau so weit wie angegeben verschoben, wobei der Platz, den es ohne position beanspruchen würde reserviert bleibt.- meine zeilen/felder werden im ie nicht auf die höhe beschränkt, sondern immer mit vergrössert. wenn ich dieses ausgleiche, indem ich die folgende zeile auf 'height:100%' stelle, dann wird logischerweise die tabelle zu lang.
Ja, alte Browser nehmen die Zeilenhöhen eher als Mindestmaß und gehen mehr nach dem enthaltenen Inhalt als der Angabe.
Du hast hier also zwei Zeilen mit Inhalt und eine leere Zeile, also gib verschwendet der IE den Platz nicht für die leere Zeile.
Das Problem vermindert sich oder verschwindet ganz, wenn dort ausreichend Inhalt eingefügt ist.Genau dieses Problem hättest du mit einem tabellenlosen Layout nicht!
MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Genau dieses Problem hättest du mit einem tabellenlosen Layout nicht!
leider stimmt das - glaube ich - nicht. wenn du dir das zweite beispiel ansiehst, dann wird das dritte div um exakt den betrag nach unten verschoben, wie das erste hoch ist. wie bekomme ich das denn weg? wenn ich das wüsste, wäre mir geholfen...
andi