Div's in CSS gleich groß machen?

[Lupinus]

Ich probiere gerade ein Windows Design zu erstellen, scheitere jedoch an den Rändern ( http://eric.wiltfang.net/windoofs/test1.html ). Wie kann ich dafür sorgen, dass sie genau so hoch sind wie der Inhalt?

Hier der bisherige CSS-Code:

div.top_left{ height:30px; background-image:url(windoofs_top_left.png); width:33px;  margin:0px; padding:0px; float:left;}  
div.top_middle{ height:30px; background-image:url(windoofs_top.png); margin:0px; padding:0px; float:left;}  
div.top_right{ height:30px; background-image:url(windoofs_top_right.png); width:75px; margin:0px; padding:0px; float:left;}  
  
div.left{ background-image:url(windoofs_left.png); width:4px;  margin: 0 auto;; padding:0px; float:left; clear:both; cursor:w-resize;}  
div.content{ background-color:#ECE9D8; margin:0px; padding:5px; float:left;}  
div.right{ background-image:url(windoofs_right.png); width:4px; margin:0px; padding:0px; float:left; cursor:w-resize;}

[suit]

Ich probiere gerade ein Windows Design zu erstellen, scheitere jedoch an den Rändern ( http://eric.wiltfang.net/windoofs/test1.html ). Wie kann ich dafür sorgen, dass sie genau so hoch sind wie der Inhalt?

die clear-eigenschaft wird dir helfen

ggf solltes du dich auch noch mit runde-ecken-techniken auseinandersetzen - mir kommt irgendwie vor, du hast doppelt so viele elemente wie notwenidig

[Felix Riesterer]

Lieber Lupinus,

<div>

<div class="top_left"></div>
<div class="top_middle" style="width:100px"></div>
<div class="top_right"></div>
</div>
<div>
<div class="left">&nbsp;</div>
<div class="content" style="width:190px">Text Text Text Text Text Text Text Text Text Text Text Text Text </div>

<div class="right">&nbsp;</div>
</div>

  
diesen Code nennt man gemeinhin auch "DIV-Suppe". Du baust hier auf höchst nicht-sinntragende Weise eine HTML-Struktur, die so nicht zu sein bräuchte.  
  
Gegenvorschlag:  
~~~html
<div class="win">  
    <span class="win_bar"></span>  
    <span class="win_buttons"></span>  
    <span class="win_content"></span>  
    <span class="win_footer"></span>  
    <span class="win_resize"></span>  
</div>

Diese Elemente sollten genügen. Außerdem ist die Struktur logischer, da ich nur ein gruppierendes Element einsetze, das auch tatsächlich andere Elemente zu einer Gruppe zusammenfasst.

Der Fensterbalken kann eine seeeehr lange blaue Grafik mit runden Ecken am Anfang sein. Und die Buttons sind auch eine Grafik mit einer runden Ecke, diese aber eben rechts. Und der "content" hat auch ein Hintergrundbild, nämlich den linken Fensterrand. Das umspannende <div>-Element wiederum hat den rechten Fensterrand. Den unteren Rand des Fensters gestaltest Du mit dem "win_footer", der als rechtes Eck-Element das vergrößern-Icon enthalten kann (oder eben nur eine runde Ecke).

Das mit CSS muss ich Dir ja nicht erklären, oder?

Liebe Grüße,

Felix Riesterer.

[Cheatah]

Hi,

diesen Code nennt man gemeinhin auch "DIV-Suppe". Du baust hier auf höchst nicht-sinntragende Weise eine HTML-Struktur, die so nicht zu sein bräuchte.

ja.

Gegenvorschlag:

<div class="win">

<span class="win_bar"></span>
    <span class="win_buttons"></span>
    <span class="win_content"></span>
    <span class="win_footer"></span>
    <span class="win_resize"></span>
</div>

>   
> Diese Elemente sollten genügen. Außerdem ist die Struktur logischer, da ich nur ein gruppierendes Element einsetze, das auch tatsächlich andere Elemente zu einer Gruppe zusammenfasst.  
  
Schon, nur ist der Inhalt in höchstem Maße sinnfrei: Er besteht aus Elementen, die einen Inhalt erwarten (bzw. genauer gesagt in einen Inhalt gehören), aber keinen haben. Wie wäre es denn beispielsweise mit einer Liste für die Funktions-Elemente? Als Inhalt der Listenpunkte eignet sich ihre textuelle Bezeichnung. Warum keine Überschrift für die Titelzeile? Es ist doch schließlich eine! Genau dies ist die Entscheidungsgrundlage für die Wahl des HTML-Codes.  
  

> Der Fensterbalken kann eine seeeehr lange blaue Grafik mit runden Ecken am Anfang sein.  
  
Ja. Und wenn ich noch etwas Feedback zum Layout geben darf: Herrje, warum denn unbedingt das Teletubby-Land? Keine GUI ist hässlicher ...  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes

[suit]

Ja. Und wenn ich noch etwas Feedback zum Layout geben darf: Herrje, warum denn unbedingt das Teletubby-Land? Keine GUI ist hässlicher ...

ACK

luna ist nur in silber und mit verkleinerten fensterkontrollen vertretbar, die blaue variante ist heftigst hässlich (aber das ist geschmackssache)