CSS/HTML: Sternformen

[Blaubart]

Tach.

Ich möchte vier Blöcke folgendermaßen anordnen:

aaaaabbbbbb
aaaaabbbbbb
aaaaa ccccc
aaaaa ccccc
ddddddccccc
ddddddccccc

Mit fester Höhe/Breite und float wird das nichts, weil die nachrutschenden Blöcke (z. B. bei float:left der mit d markierte) an den höheren (im Bild: a) hängenbleiben und sich nicht darunterschieben können.

Absolute Positionierung setzt für variable Blockgrößen stets neu berechnete Positionen voraus. Das würde ich gerne vermeiden zugunsten einer "statischen" Variante, bei der das CSS nicht dynamisch generiert werden muß.

Bliebe noch der Umweg über eine Layouttabelle:

  
<table>  
<tr>  
    <td rowspan="2">a</td>  
    <td colspan="2">b</td>  
</tr>  
<tr>  
    <td></td>  
    <td rowspan="2">c</td>  
</tr>  
<tr>  
    <td colspan="2">d</td>  
</tr>  
</table>  

Welche weiteren Alternativen sehr Ihr?

[bleicher]

Grüße,
viel spaß damit:

  
<style type="text/css">  
<!--  
#a {  
width:40px;  
height:140px;  
float:left;  
border:solid 2px red;  
background-color:#400;  
}  
#b {  
width:60px;  
height:40px;  
float:left;  
border:solid 2px red;  
background-color:#050;  
}  
  
#c {  
width:60px;  
height:40px;  
float:left;  
border:solid 2px red;  
background-color:#00c;  
}  
  
#d {  
width:40px;  
height:140px;  
float:left;  
border:solid 2px red;  
background-color:#4f0;  
margin-top:-100px;  
}  
 -->  
</style>  

  
<div id="a"></div>  
<div id="b"></div>  
<br>  
<span style="clear:both"></span>  
<div id="c"></div>  
<div id="d"></div>  
  

MFG
bleicher

[bleicher]

Grüße,
habe es nur schnel im IE angepast - entferne den border und pass  die verschiebung für browser ohne box-fehler an.
MFG
bleicher

[Blaubart]

Tach.

viel spaß damit:

Hmm, dieser Ansatz krankt u. a. am gleichen Problem wie die absolute Positionierung: keine veränderlichen Blockgrößen möglich, ohne auch das CSS zu ändern.

[bleicher]

Grüße,

Hmm, dieser Ansatz krankt u. a. am gleichen Problem wie die absolute Positionierung: keine veränderlichen Blockgrößen möglich, ohne auch das CSS zu ändern.

in begrenztem maße kanns tdu die ändern. viel flexibler kann ich es mir aber nciht vorstelln, da der logorithm recht omplex wäre - allein das mit höhe wäre schon hemorroidenwert - faux columns würde ja nicht gehen. divgröße ohne JS zu synchronisieren scheint grundsätzlich schlecht zu gehen.

MFG
bleicher

[at]

Hallo.

in begrenztem maße kanns tdu die ändern. viel flexibler kann ich es mir aber nciht vorstelln, da der logorithm recht omplex wäre - allein das mit höhe wäre schon hemorroidenwert

Du solltest deine Beiträge wirksamer verschlüsseln. Dieser war schon fast lesbar.
MfG, at

[Malcolm Beck´s]

hi,

Ich möchte vier Blöcke folgendermaßen anordnen:

aaaaabbbbbb
aaaaabbbbbb
aaaaa ccccc
aaaaa ccccc
ddddddccccc
ddddddccccc

Ahh, jetzt verstehe ich ... Nach dem dritten Ansatz :)

Mit fester Höhe/Breite und float wird das nichts, weil die nachrutschenden Blöcke (z. B. bei float:left der mit d markierte) an den höheren (im Bild: a) hängenbleiben und sich nicht darunterschieben können.

Height brauchst du ansich garnicht, sofern ich dich richtig verstanden habe.

Welche weiteren Alternativen sehr Ihr?

Auf meinem System funktioniert mein verlinktes Beispiel sowohl im FF 2.0.16 und IE 6, skalieren funzt[TM] auch, bleibt noch die frage, ob ich dich richtig verstanden hab.

mfg

[Blaubart]

Tach.

Mit fester Höhe/Breite und float wird das nichts, weil die nachrutschenden Blöcke (z. B. bei float:left der mit d markierte) an den höheren (im Bild: a) hängenbleiben und sich nicht darunterschieben können.

Height brauchst du ansich garnicht, sofern ich dich richtig verstanden habe.

Die einzelnen Buchstaben in den Blöcken waren zwar nur zur Markierung im Forum und nicht der eigentliche Inhalt, aber ansonsten hast Du's glaub ich richtig verstanden. Das sieht auch ganz brauchbar aus. Danke schonmal dafür! Ich werde noch ein bißchen damit herumspielen und sehen, wie weit ich damit im praktischen Einsatz komme.

[Malcolm Beck´s]

hi,

Height brauchst du ansich garnicht, sofern ich dich richtig verstanden habe.

Die einzelnen Buchstaben in den Blöcken waren zwar nur zur Markierung im Forum und nicht der eigentliche Inhalt, aber ansonsten hast Du's glaub ich richtig verstanden.

Mit den Buchstaben hatte ich auch meine bedenken, es funktioniert aber auch direkt mit heights für die einzelnen Boxen, Update, dass einzige, worauf du achten musst ist die umschliessende Box, in der die kleinen stecken.

mfg

[Blaubart]

Tach.

dass einzige, worauf du achten musst ist die umschliessende Box, in der die kleinen stecken.

Genau das fiel mir kurz nach dem ersten Blick auf Dein ursprüngliches Beispiel auch auf. Womit ich doch wieder bei der Beschränkung bin, daß sich die Größe der Blöcke nicht einfach so ändern kann, ohne daß diese im CSS-Code bekannt wäre und dort ebenfalls geändert werden müßte. Nun gut, das heißt dann wohl entweder dynamisch generiertes CSS oder Layouttabelle.