zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Parent / Child Div

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.03.2010, 17:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2010
Beiträge: 1
lemmyk befindet sich auf einem aufstrebenden Ast
Standard Problem mit Parent / Child Div

Hallo zusammen

Ich stehe als CSS Neuling vor einem Problem, welches ich einfach nicht hinbekomme. Habe bereits lange gegoogelt, viele Beiträge durchgelesen und das Layout auf diverse verschiedene Arten aufgebaut, aber komme einfach nicht auf das gewünschte Ergebnis.

Auf dem Printscreen "Site" seht ihr wie die Seite Grundsätzlich etwa aussieht. Dieser möchte ich nun noch eine Schattierung hinzufügen (am linken und rechten Rand der Seite ein Bild mit Verlauf). Dafür habe ich das Layout wie auf dem PrintScreen "Layout" gestaltet.

Mein Problem bezieht sich nun lediglich auf die Divs content_left (11), content_center_left (12), content_center_right (13) und content_right (14) + die nicht sichtbaren Parent Divs content und dessen Parent Div container. Mein Problem ist, dass ich einfach nicht hinbekomme, dass sich die Divs 11 und 14 der Grösse des Div content_center_right (13) anpassen. Würde ich alles mit statischen Grössen machen, würde es klappen. Für den Div "contet_center_right" brauche ich allerdings eine Variable Grösse (da unterschiedlich viel Text) und somit müssen sich auch die Grössen von den beiden Schattierungsdivs diesem anpassen.

Hier ist der HTML Code:

HTML-Code:
<HTML>
<HEAD>
<TITLE>Z-Design</TITLE>

<link rel="stylesheet" type="text/css" href="style.css">

  <style type="text/css">@import url(modern_ohne_ie.css) all;</style>

  <!--[if IE]>
    <style type="text/css">@import url(ie.css);</style>
  <![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>

<BODY>

<div id="container">

	<div id="top">
		<div id="top_left">1
		</div>
		<div id="top_center_left">2
		</div>
		<div id="top_center_right">3
		</div>
		<div id="top_right">4
		</div>
	</div>
	

	<div id="banner">
		<div id="banner_left">5
		</div>
		<div id="banner_center">6
		</div>
		<div id="banner_right">7
		</div>
	</div>
	
	<div id="navi">
		<div id="navi_left">8
		</div>
		<div id="navi_center">9
		</div>
		<div id="navi_right">10
		</div>
	</div>
	
	<div id="content">
		<div id="content_left">11
		</div>
		<div id="content_center_left">12
		</div>
		<div id="content_center_right">13
		Inhalt
		<p>
		Inhalt
		<p>
		Inhalt
		<p>
		Inhalt
		</div>
		<div id="content_right">14
		</div>
	</div>
	
	<div id="footer">
		<div id="footer_left">15
		</div>
		<div id="footer_center">16
		</div>
		<div id="footer_right">17
		</div>
	</div>
	
</div>

</BODY>
</HTML>
Und dies wäre das CSS File:

HTML-Code:
body {
	background-color: #d1d1d1;
	font-size: 11px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#000000;
	padding:0px;
	margin:0px;
	text-align:center;
}



#container {
width: 820px;
height: auto;
margin-left: auto;
margin-right: auto;
background-color:#00FFFF;
text-align:left;
}

div#container {
}


#top {
width: 820px;
height: 73px;
background-color: #FF0000;
float:left;
}
	#top_left {
	width: 10px;
	height: 73px;
	background-color: #FFFF00;
	float:left;
	}

	#top_center_left {
	width: 400px;
	height: 73px;
	background-color: #FF0000;
	float:left;
	}

	#top_center_right {
	width: 400px;
	height: 73px;
	background-color: #0000ff;
	float:left;
	}

	#top_right {
	width: 10px;
	height: 73px;
	background-color: #FFFF00;
	float:left;
	}

#banner {
width: 820px;
height: 140px;
background-color: #FFFF00;
float:left;
}
	#banner_left {
	width: 10px;
	height: 140px;
	background-color: #FF0000;
	float:left;
	}

	#banner_center {
	width: 800px;
	height: 140px;
	background-color: #FFFF00;
	float:left;
	}

	#banner_right {
	width: 10px;
	height: 140px;
	background-color: #FF0000;
	float:left;
	}

#navi {
width: 820px;
height: 22px;
background-color: #FF0000;
}
	#navi_left {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}

	#navi_center {
	width: 800px;
	height: 22px;
	background-color: #FF0000;
	float:left;
	}

	#navi_right {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}


#content {
width:820px;
height:auto;
background-color: #FFFF00;
}
	#content_left {
	width: 10px;
	height:auto;
	background-color: #FF00FF;
	float:left;
	}

	#content_center_left {
	width: 240px;
	height:auto;
	background-color: #0000ff;
	float:left;
	}

	#content_center_right {
	height:auto;
	width: 560px;
	background-color: #00ff00;
	float:left;
	}

	#content_right {
	width: 10px;
	height:auto;
	background-color: #FF00FF;
	float:left;
	}

#footer {
width: 820px;
height: 14px;
background-color: #FF0000;
float:left;
}
	#footer_left {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}

	#footer_center {
	width: 800px;
	height: 22px;
	background-color: #FF0000;
	float:left;
	}

	#footer_right {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}
Hoffe ich habe mich einigermassen verständlich ausgedrückt.

Vielen Dank schon im voraus...
Angehängte Grafiken
Dateityp: jpg site.JPG (88,1 KB, 10x aufgerufen)
Dateityp: jpg layout.JPG (54,3 KB, 9x aufgerufen)
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18
Problem mit div (float) Sp33dy G0nz4l3s CSS 2 29.05.2006 20:13
Problem div in div @ Bottom - unterschiedlicher Abstand rokk CSS 5 12.11.2005 00:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:53 Uhr.