Stefan: CSS: Vertikale Ausrichtung mal wieder

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

  1. Hi,

    Wo ist da der Fehler?

    wie hoch ist das <div>?

    Cheatah

    --
    X-Will-Answer-Email: No
    1. 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

      1. 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

        --
        X-Will-Answer-Email: No
  2. 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

    1. 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

      --
      Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
      1. 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

    2. 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

      1. 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

  3. 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

  4. 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

    --
    : Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
    : Einführung in XHTML, CSS und Webdesign   http://jendryschik.de/wsdev/ :
    : Monatlich das Beste aus de.alt.netdigest http://best-of-netdigest.de/ :
    1. Dein Code erfüllt in Phoenix 0.4 genau diesen Anforderungen.

      In Mozilla 1.0.1 funktioniert es nicht.

      Stefan

      1. 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