Unterteilung der DIV-Bereiche

seeadler · #1 (**permalink**) 20.02.2012, 20:14

hi,

mich würde gerne interessieren, wie ihr --- siehe Anlage --- das Bild in Bereiche aufteilt?
Oder würdet ihr aus den Abschnitten (braun, blau, dunkelblau) eine Graphik machen und diese beispielsweise als Hintergrund für den wrapper definieren?

Webcoder · #2 (**permalink**) 21.02.2012, 05:16

Hi Seeadler

ich würde für die Umsetzung 10 Divs verwenden und zwar wie folgt:

HTML-Code:

<div id="header">
<div id="headw">
	<div id="titelnav">
		<h1>Seitentitel</h1>
		<ul>
			<li><a href="">Link 1</a></li>
			<li><a href="">Link 2</a></li>
			<li><a href="">...</a></li>
		</ul>
	</div>
	<div id="headpic">
		<img src="" alt="">
	</div>
</div>
</div>

Für den Holzhintergrund, die Seitenüberschrift, das Menü und dem Bild.

HTML-Code:

<div id="content">
<div id="contw">
	<div id="news">
		...
	</div>
	<div id="inhalt">
		<div id="textr">
			...
		</div>
		<div id="textl">
			...
		</div>
		<div id="footer">
			...
		</div>
	</div>
</div>
<div>

Für den hellblauen Hintergrund und den darin liegenden Inhalten. Bei textr und textl lässt sich die Reihenfolge bestimmt auch wechseln.

Das dunkelblaue wird dann dem body-Element als Hintergrund gegeben. Auf einen globalen Wrapper würde ich verzichten, das übernehmen jeweils "headw" und "contw". Des Weiteren habe ich alle Rahmenelemente (Doctype, html, head, body, etc.) weggelassen und den ganze CSS Kram, da du ja nur nach den Divs gefragt hast.

Lieben Gruß
Webcoder

seeadler · #3 (**permalink**) 21.02.2012, 09:30

hi webcoder,

erstmal vielen dank für den Tipp! Hätte da noch Fragen zu einzelnen DIV's
ich nehme mal an das du dem headw, den Holzhintergrund mit fester Breite verpasst

Code:

<div id="headw">

Für den

Code:

<div id="contw">

gibts du den hellblauen Hintergrund, ebenfalls mit fester Breite;

Zitat:

Das dunkelblaue wird dann dem body-Element als Hintergrund gegeben

mmh, mein body soll eigentlich weiss bleiben; würdest du da einen footer definieren mit einem dunkleblauen Hintergrund?

Praktikant · #4 (**permalink**) 21.02.2012, 09:52

Zitat:

Zitat von seeadler

mmh, mein body soll eigentlich weiss bleiben; würdest du da einen footer definieren mit einem dunkleblauen Hintergrund?

Warum? Das hätte für dich keinerlei Vorteile, eher Nachteile. Wenn du das Blau als Hintergrundfarbe dem body-Element gibst, dann hast du es immer an unterester Stelle, da es - wenn nicht angegeben - die Hintergrundfarbe des html-Elementes wird. Hier wird als invers vererbt.

Aber ich bin auch für deine Argumente offen, vielleicht eröffnet das ja ganz neue Seiten.

Webcoder · #5 (**permalink**) 21.02.2012, 18:02

Hi Seeadler

nein die *w sind die beider wrapper-Elemente, der Hintergrund ist in den umschließenden Elementen definiert. Hier noch mal ein kompletter Lösungsansatz.

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Musterseite</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	text-align:center;
	background-color:#123;
}
#header {
	background-color:#421;
}
#headw {
	margin:0 auto;
	padding-top:80px;
	text-align:left;
	width:1000px;
	height:220px
}
#titelnav {
	width:220px;
	float:left;
	height:220px
}
h1 {
	color:#fff;
	height:50px;
	text-align:center;
	padding-top:10px;
}
#titelnav ul {
	background-color:#fff;
	height:160px;
}
#headpic {
	width:780px;
	margin-left:220px;
}
#headpic img {
	background-color:#9cf;
	width:780px;
	height:220px;
}
#content {
	clear:left;
	background-color:#136;
}
#contw {
	margin:0 auto;
	text-align:left;
	width:1000px;
}
#news {
	width:220px;
	float:left;
	color:#fff;
}
#inhalt {
	width:780px;
	margin-left:220px;
	background-color:#eee;
}
</style>
</head>
<body>
<div id="header">
<div id="headw">
	<div id="titelnav">
		<h1>Seitentitel</h1>
		<ul>
			<li><a href="">Link 1</a></li>
			<li><a href="">Link 2</a></li>
			<li><a href="">...</a></li>
		</ul>
	</div>
	<div id="headpic">
		<img src="" alt="Bild">
	</div>
</div>
</div>
<div id="content">
<div id="contw">
	<div id="news">
		...
	</div>
	<div id="inhalt">
		<div id="textr">
			...
		</div>
		<div id="textl">
			...
		</div>
		<div id="footer">
			...
		</div>
	</div>
</div>
</div>
</body>
</html>

Dieser enthält natürlich nur die notwendigen Formatierungen. Noch nicht berücksichtigt die 2 Textbereiche, jedoch sollten die kein großes Problem darstellen, wenn du den Rest verstehst. Der Überlauf vom Inhaltsbereich entsteht in diesem Lösungsansatz nicht, da ich mit einer Hintergrundfarbe arbeite, eine Grafik endet ja nach einer bestimmten Höhe.

Ich hoffe es erklärt einiges und du bekommst das Design damit umgesetzt.

seeadler · #6 (**permalink**) 21.02.2012, 21:03

wow, vielen Dank!

also das mit dem Überlauf bzw. Farbverlauf insbesondere der "Knick im Blau"muss ich dann ja schon mit einer Graphik realisieren;

Webcoder · #7 (**permalink**) 22.02.2012, 04:56

Also noch mal erklärt:

Im "header" habe ich eine braune Hintergrundfarbe (#421), diese ersetzt du durch deine Grafik (Holzdesign). Dadurch ergibt sich vielleicht auch eine andere Höhe des Headers.

Die zweite Hintergrundgrafik kommt in "content" wo ich als Hintergrundfarbe (#136) nutze. Nehmen wir an deine Hintergrundgrafik dort ist 400px hoch, dann entsteht der Überstand (sprich der weiße Bereich läuft über den Hellblauen hinaus) sobald der Inhalt höher als 400px ist. Du könntest dem Inhaltsbereich natürlich auch eine feste Höhe geben, so das Scrolleisten innerhalb des Divs entstehenen.

Wie schon ganz oben beschrieben, kommt der dunkelblaue Hintergrund (wohl auch eine Grafik mit Farbverlauf) in den "body". Die Position dafür errechnet sich aus (Höhe "header"-Hintergrundgrafik) + (Höhe "content"-Hintergrundgrafik).

Eine genauere Beschreibung ist leider nicht möglich, da ich nicht weiß, welche Inhalte es später auf den Einzelseiten geben soll. Auch der Funktionsumfang könnte eine Rolle beim Design spielen, welcher auch in dem Lösungsansatz nicht berücksichtigt wurde.

seeadler · #8 (**permalink**) 22.02.2012, 09:03

danke dir für die ausführliche Erklärung!
Was ich eigentlich meinte ist der Übergang (Knick) bei news
siehe Anlage

Praktikant · #9 (**permalink**) 22.02.2012, 09:05

Das werden einfach zwei Hintergrundgrafiken, die du übereinander legst. Schon hast du deinen Knick.

seeadler · #10 (**permalink**) 22.02.2012, 14:53

hi,

mein aktuelles Ergebnis sieht folgendermaßen aus:

Elektro Schmid

Kann mir jemand einen Tipp geben, wie ich das Bild mit dem Blitz etwas mehr nach unten zwischen die beiden Wörter Elektor und Schmid bekomme?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18