19.05.2005, 03:59
|
|||
|
|||
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. 
|
| Sponsored Links |
|
19.05.2005, 09:00
|
|||
|
|||
|
http://www.css4you.de/float.html könnte dir sicher weiterhelfen..
|
| Sponsored Links |
|
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 
__________________
“My software never has bugs. It just develops random features ...”  » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
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.
|
|
19.05.2005, 13:36
|
|||
|
|||
|
Zitat:
css html auch nicht?
|
|
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.
|
|
19.05.2005, 14:45
|
|||
|
|||
|
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. 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".
|
|
19.05.2005, 15:47
|
||||
|
||||
|
Zitat:
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
19.05.2005, 17:44
|
||||||
|
||||||
|
Zitat:
 Zitat:
Zitat:
Zitat:
Zitat:
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%;
}
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
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS layout problem | donky | CSS | 5 | 05.06.2009 17:56 |
| Problem mit CSS Layout | jojoho | CSS | 9 | 20.07.2008 23:16 |
| layout mit css - problem | xxlcss | CSS | 1 | 30.12.2005 03:25 |
| problem ausrichtung grafik und rand (css layout) | celine@23 | Barrierefreiheit | 1 | 28.12.2005 14:05 |
| includes bei css layout | dan | CSS | 2 | 10.03.2004 19:21 |
Linear-Darstellung
