pupsige div-tag-positions-Fragen

**mitaki** · 30.08.2006 21:39

Zitat von Nanatsusaya

Okay, erstmal danke ihr beiden. ^^

@mitaki: Diese html-doc-geschichten hab ich nur deshalb noch nicht rein weil das einfach ne Probeseite ist, im Editor erstellt, bislang ohne jeglichen Zweck, deshalb hab ich sie weggelassen. ^^

Ich hab allerdings noch ein Problem, nämlich:

Ich möchte gerne, das das menu-tag in der Höhe mit dem main-tag mitwächst. Ich könnte das main zwar in das menu-tag stecken aber dann stimmt das mit der breite ja wieder nicht. Weiß jemand ne geschickte Lösung? NPCFighter und ich sind auf keine Vernünftige gekommen.

Der Sinn der Doctypeangabe ist es aber doch gerade es schon beim testen zu machen!
Sonst machst du die Testseiten mit dem AB Schema, obwohl du später das CD Schema verwenden möchtest.

Hm, wenn du mit NPC zusammenarbeitest seht euch mal three column layout und three column layout (simple) von Stu Nicholls an.
Lässt sich leicht auch auf zwei kürzen und entspricht wohl dem, was am Ende rauskommen soll. Nit? Also nicht das Rad neu erfinden

Oder an was anderes denken als mehrspaltige Designs..

**Nanatsusaya** · 05.09.2006 11:55

Zitat von mitaki

Der Sinn der Doctypeangabe ist es aber doch gerade es schon beim testen zu machen!
Sonst machst du die Testseiten mit dem AB Schema, obwohl du später das CD Schema verwenden möchtest.

Hm, wenn du mit NPC zusammenarbeitest seht euch mal three column layout und three column layout (simple) von Stu Nicholls an.
Lässt sich leicht auch auf zwei kürzen und entspricht wohl dem, was am Ende rauskommen soll. Nit? Also nicht das Rad neu erfinden

Oder an was anderes denken als mehrspaltige Designs..

Also ich habe ne ganze Weile rumgesucht und getüftelt und ne für mich optimale Lösung gefunden. Fakt ist dass man keine zwei sich in der Höhe anpassenden divs erstellen kann. Um einen optisch ähnlichen effekt zu erlangen muss man das div-tag darüber gestalten. Das sieht dann ungefähr so aus:

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=iso-8859-1" />
<title>Div-Uebung</title>

<style type="text/css" >

#mantel 
{
	background-color:#99CCFF;
	margin:0 auto;
	width:100%;
}

#header
{
	background-color:#99FF99;
	margin:0 auto;
	width:100%;
	height:70px;
}

#outerbwrap
{
	background:url(bg02.jpg);
	margin:0 auto;
	width:100%;
}

#footer
{
	background-color:#CCCCCC;
	margin:0 auto;
	width:100%;
	height:30px;
}

#menuelinks
{
	float:left;
	width:100px;
}

#innerbwrap
{
	background:url(bg03.jpg);
	background-position:right;
	margin-left:100px;
}

#menuerechts
{
	float:right;
	width:100px;
}

#main
{
	background-color:#99CCFF;
	margin-right:100px;
}

</style>

</head>

<body>

<div id="mantel">
	<div id="header">
		header
	</div>
	<div id="outerbwrap">
		<div id="menuelinks">
			menue links
		</div>
		<div id="innerbwrap">
			<div id="menuerechts">
				menue rechts
			</div>
			<div id="main">
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
			</div>			
		</div>
	</div>
	<div id="footer">
		footer
	</div>
	
</div>

</body>
</html>

Thema: pupsige div-tag-positions-Fragen

Themen-Optionen

Anzeige

Hybrid-Darstellung

Berechtigungen