Div Design

Status
Nicht offen für weitere Antworten.
Oha, nen einfacheres Design konntest du dir nicht aussuchen oder?! :D

Also ich würde sagen das einzige ist genau das was du nicht machen willst, nämlich mehrere Div's schachteln.
Was anderes fällt mir davzu leider nicht ein und glaubig den anderen auch nicht.

Ich werde das hier trozdem mal weiter beobachten, vileicht hat ja einer noch ne super Idee :)
 
Wenn alle Elemente absolute Größen haben, kannst du sie auch absolut positionieren. Dann benötigst du eben nur diese neun Elemente.
Wenn sie jedoch flexible Größen haben sollen, wird es komplizierter. Dann ist es auch wichtig zu wissen, welche das sind und in welchem Kontext diese Flexibilität sein soll.
 
Ja ich weiß, kompliziert. Aber darf es auch nur umsetzen, es wurde von jemand anderem gestaltet. ;-) Deswegen bin ich auch schon am hin- und herüberlegen, wie ich es am praktischsten umsetze.

Das Design wäre übrigens die Übersichtsseite. Als Folgeseite würden sich die vier unteren Spalten zu einer zusammen fügen, dass wäre dann nicht mehr ganz so schwierig. Sollte ich vielleicht einfach die beiden linken Spalten auf float:left stellen und die rechts auf float:right und die dreit Spalten unten rechts in einen übergeordneten DIV stecken, der dann auch float:right hat?

Edit: Die untere Ebene (also der Teil in der Höhre der langen unteren Spalte links) soll flexibel nach unten sein. So dass sämtliche letzten Elemente flexibel nach unten erweiterbar sind, je nach Inhalt. (keine Flexibilität in der Breite)
 
Zuletzt bearbeitet:
Hi,

hier mal ein möglicher Lösungsansatz:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_MsvP@habdichliebhasi</title>

<style type="text/css">
<!--
#wrapper {
width:800px;
margin:0 auto;
}

.leftCol {
width:200px;
float:left;
clear:both;
}

.rightCol {
width:590px;
float:right;
}

#block_1 {
height:200px;
background:#ddd;
}

#block_2 {
height:80px;
background:#ddd;
}

#block_3, #block_4 {
height:50px;
background:#ddd;
margin-top:10px;
}

#block_5 {
min-height:500px;
height:auto !important;
height:500px;
background:#ddd;
}

#block_6 {
height:180px;
background:#ddd;
}

#block_7 {
min-height:310px;
height:auto !important;
height:310px;
width:190px;
float:left;
margin-top:10px;
background:#ddd;
}

#block_8 {
min-height:310px;
height:auto !important;
height:310px;
margin:10px 200px 0 200px !important;
margin:10px 197px 0 197px;
background:#ddd;
}

#block_9 {
min-height:310px;
height:auto !important;
height:310px;
width:190px;
float:right;
margin-top:10px;
background:#ddd;
}

.marginTop {
margin-top:10px;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div class="leftCol">
          <div id="block_1">block_1</div>
     </div>
     <div class="rightCol">
          <div id="block_2">block_2</div>
          <div id="block_3">block_3</div>
          <div id="block_4">block_4</div>
     </div>
     <div class="leftCol marginTop">
          <div id="block_5">block_5</div>
     </div>
     <div class="rightCol marginTop">
          <div id="block_6">block_6</div>
          <div id="block_7">block_7</div>
          <div id="block_9">block_9</div>
          <div id="block_8">block_8</div>
     </div>
</div>

</body>
</html>
 
Nabend zusammen :-)

Ja, so in etwa werde ich das dann wohl auch machen. Ist zwar einwenig DIV in DIV aber scheint nicht besser zu gehen.

Danke für eure Hilfe.

Lg
Micha
 
Status
Nicht offen für weitere Antworten.
Zurück