✔ Templateerstellung: Probleme

[msycho]

Hallo!

Ich erstelle gerade ein Template für das CMS Joomla. Bin momentan noch dran erstmal das Grundgerüst der Seite aufzubauen.
Es gibt aber zwei Probleme: Und zwar passen sich die Container von Menu und Content nicht genau dem Inhalt an. Sie springen über den Elterncontainer middle bzw. page.
Ich habe hier mal Auszüge aus der index.php und des Stylesheets.

<div class="page">
 <div class="topnavi"></div>
  <div class="middle">
   <div class="main">
    <div class="banner"></div>
    <div class="content"><?php mosMainBody(); ?></div>
   </div>
   <div class="menu"><?php mosLoadModules ( 'right' ); ?></div>
  </div>
</div>

html, body {
 width: 100%;
 height:100%;
}
body {
 background-color: #fff;
 color: #000;
 margin: 0;
 padding: 0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 /*background-color: #EAEFFF;*/
 /*background-image: url(../images/bg.gif);*/
}
.page {
 width: 800px;
 height: 100%;
 border: 1px solid #000;
 background-color: #ccc;
 margin: 0 auto;
 padding: 5px;
}
.topnavi {
 background-color: #666;
 width: 100%;
 height: 30px;
 margin-bottom: 5px;
}
.middle {
 width: 800px;
 height: 100%;
 margin-bottom: 5px;
}
.main {
 width: 600px;
 height: 100%;
 float: left;
}
.banner {
 height: 120px;
 background-color: #666;
 margin-bottom: 5px;
}
.content {
 height: 100%;
 background-color: #666;
}
.menu {
 width: 195px;
 height: 100%;
 background-color: #666;
 float: right;
}

Zu Verständlichkeit habe ich auch noch zwei Screenshots angehängt. Das erste ist der obere Teil, das zweite der untere Teil.

Habt Ihr eine Idee, wie es zu dem Problem kommt? Gebe ich den Klassen menu und content eine feste Höhe, passt alles. Nur das muss halt variabel sein.

 

[Maik]

Hi,

der erste Grund für den Darstellungsfehler ist die fehlende clear-Eigenschaft, die nach den floatenden Boxen erforderlich ist, um wieder den normalen Textfluss im Dokument herzustellen:

<div class="page">
 <div class="topnavi"></div>
  <div class="middle">
   <div class="main">
    <div class="banner"></div>
    <div class="content"><?php mosMainBody(); ?></div>
   </div>
   <div class="menu"><?php mosLoadModules ( 'right' ); ?></div>
   <div style="clear:both;"></div>
  </div>
</div>

Der zweite Grund sind die 100%-Höhenangaben der einzelnen DIVs, die in den modernen Browsern zu dem Überlappen der Spalten führt.

In meinem angehängten Lösungvorschlag simuliere ich die beiden Spalten mit einer Hintergrundgrafik, die in dem DIV page senkrecht wiederholt wird und dafür sorgt, dass die beiden Spalten immer die gleiche Höhe besitzen.

Vielleicht hilft dir das weiter?

 

[msycho]

Ich danke Dir erstmal für deine ausführliche Hilfe!

Ich habe jetzt aber im Prinzip nur das in die Klasse page eingefügt:

 min-height: 100%;
 height: auto !important;
 height: 100%;

und das Umfließen der Elemente beendet. Also nichts mit der Grafik. Und siehe da, es funktioniert. Oder ist das Zufall?

Noch eine Frage zu den 3 o.g. Angaben: Wieso 3 mal? Einmal für Firefox, einmal für IE und einmal für alle Browser?

 

[Maik]

Die grafikfreie Lösung

min-height: 100%; /* Mindesthöhe für moderne Browser */
height: auto !important;  /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe für IE */

für die Klasse .page hatte ich auch zunächst in Betracht gezogen, nur habe ich dann bei mir festgestellt, dass sich die beiden Spaltenhöhen in den modernen Browsern bei wenig Inhalt nicht auf die 100% ausdehnen.

Aber wenn du damit leben kannst bzw. es nicht deine Intention war, dann soll es mir auch recht sein.

 

[msycho]

Alles klar. Wieder einiges gelernt. Nochmal danke.

Ich habe aber jetzt nur eine kleine Ungereimtheit: Und zwar ist, wenn der Inhalt "kurz" ist, am unteren Ende noch "etwas" Platz. Ist "viel" Inhalt, dann passt alles, also sprich die Klasse middle schließt schlüssig mit der Klasse page ab. Ansonsten ist zw. dem Ende der Klasse middle und page bestimmt ein Abstand von 60px.
Hast Du da eine Idee? Oder ist das jetzt auf die "grafikfreie Lösung" zurückzuführen?

 

[Maik]

Vermutlich bist du nun auch über die fehlende 100%-Höhe gestolpert, von der ich eben berichtet habe.

 

[msycho]

Die Höhe ist doch aber drin?
Wenn ich die Grafik einbaue, führt das zu keinen Änderungen.

 

[Maik]

Hi,

kannst du die Seite mal online stellen, damit man da einen Blick drauf werfen kann?

Denn momentan weiss ich nicht, was du konkret meinst, und kann das "neue" Problem bei mir auch nicht feststellen.

 

[Maik]

Hallo!

Die Seite erreichst Du unter http://www.****.de. Ist aber nur kurz für Dich online gestellt.
Mir ist eben aufgefallen, dass das Problem mit den überflüssigen 60px am unteren Rand nicht im IE auftritt. Stattdessen ist die Seite im IE nicht mittig.

Ich muss mich korrigieren: Auch im IE tritt das Problem auf, dass am unteren Bildschirmrand ein großer Freiraum ist.

Hi,

wenn du mit der Hintergrundgrafik arbeitest und das empfohlene Stylesheet vollständig, und nicht nur Fragmente daraus übernimmst, sollten bei dir keine Lücken zum unteren Bildschirmrand entstehen.

Mein zweites Lösungsbeispiel, das vom Grundprinzip her auf dem gestrigen beruht, habe ich im HTML- und CSS-Code um den hinzugekommenen Footer erweitert, den Inhalt in den beiden Spalten .content / .menu eingefügt und anschliessend das CSS-Layout in allen mir zur Verfügung stehenden Browsern erfolgreich getestet.

Meine Testumgebung: Win2k Prof. SP4, Firefox 2.0, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 9.02 und SeaMonkey 1.0.5

 

[msycho]

Eins A! Nun passt alles!

Ich danke Dir für Deine Mühen und dem damit verbundenen Zeitaufwand!
Den Trick mit dem Image muss ich mir merken.