zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit einem CSS Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.05.2005, 03:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: jpg layout.jpg (26,4 KB, 897x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2005, 09:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard

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

Mein Blog
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.05.2005, 11:15
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 19.05.2005, 13:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.05.2005, 13:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
  #6 (permalink)  
Alt 19.05.2005, 13:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.05.2005, 14:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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".
Mit Zitat antworten
  #8 (permalink)  
Alt 19.05.2005, 15:47
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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 ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #9 (permalink)  
Alt 19.05.2005, 17:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.05.2005, 17:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

i've got the picture, now you give me some code ...
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:20 Uhr.