XHTMLforum

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)

nARC 19.05.2005 03:59

Problem mit einem CSS Layout
 
Liste der Anhänge anzeigen (Anzahl: 1)
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.

Swoop 19.05.2005 09:00

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

Boris 19.05.2005 11:15

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 ;)

nARC 19.05.2005 13:31

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.

Swoop 19.05.2005 13:36

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?

nARC 19.05.2005 13:58

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.

mazzo 19.05.2005 14:45

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".

Boris 19.05.2005 15:47

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:

nARC 19.05.2005 17:44

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 ;)

wahsaga 19.05.2005 17:57

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:28 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020