CSS Boxen

[MastaKev]

Hallo,

und zwar ich habe para problemas.

Folgendes Bild möchte ich erreichen:
http://img192.imageshack.us/img192/3800/sirse.jpg

Und nun habe ich folgendes Problem, das id=main (Schwarzer Rand, ohne Innenabstand denken! (Ergo, nicht wie auf dem Bild)) ist nur ein Fingerhut groß, sämtliche anderen Boxen schießen über das id=main hinaus. Das soll aber nicht so sein. Da id=main die Hauptbox ist, soll sie mit der länge der anderen Boxen mitwachsen, damit von der id=main die Statusleiste id=statusleiste (rot) mit verschoben wird bzw. das elemet position=relative auch richtig funktioniert. So hängt es eben mitten im Bildschirm über den anderen Boxen, oder wer FF nutzt darunter.

Dann habe ich das Formfeld id=suche (pink), wenn diese box wächst, soll die Box darunter id=news (blau) darunter bleiben. Zur Zeit ist es so, dass die id=suche einfach unter der id=news hindurch geht. Ich habe news nicht geschafft so zu machen, dass es mitgeht, sondern eine feste Position hat. id=inhalt ist die orangene Box.

Hier der HTML Code:

  
 <div id='main'>  
  
   <div id='suche'>  
    text 2  
   </div>  
  
   <div id='news'>  
    kein text  
   </div>  
  
   <div id='inhalt'>  
    mehr text  
   </div>  
  
 </div>  
  
 <div id='statusleiste'>  
  text  
 </div>  

CSS-Code:

  
@charset "ISO-8859-1";  
html, body {  
 background-attachment: scroll;  
 background-color: #E0E0E0;  
 background-image:url(./hintergrund.png);  
 background-repeat: repeat;  
 height: 100%;  
 margin: 0cm;  
 min-width: 20cm;  
 padding: 0cm;  
 width: 100%;  
}  
body {  
 font-family: Verdana, Helvetica, Geneva, Arial, 'Times New Roman';  
 color: #000000;  
 font-weight: bold;  
 font-size: 10pt;  
}  
#main {  
 position: relative;  
 top: 1cm;  
 left: 5%;  
 width: 90%;  
 text-align: center;  
 vertical-align: middle;  
 padding: 0cm;  
 z-index: 1000;  
}  
#suche {  
 background-color: #FFFF00;  
 left: 0cm;  
 position: absolute;  
 height: 7cm;  
 width: 23%;  
 z-index: 1001;  
}  
#news {  
 background-color: #FF90FF;  
 left: 0cm;  
 top: 5cm;  
 position: absolute;  
 width: 23%;  
 z-index: 1001;  
}  
#inhalt {  
 background-color: #FF8800;  
 left: 23%;  
 position: absolute;  
 width: 77%;  
 z-index: 1001;  
}  
#statusleiste {  
 top: 4cm;  
 text-align: center;  
 background-color: #fed;  
 border: 2px solid #000;  
 left: 5%;  
 width: 90%;  
 position: relative;  
 z-index: 1000;  
}  
  

Falls ihr euch wegen z-index wundert, da ist noch mehr, aber das ist schon korrekt. Daher hat die id=main die einstellung relative, weil vorher noch boxen da sind die beim scrollen stehen bleiben und nicht überdeckt werden.

Ich Danke im Vorraus,
Gz,
MastaKev

[MudGuard]

Hi,

Und nun habe ich folgendes Problem, das id=main (Schwarzer Rand, ohne Innenabstand denken! (Ergo, nicht wie auf dem Bild)) ist nur ein Fingerhut groß, sämtliche anderen Boxen schießen über das id=main hinaus. Das soll aber nicht so sein.

Wenn das nicht so sein soll, warum benutzt Du dann position:absolute?

cu,
Andreas

[MastaKev]

Hi,

Und nun habe ich folgendes Problem, das id=main (Schwarzer Rand, ohne Innenabstand denken! (Ergo, nicht wie auf dem Bild)) ist nur ein Fingerhut groß, sämtliche anderen Boxen schießen über das id=main hinaus. Das soll aber nicht so sein.

Wenn das nicht so sein soll, warum benutzt Du dann position:absolute?

cu,
Andreas

weil mit relative auch nicht mein problem behoben wird. Es soll ja mitwachsen, keine andere position einnehmen. Mit der größe des Beitrags soll sich id=main auch verändern, genau wie die orangene Box.

[AdiK]

Hi MastKev

Ich würds so machen:

Hier der HTML Code:

  
 <div id="left">  

>   
>    <div id='suche'>  
>     text 2  
>    </div>  
>   
>    <div id='news'>  
>     kein text  
>    </div>  
>   

 </div>  

>   
>    <div id='inhalt'>  
>     mehr text  
>    </div>  
>   
>  <div id='statusleiste'>  
>   text  
>  </div>  

Im CSS-Code das nötigste:

  
#left {  
  float: left;  
  width: 111px;  
  margin-bottom: 155px  
}  
  
#inhalt {  
  float: left;  
  margin-left: 121px;  
  margin-bottom: 155px  
}  
#statusleiste {  
  clear: both;  
}  

Und dann ergänzt du im CSS einfach noch andere Dinge, die dir wichtig sind fürs Styling. Das hier ist nur das Grundgerüst.
Ich habe den obigen Code allerdings nicht ausprobiert. Vielleicht brauchts bei #inhalt noch eine max-width, damit die Box nicht plötzlich unter #left ist, wenn das Fenster schmal ist.

Ich denke jedenfalls, float und margin gehören zum richtigen Ansatz.

Lg,
AdiK