✔ Layout Probleme

[FingerSkill]

Hallo,

ich möchte hier http://game.computer-artists.com in der mitte der Seite (div Layer mit der id Content) genau so ein Design haben wie bei den Menüs da die Grösse der Ebene "Content" aber variabel zum Browserfenster sein soll, hab ich keine Ahnung wie ich das realisieren soll. Ich habs mit einer Tabelle probiert die width:100% war jedoch hats mir diese dann über das gesamte Fenster verschoben und nicht nur im vordefinierten Bereich.

Hoffe ihr könnt mir helfen.
Gruss Finga

 

[Maik]

Hi,

ich denke, dass dir mein angehängtes Beispiel in dem Thread Css Grafiken wie hier die Boxen ? weiterhilft, wie sich eine Box mit relativer Breite und abgerundeten Ecken umsetzen lässt.

 

[FingerSkill]

Hallo und danke für deine Hilfe, jetzt wollt ich nur fragen obs da nicht ne elegantere Lösung gibt ausser das ganze in 9 div Containern zu verschachteln.

Gruss Finga

 

[Maik]

Alternativ kannst du dich nach weiteren Möglichkeiten über 25 Rounded Corners Techniques with CSS umschauen.

 

[FingerSkill]

Hi, ich habs jetzt selber mal so halbregs gelöst, nur hab ich noch ein Problem, und zwar werden die ebenen für den Footer oben angezeigt und nicht nach der "ContentContent" Ebene in der "Bla Bla" steht.

Ich sitz jetzt schon seit bald 3 stunden davor und bekomms ned hin. Hoffentlich könnt ihr mir helfen.

Gruss & Dank, Finga

 

[Maik]

Hi,

versuch es doch einfach mal ohne die absoluten Positionierungen für die Elemente.

 

[FingerSkill]

Ich spiel ja schon die ganze zeit mit "position" aber irgendwie find ich die richtige Einstellung ned :'(

Bin am verzweifeln,

Gruss Finga

 

[Maik]

Und wie wäre es hiermit?

<div id="Content">
    <div class="ContentTopLeft"></div>
    <div class="ContentTopRight"></div>
    <div class="ContentTopCenter">Headline</div>
    <div class="ContentContent">Bla Bla</div>
    <div class="ContentBottomLeft"></div>
    <div class="ContentBottomRight"></div>
    <div class="ContentBottomCenter">Footer</div>
</div>

div.ContentTopLeft {
        background-color:#CCCCFF;
        float:left;
        width:20px;
        height:20px;
        margin-right:0 !important;
        margin-right:-3px;
        }

div.ContentTopCenter {
        background-color:#FFCCCC;
        height:20px;
        margin:0 20px !important;
        margin:0 17px;
        }

div.ContentTopRight {
        background-color:#CCCCFF;
        width:20px;
        height:20px;
        float:right;
        margin-left:0 !important;
        margin-left:-3px;
        }

div.ContentContent {
        text-align:left;
        padding-top:2px;
        padding-bottom:2px;
        padding-left:6px;
        padding-right:6px;
        background-color:#FFCCFF;
        clear:both;
        }

div.ContentBottomLeft {
        background-color:#CCCCFF;
        width:20px;
        height:20px;
        float:left;
        margin-right:0 !important;
        margin-right:-3px;
        }

div.ContentBottomCenter {
        background-color:#FFCCCC;
        height:20px;
        margin-left:20px !important;
        margin-left:17px;
        }

div.ContentBottomRight {
        background-color:#CCCCFF;
        width:20px;
        height:20px;
        float:right;
        margin-left:0 !important;
        margin-left:-3px;
        }

 

[FingerSkill]

Ahhh, super danke. Endlich funktionierts.

Gruss Finga

Nachtrag:

So ich hab jetzt nur noch eine Frage und zwar: wie bekomme ich die Ebenen neben ContentContent gleich hoch wie ContentContent?

Gruss Finga

 

[Maik]

Von welchen Ebenen sprichst du?