CSS und DIV - Richtig überlagern

D

Dustin84

Erfahrenes Mitglied
Hallo,

ich hab eine kleine Frage.

Für meinen Content Hintergrund habe ich 3 DIVs verwendet (Head,Middle,Bottom)
Das DIV Middle wiederholt sich, um sich an den Content inhalt später anzupassen.

Es geht um diese Website.

Zu sehen ist bisher nur der Hintergrund des Contents. Später kommen darüber noch Newsboxen, Headlines usw. Das Problem ist, dass ich nicht weiss, wie ich den Inhalt DIV übergreifend machen kann. Der Content soll ja nicht erst im DIV "middle" anfangen, sondern direkt vom DIV Head bis zum DIV Bottom.

HIer mein Code:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="_standards/css/standards.css" />
<!--[if IE]>
	<style type="text/css">@import url(/_standards/css/standard_ie.css);</style>
<![endif]-->
<title>Cardroom - Online Poker Diary</title>
</head>
<body>

<center>

<div class="content_head"/></div>
<div class="content_middle"/>
fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />fsdfdsf<br />
</div>
<div class="content_bottom"/></div>

</center>


</body>
</html>

CSS:
HTML: 
body {
	background-color:#150108;
	margin:0px;
	padding:0px;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.content_head {
	background-image:url(../_bilder/bg_head_content.png);
	width:943px;
	height:239px;
}

.content_middle {
	background-image:url(../_bilder/bg_middle_content.png);
	width:941px;
	background-repeat:repeat-y;
}

.content_bottom {
	background-image:url(../_bilder/bg_bottom_content.png);
	width:945px;
	height:98px;
}

Ich hoffe, ihr versteht was ich meine.

Gruß
Dustin
 
nein ich glaube das geht nicht, denn die divs sind ja begrenzer.
aber vllt. kannst du ein div drüberlegen und den inhalt dann da reinschreiben
 
Zuletzt bearbeitet:
Der Beispieltext "fsdfdsf" soll halt von oben nach unten laufen.

Man könnte sagen, dass ich die 3 HIntergrund DIVs (Head,Middle,Bottom) als eine Ebene brauche, wo ich dann eine weitere (also den Inhalt) drüber legen kann.
 
HTML: 
	.drueber {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 200;
	}

so müsste das css aussehen
allerdings musst du dann bei content_middle so schreiben:

HTML: 
.content_middle {
	background-image:url(../_bilder/bg_middle_content.png);
	width:941px;
	background-repeat:repeat-y;
height: 100%;
}
 
Hmma le wenn ich richtig geräzelt habe soll dieses "fsdfdsf" überall sein also auch im Head und Foot.

Problem nur soweit ich weis geht das nicht einfach so.

Ich zumindest baue meine Seiten so auf, dass es einen Haupt Div-Bereich gibt und darin alle unter Bereich sind, und die sich dann an die Haupt anpassen also in größe der ;-)

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--
.body {  
width:800px
min-height:500px;
}

.content_head {
	width:100%;
	min-height:239px;
}

.content_middle {
	width:100%;
	background-repeat:repeat-y;
}

.content_bottom {
	width:100%;
	min-height:98px;
}

-->
</style>

<title>Testseite</title>
</head>
<body>
<div class="page">
      <div class="content_head"/></div>
      <div class="content_middle"/></div>
      <div class="content_bottom"/></div>
</div
</body>

MfG CrazyNevs
 
Dustin84 hat gesagt.:
Das Problem ist, dass ich nicht weiss, wie ich den Inhalt DIV übergreifend machen kann. Der Content soll ja nicht erst im DIV "middle" anfangen, sondern direkt vom DIV Head bis zum DIV Bottom.
Zum Vergrößern anklicken....
Hi,

wenn ich dein Anliegen jetzt richtig versteh, binde die drei Blöcke in ein übergeordnetes DIV ein, und weise diesem den Hintergrund des "Content"-Blockes zu.

Als "Arbeitsvorlage" empfehle ich dir die angehängten Beispielvarianten meines Tutorials CSS-Layout mit 100%-Höhe, auch wenn es hier nicht konkret um die 100%-Höhe geht, sie aber die grundsätzliche Markup-Struktur und CSS-Formatierung aufzeigen.

Übrigens wird am Ende des öffnenden <div>-Tags kein Slash angegeben, so wie man es von den inhaltsleeren Elementen <meta>, <link>, <img>, usw. kennt, um diese sog. "Standalonetags" in XHTML regelkonform zu schliessen, denn dafür gibt es den schliessenden </div>-Tag.

mfg Maik
 
Übrigens wird am Ende des öffnenden <div>-Tags kein Slash angegeben, so wie man es von den inhaltsleeren Elementen <meta>, <link>, <img>, usw. kennt, um diese sog. "Standalonetags" in XHTML regelkonform zu schliessen, denn dafür gibt es den schliessenden </div>-Tag.
Zum Vergrößern anklicken....

Danke für den Tipp.

Ich habe hier nochmal ein Bild, wie es später aussehen soll:
http://qgammon.qg.ohost.de/_standards/_bilder/beispiel.jpg

Klar zu sehen ist der jetzige "Papier" Hintergrund, worüber später die Newsboxen gelegt werden.

Mir ist nicht ganz klar, was das Einbinden der 3 DIVs in ein übergeordnetes DIV bringen soll.

Ich hab eben was von Ebenen mit CSS, mittels Z-Index, gelesen. Ist es nicht daswas ich brauche ?

Ich würde meinen Klassen

PHP: 
.content_head {
	width:100%;
	min-height:239px;
}

.content_middle {
	width:100%;
	background-repeat:repeat-y;
}

.content_bottom {
	width:100%;
	min-height:98px;
}

jeweils noch einen z-index 1 für die letzte (hinterste) Ebene zuweisen und dann meinen Newsboxen einen z Index von 2. So zumndest die Theorie, in der Praxis habe ich es nicht hinbekommen.

:confused:
 
Deinem "Preview" zufolge müßtest du hier grundsätzlich eine ganz andere Seiteneinteilung vornehmen, um überhaupt das zweispaltige Layout zu realisieren, und zumindest die Höhe des "Header-Bereichs" bis auf den "Radius der linken und rechten oberen Ecken" herabsenken, denn darin werden überhaupt keine weiteren Boxen eingebettet, sondern nur im Mittelteil.

mfg Maik
 
Deinem "Preview" zufolge müßtest du hier grundsätzlich eine ganz andere Seiteneinteilung vornehmen, um überhaupt das zweispaltige Layout zu realisieren, und zumindest die Höhe des "Header-Bereichs" bis auf den "Radius der linken und rechten oberen Ecken" herabsenken, denn darin werden überhaupt keine weiteren Boxen eingebettet, sondern nur im Mittelteil.
Zum Vergrößern anklicken....

Und das ist genau das, was ich nicht machen wollte. Ich möchte die Head grafik nicht abschneiden, aus optischen Gründen. Es muss doch eine Lösung dafür geben ? Ich bin bestimmt nicht der Erste, der das Problem hat. :(:(
 
Wenn du es so nicht umsetzen willst, seh ich hier auch keine andere Möglichkeit, wie sich die beiden Spaltenblöcke über den Headerbereich hinaus fortsetzen, der zudem eine feste Höhe besitzt, und gleichzeitig das Hintergrundbild des mittleren Bereichs bei zunehmenden Inhalt wiederholt werden soll.

Und ja, du bist (zumindest hier bei uns im Forum) der Erste, der solch ein unorthodoxes "Seitenkonzept" auf die Beine stellen will.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück