Div variabel in abhängigkeit eines anderen

[BallaBalla07]

Hallo Leute ..

ich möchte meine Seite variabel in der Höhe machen.

Daher möchtige ich folgendes umsetzen um es zu erreichen. Aber leider sitze ich schon den ganzen Tag drann und bekomme es nicht hin. :-(

Hierzu habe ich mein Hintergrundbild in drei Teile geschnitten.

Ich möchte drei Divs übereinander haben.Deren Breite ist 1200 px
Und über den dreien soll das Div mit dem Inhalt liegen. Dieses ist 800px und centriert.

Das obere und das untere der drei Divx sind von der größe fix.
Das mittlere DIV soll die Größe varieren, jenachdem wie groß das Inhalt DIV ist.

Siehe Bild

Kann mir jemand bei dem Ansatz helfen

lg

 

[Maik]

Hi und herzlich Willkommen im Forum

Wenn das DIV mit dem Inhalt in der Schichtposition z-index über den anderen DIVs positioniert wird, werden diese bzw. das mittlere von ihnen auf den zunehmenden Inhalt in der Ebene darüber nicht reagieren und in ihrer Position verharren.

So gesehen müsste das Modell grundsätzlich anders konzipiert werden: man spricht hier von der "Zwiebelschalentechnik", bei dem die Elemente ineinander verschachtelt werden und das innerste Element den Inhalt in sich aufnimmt.

 

[BallaBalla07]

mhhh .. und mit dem index-z habe ich es den ganzen Tag versucht.
Kannst du mir einen Tipp geben wo ich was zu finde.
Oder mir gar helfen.
Bislang habe ich das .. was ja leider nicht geht

Der #CONTENT Div ist der, der nachher gefüllt werden soll.

#content_top	{
	width: 1100px;
	height: 200px;
	position: relative;
	top: 105px;
	left:50%;
	margin-left:-550px;
	background:#FFF url(../img/bg_oben.jpg) no-repeat center center;
	z-index:0;
	}
#content_mid	{
	width: 1100px;
	height: auto;
	position: relative;
	left:50%;
	margin-left:-550px;
	background:#FFF url(../img/bg_mitte.jpg) center center;
	z-index:0;
	}	
#content_bottom	{
	width: 1100px;
	height: 305px;
	position: absolute;
	left:50%;
	margin-left:-550px;
	background:#FFF url(../img/bg_unten.jpg) no-repeat center center;
	z-index:0;
	}	

	
#content	{
	width: 745px;
	height: 430px;
	position: absolute;
	top: 125px;
	left:50%;
	margin-left:-372.5px;
	background:transparent;
	padding:0px;
	z-index:2;
	}

 

[Maik]

Naja, auf die Schnelle kann ich dir da jetzt auch nicht weiterhelfen, denn zunächst mal müssen die drei Grafiken in weitere Segmente aufgeteilt werden, damit sich der Inhalt von #content_top bis #content_bottom erstreckt, und an all seinen Flanken von den DIVs mit ihren Hintergrundbilder umschlossen wird.

Das Beispiel http://www.sperling.com/examples/box/ beschäftigt sich zwar mit einer Box, deren Ecken mittels einem achtteiligen Grafikset abgerundet werden, aber das Prinzip der technischen Umsetzung ist hier das gleiche, und dürfte dir somit eine gute Hilfestellung für die ersten Schritte bieten.

 

[BallaBalla07]

Hallo Maik ,

das war mir echt eine große Hilfe. Soweit geht alles,

aber der Mittlere Bereich wächst nur mit wenn ich ihn mit mit Text fülle.
Wenn ich aber eine andere Datei includiere "wächst" der Rahmen nicht mit.

Hast du da eine Idee?

lg

 

[Maik]

Hi,

freut mich, dass dir das Beispiel weitergeholfen hat, und du auf Anhieb damit zurechtgekommen bist

Kannst du das mal anhand zweier Beispiele etwas präzisieren? Was genau wird denn da includet? Handelt es sich hierbei nicht um eine "herkömmliche" PHP-Datei, die weitere HTML-Elemente mit entsprechenden Inhalten enthält? Kann man das Modell evtl. online betrachten?

 

[BallaBalla07]

Das Problem habe ich gelöst.

Alle Seiten sind .php
Es war ein Fehler der zu inludierenden Seite.

Nur habe ich jetzt noch 2 Probleme

Hier ist mal der Link zu der Seite. http://www.ballaballa07

Der Inhalt schließt mit dem Ende des untersten Div ab. Aber um in dem Rahmen zu bleiben müsste es schon ca. 100px vorher aufhören. Aber mit margin-bottom: 100px; funktioniert es nicht.

Das zweite Problem ist der weiße Baken in der Mitte. Den Fehler finde ich einfach nicht


lg

 

[Maik]

Richte mal für das Element, das den Inhalt in sich aufnimmt, einen unteren Innenabstand padding-bottom:100px ein.

Zu dem Problem mit dem weißen Balken kann ich derzeit nichts sagen, da du dem Anschein nach im Besitz einer Subdomain, wie z.B. ".de .vu" bist, die vom Forensystem herausgefiltert wird, und somit der Link nicht zu gebrauchen ist.

 

[Maik]

Hallo Maik ,

ich gebe dir auf diesem Weg den Link zu der Seite.

Kannst dir das mal mit dem Balken anschauen.

padding-bottom:100px; funktioniert .. danke

http://www.techni-com.de/techni-com/

Ich weiß jetzt zwar nicht, von welchem weißen Balken du sprichst, aber rmöglicherweise hängt es mit diesem syntaktisch falschen Code zusammen:

<div id=idbg /bg.jpg) no-repeat bottom right;"></div>

In der Quellcode-Ansicht des Firefox wird die Zeile so ausgegeben:

 

[BallaBalla07]

Hi Maik ,

danke für deine schnelle Antwort.

Was ist denn an dem Code syntaktisch falsch?
Das hier sind meine ersten Gehverduche mit css.

Mit dem weißen Balken meine ich das links und rechts der Rahmen fpr ein paar Pix unterbrochen ist.
Das ist der übergang zwischen dem mittleren und dem unteren Div.
Ich habe schon alles nachgeschaut .. aber ich kann es nicht finden.

Den Code den du meintest habe ich rausgenommen und es ist immernoch das gleiche.

lg

Andreas


Hier mal die css

* html #tlc, * html #trc {height: 1%;}
* { margin: 0; padding: 0; }

body
	{
	background:#FFF url(../img/bg_site.jpg) repeat-x top left;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px; 
	}
#mainnav	{
	width:800px;
	height:70px;
	position:absolute;
	top: 30px;
	left:50%;
	margin-left:-400px;
	color:#FFF;
	background:transparent url(../img/bg_menue.jpg) no-repeat top left;
	z-index:99;
	}
#box
	{
	width: 1100px;
	position:absolute;
	margin-top: 100px;
	padding: 0;
	text-align: left;
	background-color: transparent;
	left:50%;
	margin-left:-550px;
	
	}
 	
#content
	{
	margin-left:180px;
	width:750px;
	height:auto;
	background-color: transparent;
	padding-bottom:100px;
	}
#inhalt 
	{
	width:inherit;
	position:relative;
	}
	
#idbg	
	{
	width:783px;
	height:453.5px;
	position:absolute;
	left:50%;
	margin-left:-392.5px;
	z-index:0;	
	}	
		
/* ---=== border code follows ===--- */
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image:url(../img/tlc.jpg);
	background-position: 0% 0%;

	}

#trc
	{
	background-image:url(../img/trc.jpg);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(../img/blc.jpg);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(../img/brc.jpg);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(../img/tb.jpg);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(../img/bb.jpg);
	background-position: 50% 100%;
	}
	
#rb
	{
	background-image:url(../img/r.jpg);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	padding: 0px;
	}

#lb
	{
	background-image:url(../img/l.jpg);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	padding: 0px;
	}