Dominik Amon: Ergänzen nach oben und unten

SELF-Forum

Ergänzen nach oben und unten

Dominik Amon Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo

Bastle gerade an einem HTML Rohentwurf meiner neuen Website:
http://www.amon.cc/projects/wwwrelaunch/Start.htm
(der der da im Weizenfeldsteht bin übrigens ich)

Die Seite ist (noch) ganz einfach aufgebaut.

Ich möchte das Foto in der Bildschirmmitte haben (in der horizentalen ist dies bereits der Fall)

Mein Problem ist die vertikale Ausrichtung: Ich habe eine Klasse die upperAreaImage und lowerAreaImage. Diese beinhalten jeweils ein Hintergrundbild welches 1px hoch ist und somit kachelt.

Habe jetzt jeweils fixe größen angeben (height:150px). Damit ist garantiert, dass es sicher bis zum Bildschirmrand geht. Aber genau so garantiert ist ein Scrollbalken.

Was ich mir "wünsche" wäre ein Trick, dass er automatisch nach oben und unten gleichmäßig verteilt die Bereiche macht und keine Scrollbar vorhanden ist.
(Das DIV in der Mitte hat eine fixe größe von 625px)

Vielen Dank für Tipps & Tricks

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Ergänzen nach oben und unten

    Michael
    – Informationen zu den Bewertungsregeln

    Naja, ich würd's an Deiner Stelle etwas umgedreht angehen.
    Hier mal ein Beispielcode:

      
<html>  
<head>  
<style type='text/css'>  
html,body{  
    margin: 0px;  
}  
div{  
    width: 600px;  
    margin-left: auto;  
    margin-right: auto;  
}  
#offset{  
    position:absolute;  
    left: 50%;  
    top: 50%;  
}  
#mitte{  
    position: absolute;  
    left: -300px;  
    top: -150px;  
    background: cyan;  
    height: 300px;  
}  
#oben{  
    height: 50%;  
    background: yellow;  
}  
#unten{  
    height: 50%;  
    background: orange;  
}  
  
</style>  
</head>  
<body>  
<div id='oben'></div>  
<div id='unten'></div>  
<div id='offset'>  
    <div id='mitte'>Inhaltsblock</div>  
</div>  
</body>  
</html>

    Oben und Unten beanspruchen hier einfach 50% der Höhe
    und somit immer die gesamte vertikale Fläche,
    während der Inhaltsblock drübergelegt ist.

    Schönen Gruß!

    Michael

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Ergänzen nach oben und unten

      Dominik Amon Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Michael

      Oben und Unten beanspruchen hier einfach 50% der Höhe
      und somit immer die gesamte vertikale Fläche,
      während der Inhaltsblock drübergelegt ist.

      Danke für die Idee - funktioniert mit dem FF ganz gut, allerdings beim Internet Explorer wieder weniger :-(

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Ergänzen nach oben und unten

        Michael
        – Informationen zu den Bewertungsregeln

        Danke für die Idee - funktioniert mit dem FF ganz gut, allerdings beim Internet Explorer wieder weniger :-(

        ups, ja,
        ab dem Tage, an dem der IE css-Anweisungen korrekt interpretiert, wird's langweilig werden.
        Aber in diesem Fall ist's ja kein großes Problem.
        Definieren wir doch die Hintergrundposition wie die Inhaltsbox selbst auch über ein Offset.

          
<html>  
<head>  
<style type='text/css'>  
html,body{  
   margin: 0px;  
}  
  
#offset,#hintergrund_offset,  
#oben, #unten, #mitte{  
   position: absolute;  
}  
#oben, #unten, #mitte{  
   width: 600px;  
}  
  
#offset{  
   left: 50%;  
   top: 50%;  
}  
#hintergrund_offset{  
   left: 50%;  
   top: 0px;  
   height: 100%;  
}  
#oben{  
   top: 0px;  
   left: -300px;  
   height: 50%;  
   background: yellow;  
}  
#unten{  
   top: 50%;  
   left: -300px;  
   height: 50%;  
   background: orange;  
}  
#mitte{  
   height: 300px;  
   top: -150px;  
   left: -300px;  
   background: cyan;  
}  
</style>  
</head>  
  
<body>  
  
<div id='hintergrund_offset'>  
   <div id='oben'></div>  
   <div id='unten'></div>  
</div>  
  
<div id='offset'>  
   <div id='mitte'>  
   Inhalt  
   </div>  
</div>  
  
  
</body>  
</html>

        Das sollte so nun in allen Browsern funktionieren.

        Einzige Einschränkung:
        Wenn das Browserfenster schmaler ist, als Dein Inhalt,
        dann bekommst Du leider keinen Scrollbalken.

        Gruß,
        Michael

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln