HTML [XHTML + CSS] Wie Zeilenposition dynamisch zur Seitegröße anpassen?

  • Ersteller Ersteller Tersus
  • Erstellt am Erstellt am
T

Tersus

Gast
Guten Abend,
Dynamik ist ja nicht gerade die Stärke von (X)HTML. Existiert eine einfache Lösung für mein Problem?

Ich möchte Folgendes:

Von mir aus 3 Zeilen Geschriebenes auf einer Seite!

Die 1. Zeile soll immer 10% von der Gesamthöhe des verfügbaren Bereiches vom oberen Rand entfernt sein.
Die 2. Zeile soll immer mittig (vertikal) im verfügbaren Bereich positioniert sein.
Die 3. Zeile soll immer 10% von der Gesamthöhe des verfügbaren Bereiches vom unteren Rand entfernt sein.

Damit will ich sicher sein können, dass, egal wie groß die Auflösung des verfügbaren Bereiches ist, die Zeilen immer an den richtigen Positionen sind.

Angenommen auf einem Monitor von 1024*600 stünden die vollen 600px zur Darstellung einer HTML-Seite bereit. So müsste der Abstand der 1. Zeile zum oberen Rand, als auch der Abstand der 3. Zeile zum unteren Rand genau 60px betragen. Bei größerer Auflösung wären die Abstände entsprechend höher, es bleibt aber die selbe Relation.

Gruß
 
Zuletzt bearbeitet von einem Moderator:
Eigentlich reicht es ja, wenn es statisch immer richtig aussieht... :)
HTML:
<!doctype html>
<html>
 <head>
  <title></title>
  <style>
   html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
   }
   #oben,#unten{
    position:absolute;
   }
   #oben{
    top:10%;
   }
   #unten{
    bottom:10%;
   }
   /*Vertikal zentriert ist nicht ohne weiteres möglich, 
    dies hier funktioniert nur mit IE>=8 */
   #mitte{
    vertical-align:middle;
    display:table-cell;
   }
   body{
    display:table;
   }
  </style>
 </head>
 <body>
  <div id="oben">
   Oben
  </div>
  <div id="unten">
   Unten
  </div>
  <div id="mitte">
   Mitte
  </div>
 </body>
<html>
 
Statt über display:table-cell; zu gehen würd ich #mitte eher absolut positionieren und ein zweckdienliches Zusatzelement (<div class="inner">) rein packen.

#mitte {
position: absolute;
top: 50%;
}

#mitte .inner {
margin-top: -50%;
}

Ich glaub, das könnte gehen.
 
Einfach sau spitze! :) So wollte ich das und bedanke mich vielmals!

Grüße
 
Zurück
Oben