CSS und DIV - Richtig überlagern @ tutorials.de: Tutorials, Forum & Hilfe

Dustin84 · 22.02.09 13:13

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

<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-Code:

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

queicherius · 22.02.09 13:19

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

Dustin84 · 22.02.09 13:28

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.

queicherius · 22.02.09 13:36

HTML-Code:

	.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-Code:

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

CrazyNevs · 22.02.09 13:38

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

Maik · 22.02.09 13:52

Zitat von Dustin84

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.

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

Dustin84 · 22.02.09 14:24

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

Danke für den Tipp.

Ich habe hier nochmal ein Bild, wie es später aussehen soll:
http://qgammon.qg.ohost.de/_standard...r/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-Code:


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

Maik · 22.02.09 14:29

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

Dustin84 · 22.02.09 17:11

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.

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.

Maik · 22.02.09 17:16

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

Maik · 22.02.09 19:12

Wenn sich der zukünftige Seiteninhalt ausschliesslich im mittleren Teil content_middle befindet, stünde dir alternativ auch diese Regelung zur Verfügung, um den Block in den Headerbereich zu schieben:

Code css:

.content_middle {
        background-image:url(../_bilder/bg_middle_content.png);
        width:941px;
        background-repeat:repeat-y;
        position:relative; /* relative Positionierung */
        margin-top:-200px; /* der Wert ist von mir hier zu Demozwecken frei gewählt */
}

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Div-überlagern

überlagern ?

JPG Bilder überlagern

Hintergründe überlagern?

Hintergründe überlagern?

E-Mail:

Abonnieren Abbestellen