divs im div sollen dessen Höhe bestimmen - geht das?

[Matthias Jütte]

Hallo zusammen!

Es geht um folgendes Beispiel: http://www.makaio.de/test/scripts/
CSS gibt's hier: http://www.makaio.de/test/styles/basic.css

Ich benutze folgende Funktion, um nach Belieben Rahmen (wechselnde Hintergrundfarben, runde Ecken, etc) für meine Inhalte zu erzeugen:

function generate_container ( $type, $frame_color, $body_color, $title, $content ) {
  echo "<div class="container container_type_".$type." container_body_".$body_color."">

<div class="con_top con_top_".$frame_color."">
        <div class="con_header con_header_".$frame_color."">".$title."</div>
    </div>

<div class="con_body con_body_".$frame_color."">".$content."</div>

<div class="con_bot con_bot_".$frame_color."">
        <div class="con_footer con_footer_".$frame_color.""> </div>
    </div>

</div>";
}

Nun erzeuge ich durch mehrfachen Aufruf der Funktion meine Inhaltselemente. Deren HTML-Code wird mittels Output-Buffering abschließend in die Variable $output geschrieben.

Diese wird dann in einem letzten Aufruf der Funktion verwendet, um die erzeugten Inhaltselemente in einen großen Container der gleichen Art zu schreiben. Also z.B.:

generate_container ( "main_box", "FFFFFF", "FFFFFF", "", $output )

Dies erzeugt den weißen Kasten für den Hintergrund.

Nun habe ich allerdings Probleme mit der Höhe des .con_body-Teils des weißen Rahmens (main_box). Dieser paßt sich zwar an die Höhe der darin enthaltenen Elemente an, für CSS scheint er allerdings ohne Inhalte zu sein, denn wenn man sich die Seite ansieht scheint der .con-bot-Abschnitt direkt unter .con-top zu hängen.

IE zeigt es natürlich brav an, aber ich will es erstmal vernünftig in Mozilla hinbekommen.

Any ideas?

Gruß

Matthias

P.S.: Und kann mir vielleicht jemand sagen, warum im IE für die Navigation keine Hintergundfarbe angezeigt wird?

[wahsaga]

hi,

Nun habe ich allerdings Probleme mit der Höhe des .con_body-Teils des weißen Rahmens (main_box). Dieser paßt sich zwar an die Höhe der darin enthaltenen Elemente an, für CSS scheint er allerdings ohne Inhalte zu sein, denn wenn man sich die Seite ansieht scheint der .con-bot-Abschnitt direkt unter .con-top zu hängen.

zitat aus deinem stylesheet:

.container {
 float: left;
}

float nimmt ein element bekanntlich aus dem elementfluss heraus, sprich es beeinflusst die höhe seines elternelementes nicht mehr.

um dies zu umgehen kann man direkt vor dem schliessenden tag des elternelementes noch ein weiteres (leeres) element einfügen, welches mit clear:left das floaten wieder aufhebt.

btw: ich finde deinen code-aufbau recht unübersichtlich, insbesondere das häufige vergeben mehrerer klassen für elemente.
darüber hinaus halte ich es für nicht sehr glücklich, farbbezeichnungen in klassennamen mit aufzunehmen, da du damit ja den vorteil von CSS, dein design leicht ändern zu können, verwässerst. (container_body_FFFFFF irgendwann mal mit schwarzer hintergrundfarbe zu definieren wäre ziemlich widersprüchlich.)

gruss,
wahsaga

[Matthias Jütte]

Hallo!

zitat aus deinem stylesheet:

.container {
float: left;
}

Tja, da hätte ich wohl mal besser hingeschaut...

darüber hinaus halte ich es für nicht sehr glücklich, farbbezeichnungen in klassennamen mit aufzunehmen, da du damit ja den vorteil von CSS, dein design leicht ändern zu können, verwässerst. (container_body_FFFFFF irgendwann mal mit schwarzer hintergrundfarbe zu definieren wäre ziemlich widersprüchlich.)

Das habe ich so gemacht, um später nach Belieben andere Farben für die Rahmen verwenden zu können, was dann durch die Definition eines neuen Satzes von Klassen erfolgen würde.
Beim Aufruf der Funktion generate_container() wird ja auch die Farbe mit übergeben und somit dynamisch die für den jeweiligen Rahmen zu verwendende Klasse in den Code geschrieben.
Die Trennung basiert ansonsten meist eigentlich darauf, allgemeine Definitionen von den farbspezifischen zu trennen.
Wenn du noch eine bessere Alternative vorschlagen kannst ist das immer willkommen. Du scheinst da "etwas" mehr Erfahrung zu haben als ich ;-)

Gruß

Matthias