XHTMLforum - Problem mit einem CSS Layout

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Problem mit einem CSS Layout (http://xhtmlforum.de/showthread.php?t=35501)

Problem mit einem CSS Layout

Hallo, ich habe eine Aufgabe bekommen, dieses Layout mit CSS umzusetzen. Es dürfen keine Tabellen verwendet werden. Es geht um den DATA (blau) Bereich. Leider scheitere ich im Moment daran. Kann mir eventuell jemand behilflich sein?

Es sind ins gesamt 3 Layer (blau, grün, rot). Der blaue Layer soll 900px breit und 100% hoch sein, dabei sollte der Header und Footer beachtet werden, also solte sich der Bereich nur im Browserfenster ausbreiten, und nicht daraus schießen.

Beim grünem Layer, sind es ingesamt 4 div`s. Das war leider notwendig, da je ein Bereich ein unterschiedliches Hintergrundbild enthält. Hier hatte ich schon das erste Problem, was die Anordnung der divs angeht.

Der rote Layer, ist der eigentliche Datenbereich, auf der linken Seite sollen Inhalte dargestellt werden, rechts die News. Das Problem hier ist, das beide Bereiche den grünen Layer überdecken müssen. Auch hier hatte ich das Problem bei der div Anordnung.

Ich habe noch ein Bild von der Aufgabe angehängt, so kann es vielleicht besser veranschaulicht werden.

Würde mich sehr freuen wenn mir jemand bei diesem Problem helfen könnte.

http://www.css4you.de/float.html könnte dir sicher weiterhelfen..

Wenn er die Ebenen wirklich so übereinander positionieren will, bringt ihm float nicht viel ...

Interessanter wäre es aber zu wissen, wie das Design der Seite aussieht. Vielleicht kann man es anders umsetzen, als nARC sich das vorstellt ;)

Das Design der Webseite kann ich natürlich nicht zeigen.
Nur so viel, das beim grünem Layer eben bei jedem Element Hintergrundbilder sind. Deshalb das ganze auch so umständlich.

Zitat:

Zitat von nARC

Das Design der Webseite kann ich natürlich nicht zeigen.

das ist gut, da kann man dir umso besser helfen ;) css html auch nicht?

Nein HTML / CSS leider auch nicht, es ist ein CMS aus welchem ich nicht einfach so HTML raus kopieren kann.

Eigentlich ist doch alles gegeben. Habe doch ein gutes Bild erstellt, welches das Problem veranschaulicht.

Zitat:

Eigentlich ist doch alles gegeben. Habe doch ein gutes Bild erstellt, welches das Problem veranschaulicht.

Umgekehrt könnte man auch sagen: Mach es doch so wie das gute Bild veranschaulicht...

Wie stellst Du Dir eine 100% Höhe des blauen "Layers" (ich nehme an, Du meinst eine DIV-Box) vor, wenn darüber und darunter noch der Header und Footer sind? Das macht 100% plus 2x170px. Also ist die Höhe der Seite immer über 100%. Vermutlich willst Du, dass die blaue Box den gesamten noch verfügbaren Platz zwischen Header und Footer einnimmt. Das ist in verschiedener Hinsicht möglich, u.a. in einem Link meiner Sig beschrieben.

wenn die Seite in der Breite fest skaliert ist, sind die vier Hintergrundbilder der grünen Boxen dann nicht zusammenzufassen und als ein Bild einzubinden? Dann gestaltet sich der Rest etwas einfacher. Schau Dir auf css4you an wie man Hintergrundbilder positionieren kann.

Die roten Boxen kannst Du so positionieren, dass sie über den anderen liegen. Der z-index definiert, wer bei überlappenden Boxen "oben" ist.
Boxen nebeneinander werden mit float angeordnet, wenn eine "neue Zeile" erfolgen soll, also der float bendet werden soll, macht man ein clear.

Sorry, aber ohne Code kann man das nur theoretisch erklären, Du hast sicher Verständnis dass Dir hier keiner gratis passenden Code zu einer Grafik als Vorlage erstellt.

Was spricht denn dagegen, wenn Du eine groben Aufbau mit Dummybildern bastelst und den Code dann hier zeigst? Das Design ist da schnuppe, und das Layout hast Du ja im JPG "verraten".

Zitat:

Das Design der Webseite kann ich natürlich nicht zeigen.

Wieso? Früher oder später ist es doch eh online. Hast Du Angst, wir könnten Dir was "klauen"? Ich bitte Dich ... :roll:

Zitat:

Zitat von mazzo

Zitat:

Eigentlich ist doch alles gegeben. Habe doch ein gutes Bild erstellt, welches das Problem veranschaulicht.

Umgekehrt könnte man auch sagen: Mach es doch so wie das gute Bild veranschaulicht...

Würde ich keine Hilfe brauchen würde ich nicht Fragen :!:

Zitat:

Wie stellst Du Dir eine 100% Höhe des blauen "Layers" (ich nehme an, Du meinst eine DIV-Box) vor, wenn darüber und darunter noch der Header und Footer sind? Das macht 100% plus 2x170px. Also ist die Höhe der Seite immer über 100%. Vermutlich willst Du, dass die blaue Box den gesamten noch verfügbaren Platz zwischen Header und Footer einnimmt. Das ist in verschiedener Hinsicht möglich, u.a. in einem Link meiner Sig beschrieben.

Genau, das der DATA bereich ausgedehnt wird, und der Header und Footerbereich eben an die "Kante" des Brwoserfensters angeasst werden.

Zitat:

wenn die Seite in der Breite fest skaliert ist, sind die vier Hintergrundbilder der grünen Boxen dann nicht zusammenzufassen und als ein Bild einzubinden? Dann gestaltet sich der Rest etwas einfacher. Schau Dir auf css4you an wie man Hintergrundbilder positionieren kann.

Nein, genau das geht ja nicht, da der Bereich skalierbar seien muss, ist es notwendig die Bilder in diese vier Boxen zu verschachteln. Damit es schön dynamisch bleibt. Wie ich die Bilder per CSS auf meine Webseit ebekomme weiß ich. Habe mich bereicht ausgiebig über CSS und die Syntax informiert. Habe lediglich ein Problem bei diesem Konstrukt wie auf dem Bild zu sehen.

Zitat:

Die roten Boxen kannst Du so positionieren, dass sie über den anderen liegen. Der z-index definiert, wer bei überlappenden Boxen "oben" ist.
Boxen nebeneinander werden mit float angeordnet, wenn eine "neue Zeile" erfolgen soll, also der float bendet werden soll, macht man ein clear.

Dies ist mir bereits bekannt. Aber trozdem danke.

Zitat:

Sorry, aber ohne Code kann man das nur theoretisch erklären, Du hast sicher Verständnis dass Dir hier keiner gratis passenden Code zu einer Grafik als Vorlage erstellt.

Was spricht denn dagegen, wenn Du eine groben Aufbau mit Dummybildern bastelst und den Code dann hier zeigst? Das Design ist da schnuppe, und das Layout hast Du ja im JPG "verraten".

Na jut, hier mein Konstrukt, den ich versucht habe zu generieren.

Code:

<div id="container">

        <div id="header">Header</div>



        <div id="data">

                <div id="dx">

                        <div id="d1">D1</div>

                        <div id="d2">D2</div>

                        <div id="inhalt">Inhalt</div>

                </div>

                <div id="nx">

                        <div id="n1">N1</div>

                        <div id="n2">N2</div>

                        <div id="news">News</div>

                </div>

        </div>



        <div id="footer">Footer</div>

</div>

Code:

* {

        margin:                        0;

        padding:                0;

}

body {

        text-align:                center;

}

#container {

        position:                relative;

        margin:                        0 auto;

        width:                        900px;

        text-align:                left;

}

#header, #footer {

        height:                        170px;

        background-color:        #b9b9b9;

}

#data {

        padding:                20px;

        background-color:        #008cbf;

}

#dx {

        position:                relative;

        float:                        left;

        width:                        597px;

}

#nx {

        position:                relative;

        width:                        248px;

        margin-left:                607px;

}

#d1, #d2, #n1, #n2 {

        height:                        248px;

        background-color:        #09be01;

}

#d1, #n1 {

        margin-bottom:                10px;

}

#inhalt, #news {

        background-color:        #be0030;

}

#inhalt {

        position:                absolute;

        top:                        12.5%;

        right:                        0;

        width:                        451px;

        height:                        75%;

}

#news {

        position:                absolute;

        top:                        12.5%;

        left:                        0;

        width:                        90px;

        height:                        75%;

}

@Boris
Wenn du keine Konstruktive Kritik zu diesem Thread beitragen kannst, dann lass doch dieses du mich ich dich wech, würdest dir und den anderen viel Zeit mit ersparen ;)

i've got the picture, now you give me some code ...

Ein kurzer Vorschlag: Die grünen Teile sollen doch nur Hintergrundbilder sein, oder? Dann brauichst Du keine absolut positioniere DIVs. Schmeiss; d1, d2, n1, d2 raus, tue jeweils ein zweiites DIV in dx und nx (z.B. dx2, nx2) und setze die HG-BIlder von d1 auf dx und von d2 auf dx2 und positioniere sie mit background-position. Für n analog.

inhakt und news dürfen näturlich dann nicht mehr absolut positioniert sein, sondern benutze einfach margin, dann passt sich alles Textlänge an.

Robin

OK. Code is nu ja da.
Mir ists heute zu spät noch was zu tun, aber warum ist in dem Bildbeispiel die Aufteilung 50-50 und der Code zeigt links eine viel breitere Box als rechts?

Schonmal in meine Sig geschaut wegen der Header und Footer Positionierung? Hilft Dir das?

falls es Dir hilft, hier ein noch mit heisser Nadel gestrickter und somit etwas unausgegorener, aber immerhin valider ;), Code.
"Probleme":
- #dx und #nx sind in #data noch nicht horizontal zentriert, warum auch immer;
- die Höhe von #data und den "Hintergrundboxen" sind noch fix, ebenso wie die von Dir vorgegebene Breite,
- an den margins und paddings kann man noch ordentlich schrauben

Aber dafür ist es jetzt ohne absolute Positionierung und im Test unter Opera7.54/FF1.0.1/IE6 siehts etwa so aus wie in Deiner Beispielgrafik.

Die Aufgabenstellung finde ich aber interessant, leider hab ich keine zeit heute mehr daran zu werkeln.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head>

<title>Test</title>

</head>

<style type="text/css">

* {

   margin:         0;

   padding:      0;

}

body {

   text-align: center;

}

#container {

   margin: 0 auto;

   width:  900px;

   text-align: left;

}

#header, #footer {

   height: 170px;

   background-color:   #b9b9b9;

}

#footer{

        clear: left;

}

#data {

   background-color:   #008cbf;

   height: 400px;

   margin: 0 auto;

}

#dx, #nx {

   float: left;

   width: 42%;

   height: 70%;

   border: 1px solid #f00;

   margin: 10px 10px 10px 10px;

}

#dx2top, #nx2top{

        position: relative;

        left:0px; 

  top:10px;

  height: 100px;

        margin-bottom: 20px;

        background-color: #FFF;

        background-image: url(test1.jpg);

}

#dx2bottom, #nx2bottom{

        position: relative;

        left:0px; 

  top:50px;

        height: 100px;

        margin-top: 20px;

        background-color: #FFF;

        background-image: url(test2.jpg);

}

#inhalt, #news {

   position: relative;

   left:0px; 

   top:-200px;

   background-color: #be0030;

}

#inhalt {

        margin-left: 50px;

}

#news {

        margin-right: 50px;

}



</style>

<body>

<div id="container">

   <div id="header">Header</div>



   <div id="data">

      <div id="dx">

         <div id="dx2top">DX2 top</div>

         <div id="dx2bottom">DX2 bottom</div>

         <div id="inhalt">Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

</div>

      </div>

      <div id="nx">

         <div id="nx2top">NX2 top</div>

         <div id="nx2bottom">NX2 bottom</div>

         <div id="news">News

News

News

News

News

News

News

News

News

News

News

News

</div>

      </div>

   </div>



   <div id="footer">Footer</div>

</div>

</body>

</html>

@mazzo
Schöner Lösungsansatz, danke dafür. Jedoch funktioniert das Konstrukt unter FF 1.0.4 nicht. Der Data Layer wird nicht skaliert, sowie DX2 top und DX2bottom. Wenn Im Layer Inhalt content rein kommt, wird dieser zwar angezeigt, abereben im unskalierten bereich.

Ich habe hier ein Screenshot erstellt:

http://angel-owners.de/tmp/FFlayout.jpg

sowas hab ich befürchtet, das Wort "Lösungsansatz" sollte vor allem auf dem zweiten Wort betont werden...

Wenn es Dir gelingt, die #data relativ in der Höhe zu gestalten (was Du ursprünglich mti height: 100% meintest, also so hoch wie nötig, um zwischen header und footer alles auszufüllen) sollte das nicht mehr passieren. Die Ursache ist sicher, dass ich der Einfachheit halber für #data eine fixe Höhe eingegeben hab, wenn die von einem DIV innerhalb #data überschritten wird passiert was auf dem Screenshot zu sehen ist.

Irgendwie ist das alles sehr depremierend. Ich habe früher immer mit Tabellen das Design definiert. Jaja ich weiß, eigentlich darf das nicht gemacht werden. Deshalb wollte ich nun bei meinem neuen Projekt alles mit CSS umsetzen. Doch leider haut das irgendwie nicht hin. Ich habe die alten Entwurfe jetzt verworfen, und habe gerade komplett alles neu aufgebaut. Aber auch jetzt funktioniert es nicht. Wenn ich nun in den roten Layer Conten übergebe, wird das Konstrukt nicht skaliert. Ich weiß langsam nicht mehr weiter. Hier der Code und der Layoutplan als Bild. Hoffe mir kann jemand helfen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>

<style type="text/css" media="screen">

*                 { margin: 0; padding: 0;}

body            { height: 100%; text-align: center; background-color: #868369; }

div#container   { width: 857px; height: auto; text-align: left; margin: 0 auto;  border: 1px solid blue; }

#head         { height: 170px; background-color:   #b9b9b9; }

#ubgng       { height: 45px; background-color:   #b9b9a1; }

#data         { background-color: #008cbf; margin: 0 auto; }

#foot          { height: 68px; background-color:   #b9b9b9;}

#dx            { position: relative; width: 600px; float: left; height: auto; background-color: #FFD200; }

#nx            { position: relative; width: 257px; float: right; left: 0px; height: auto; background-color: #FFD200;  }

#d1             {  position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }

#d2             {  position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }

#n1             {  position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00; }

#n2             {  position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00;  }

#inhalt    { position: absolute; width: 525px; margin: 5px; top: 7%; left: 40px; background-color: #BE0031; white-space: wrap }

#news     { position: absolute; width: 200px; margin: 5px; top: 7%; left: 28px; background-color: #BE0031; }

</style>

</head>

<body>

        <div id="container">

                <div id="head">HEADER</div>

                <div id="ubgng">FADEÜBERGANG</div>

                <div id="dx">

                        <div id="d1">D1</div>

                        <div id="inhalt">INHALT</div>

                        <div id="d2">D2</div>

                </div>

                <div id="nx">

                        <div id="n1">N1</div>

                        <div id="news">NEWS</div>

                        <div id="n2">N2</div>

                </div>

                <div id="foot">FOOTER</div>

        </div>        

</body>

</html>

http://angel-owners.de/tmp/Layout.jpg

Der IE kennt position: fixed; nicht einmal, das kannst Du vergessen. ;)

@Boris
Kostruktive Kritik, soetwas liebe ich ja.

Ist mir auch schon aufgefallen, im IE wird es halbwegs vernünftig angezeigt, im FF ist es zwerhackt. Irgenwie alles Kagge. Und skaliert wird es immer noch nicht.

http://angel-owners.de/tmp/IElayout.jpg

Das war keine Kritik, das war eine reine Feststellung eines IE-Problems als Information an Dich.

@Boris, ist kein Problem. Nur habe ich so einen Hals auf mich das ich das net hinbekomme, obwohl ich schon Seitenweise CSS Stoff mir rein gezogen habe. Die ganzen popeligen standard Layout ist ja kein Problem. Kaum hat man eine anspruchsvollere Augabe, scheitert man an dieser, weil CSS etwas nicht kann oder ich selbst ;)

Deshalb hoffe ich das mir hier ein Experte helfen kann. Will ja von dem Tabellenlayout weg kommen.

Das ist noch nicht ganz das, was Du brauchst, aber ein Ansatz:
http://www.stunicholls.myby.co.uk/layouts/bodyfix.html

Dein Teil ist irgendwie schwer realisierbar, da man mit CSS (was die Höhenangaben betrifft) nicht 100% Höhe minus diverse px-Angaben "errechnen" lassen kann - was hier nötig wäre, wenn Du wirklich so viele verschied gemischte Container brauchst.

Wie schon gesagt, wäre es interessanter, das Enddesign zu sehen um vielleicht einen anderen Ansatz bei der Realisierung in HTML und CSS zu suchen. Denn solange man in Tabellen denkt, ist es schwer, bestimmte Designs umzusetzen - man muss bei CSS komplett anders denken / planen.