CSS: Vertikale Ausrichtung mal wieder
Stefan
- css
Hallo, habe folgendes Problem, zunächst mal der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Testseite</title>
<style type="text/css">
<!--
html, body {
height:100%;
}
.vertical {
position:absolute;
top:1em;
left: 1em;
bottom: 1em;
padding:0.5em;
width:10em;
border-width:2px;
border-color:#012678;
border-style:solid;
}
-->
</style>
</head>
<body>
<div class="vertical">Zeile 1<br>Zeile 2</div>
</body>
</html>
Das Problem ist, dass der Rahmen sich nicht am Inhalt ausrichten soll, sondern vertikal am Browserfenster. Er soll bis kurz an den unteren Rand reichen.
Wo ist da der Fehler?
Stefan
Hi,
Wo ist da der Fehler?
wie hoch ist das <div>?
Cheatah
wie hoch ist das <div>?
Wenn ich einen oberen und einen unteren Abstand angebe, müsste sich doch die Höhe automatisch ergeben. Wenn ich zusätzlich noch eine Höhe angebe, dann käme es ja zu widersprüchlichen Angaben.
Stefan
Hi,
wie hoch ist das <div>?
Wenn ich einen oberen und einen unteren Abstand angebe, müsste sich doch die Höhe automatisch ergeben.
Du weißt das, ich weiß das. Aber weiß das auch der Browser?
Wenn ich zusätzlich noch eine Höhe angebe, dann käme es ja zu widersprüchlichen Angaben.
Tja. Und was hälst Du davon, die nicht wie gewünscht funktionierenden Angaben zugunsten funktionierender Angaben zu entfernen; bzw. sie durch solche zu ersetzen, die mit den funktionierenden Angaben nicht im Widerspruch stehen?
Was ich Dir damit sagen will: Dein Ansatz ist suboptimal, suche einen anderen :-)
Cheatah
Hallo!
.vertical {
position:absolute;
top:1em;
left: 1em;
bottom: 1em;
padding:0.5em;
width:10em;
border-width:2px;
Du kannst entweder top: oder bottom: angeben.
Machs doch z.B. so:
top:2%
left:2%
height:96%
...
tschüs,
Jürgen
Hi,
Du kannst entweder top: oder bottom: angeben.
Was bringt Dich auf diese Idee?
Zeigst Du mir bitte die Stelle im CSS 2-Standard, an der das steht?
cu,
Andreas
Hallo!
Du kannst entweder top: oder bottom: angeben.
Was bringt Dich auf diese Idee?
Zeigst Du mir bitte die Stelle im CSS 2-Standard, an der das steht?
Du hast natürlich recht.
Auf die Idee bringt mich, daß es zumindest mit meinem IE5 so noch nicht funktioniert.
Den Vorschlag mit den Prozentangaben dürfte sogar netscape4.7 schlucken.
Tschüs,
Jürgen
Du kannst entweder top: oder bottom: angeben.
Machs doch z.B. so:
top:2%
left:2%
height:96%
Ist auch fehlerhaft (Mozilla 1.0.1)
Stefan
Hallo!
Ist auch fehlerhaft (Mozilla 1.0.1)
Ohne <!doctype> funktionierts mit mozilla(1.2.1), wenn der rahmen dünn ist.
Tschüs, Jürgen
Moin, Stefan!
Dir fehlt natürlich ein height:100%; in deinen CSS,
ansonsten solltest du die Abstände weglassen, weil du sonst
bei 100% + Abstände Scrollbalken bekommst.
Es _kann sein_, dass es in älteren Browsern nur mit einer Tabelle
statt des DIVs geht ... müsstest du ausprobieren.
Gruß
Der Hans
Hallo, habe folgendes Problem, zunächst mal der Code:
[snip]
Das Problem ist, dass der Rahmen sich nicht am Inhalt ausrichten soll, sondern vertikal am Browserfenster. Er soll bis kurz an den unteren Rand reichen.
Dein Code erfüllt in Phoenix 0.4 genau diesen Anforderungen.
Wo ist da der Fehler?
Vermutlich versteht der von dir verwendete Browser das Konzept der absoluten Positionierung nicht richtig.
MI
Dein Code erfüllt in Phoenix 0.4 genau diesen Anforderungen.
In Mozilla 1.0.1 funktioniert es nicht.
Stefan
Moin, nochmal!
Moz 1.2 macht's schon mit deinem Code, ebenso Opera 6.
Mit den von Cheatah und mir vorgeschlagenen Modifkationen läuft's
dann sogar im IE 6 wie gewünscht.
Die kleineren Versionen könnten evtl. wirklich noch auf Tabellen
angewiesen sein!?
Gruß
Der Hans