Kompliziertes DIV-Container Problem

[maex]

Hallo zusammen,
ich habe ein Problem mit der Formatierung/Anordnung von DIV-Containern, zu dem ich auch noch Durchforsten mehrerer Foren keine Lösung gefunden habe.

Und zwar habe ich drei DIV-Container, die ich vertikal optimal bei verschiedenen Auflösungen ausrichten möchte. (Das horizontale ist egal, da wird bei größeren Auflösungen einfach ein leerer Raum rechts dran gebaut).

Die drei DIV-Container sollen übereinander stehen, das heißt die zwei oberen auf dem unteren aufbauen. Der untere soll in der Höhe variabel sein (je nach Auflösung) und an den zwei roten Fixpunkten (siehe Bilder unten) "befestigt" sein. Ich hab das mal in zwei Bildern dargestellt (eins für hohe Auflösungen, eins für niedrige).

Bei einer kleinen Auflösung, soll die Höhe des Content-Divs sich so verringern, dass die beiden oberen Div-Blöcke nach unten rutschen und zwar nur soweit, dass noch ein paar Pixel zwischen Apfelmotiv und Motto-Div sind.

Bei einer großen Auflösung soll sich die Höhe des Content-Divs sich so vergrößern, dass die beiden oberen Div-Blöcke soweit nach oben rutschen, dass das Motto-DIV genau mittig zwischen oberen Apfelrand und oberen Seitenrand steht.

So soll es bei großen Auflösungen aussehen:

So soll es bei kleinen Auflösungen aussehen:

Mein Quelltext sieht momentan wie folgt aus:

  
  
#wrapper {  
        width: 100%;  
    }  
  
#motto {  
    position: absolute;  
    top: 15px;  
    left: 25px;  
    border: 0px solid blue;  
}  
  
  
#content {  
    position: absolute;  
    bottom: 100px;  
    left: 580px;  
    width: 660px;  
    height: 460px;  
    padding: 10px;  
    padding-top:0px;  
    padding-bottom:0px;  
    overflow: auto;  
    border: 0px solid blue;  
	  
}  
  
#menu {  
    position: absolute;  
    bottom: 600px;  
    width: 220px;  
    height: 80px;  
    left: 1030px;  
    border: 0px;  
    text-align: right;  
}  
  
  
  
  
HTML  
  
<div id="wrapper">  
        <div id="motto">  
            <a href="index.htm"><img src="images/space.gif" /></a>  
        </div>  
              <div id="menu">  
                <a href="index.php" class="menu">Startseite</a><br>  
                <a href="seite_programm.php" class="menu">Programm</a><br>  
                <a href="seite_anfahrt.php" class="menu">Anfahrt / Unterbringung</a><br>  
                <a href="anmeldung.php" class="menu">Anmeldung</a><br>  
                <a href="seite_kontakt.php" class="menu">Kontakt / Impressum</a><br>  
            </div>  
             <div id="content">  
		Inhalte  
  
	     </div>  
</div>  
  

Vielleicht kann mir ja jemand von euch helfen.
Herzlichen Dank im voraus und ein schönes Wochenende.
Max

[Matthias Apsel]

Om nah hoo pez nyeetz, maex!

<div id="wrapper">         <div id="motto">             <a href="index.htm"><img src="images/space.gif" /></a>         </div>               <div id="menu">                 <a href="index.php" class="menu">Startseite</a><br>                 <a href="seite_programm.php" class="menu">Programm</a><br>                 <a href="seite_anfahrt.php" class="menu">Anfahrt / Unterbringung</a><br>                 <a href="anmeldung.php" class="menu">Anmeldung</a><br>                 <a href="seite_kontakt.php" class="menu">Kontakt / Impressum</a><br>             </div>              <div id="content"> Inhalte

</div> </div>

Eine Liste ist eine Liste. Demzufolge sollte du die Liste der Menüpunkte als solche auszeichnen. Dann kannst du sowohl auf die br als auch auf class="menu" verzichten.

Matthias

[Maex]

Om nah hoo pez nyeetz, maex!

<div id="wrapper">
        <div id="motto">
            <a href="index.htm"><img src="images/space.gif" /></a>
        </div>
              <div id="menu">
                <a href="index.php" class="menu">Startseite</a><br>
                <a href="seite_programm.php" class="menu">Programm</a><br>
                <a href="seite_anfahrt.php" class="menu">Anfahrt / Unterbringung</a><br>
                <a href="anmeldung.php" class="menu">Anmeldung</a><br>
                <a href="seite_kontakt.php" class="menu">Kontakt / Impressum</a><br>
            </div>
             <div id="content">
Inhalte

     </div>  

</div>

Eine Liste ist eine Liste. Demzufolge sollte du die Liste der Menüpunkte als solche auszeichnen. Dann kannst du sowohl auf die br als auch auf class="menu" verzichten.

Matthias

Danke für den Hinweis Matthias. Wie mache ich das denn genau?

[Matthias Apsel]

Om nah hoo pez nyeetz, Maex!

Eine Liste ist eine Liste. Demzufolge sollte du die Liste der Menüpunkte als solche auszeichnen. Dann kannst du sowohl auf die br als auch auf class="menu" verzichten.

Danke für den Hinweis Matthias. Wie mache ich das denn genau?

<div id="menu">   <h3>Wegweiser</h3>   <ul>     <li><a href="...">Link</a></li>     <li>aktuelle Seite</li>     <li><a href="...">Link</a></li>     <li><a href="...">Link</a></li>   </ul> </div>

im CSS

#menu ul {list-style-type: none; } //oder was passendes #menu a {}// Formatierung für die Verweise #menu li {}// Formatierung für die aktuelle Seite

Matthias

[Der Martin]

Hallo,

im CSS

#menu ul {list-style-type: none; } //oder was passendes
#menu a {}// Formatierung für die Verweise
#menu li {}// Formatierung für die aktuelle Seite

und bitte darauf achten, für Real-Life-Stylesheets nicht das Token // für einen Kommentar zu verwenden. Das gibt's in CSS nicht - hier werden Kommentare mit /* begonnen und mit */ beendet.

Ciao,
 Martin

[ChrisB]

Hi,

die Anforderungen, die du beschreibst, sind für aktuelles CSS eine ziemliche Herausforderung.

Die drei DIV-Container sollen übereinander stehen, das heißt die zwei oberen auf dem unteren aufbauen. Der untere soll in der Höhe variabel sein (je nach Auflösung) und an den zwei roten Fixpunkten (siehe Bilder unten) "befestigt" sein. Ich hab das mal in zwei Bildern dargestellt (eins für hohe Auflösungen, eins für niedrige).

Bei einer kleinen Auflösung, soll die Höhe des Content-Divs sich so verringern, dass die beiden oberen Div-Blöcke nach unten rutschen und zwar nur soweit, dass noch ein paar Pixel zwischen Apfelmotiv und Motto-Div sind.

Das lässt sich ggf. umsetzen, in dem du das ganze per display-Eigenschaft wie Tabellenzeilen/-zellen darstellen lässt.

Bei einer großen Auflösung soll sich die Höhe des Content-Divs sich so vergrößern, dass die beiden oberen Div-Blöcke soweit nach oben rutschen, dass das Motto-DIV genau mittig zwischen oberen Apfelrand und oberen Seitenrand steht.

Das wird schon schwieriger/aufwendiger.

Am einfachsten kommst du vermutlich zum Ziel, in dem du JavaScript zu Hilfe nimmst, um Elementhöhen dynamisch zu berechnen. (Bei Verwendung des resize-Events darauf achten, dass dieser sehr häufig feuert - also ggf. eine Verzögerung einbauen, bevor darauf reagiert wird.)

Für Clients ohne JavaScript gibt es dann ein Fallback-Layout, dass die Anforderungen halt nicht ganz optimal umsetzt.

MfG ChrisB