✔ Dreispaltiges Layout macht mucken

soezkan · 30. Juli 2009

Hallo zusammen,

es ist echt zum Verzwifeln. Ich habe mir ein dreispaltiges Layout zusammengeschustert, aber es will einfach nicht dreispaltig sein

Was mache ich falsch? Die beiden Texte, die ich in "LeftBox" und "RightBox"
angegeben habe erscheinen nicht richtig ("LeftBox" garnicht und "RightBox" steht darunter)

HTML:

<!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>
<title>Meine Seite</title>
<link href="meinstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CenterBoxMain">
	<div id="RightBox">Hallo, ich sollte eigentlich links oben, am Seitenkopf stehen ...</div>
	<div id="CenterBox">
		<div id="Header">&nbsp;</div>

		<div id="HeaderNavigation">
			<div id="MainMenu">&nbsp;</div>	
			<div id="SubMenu">&nbsp;</div>	
		</div>

		<div id="Content">
			<div id="LeftColumn">
			<p id="LeftImage"><img src="http://www.tutorials.de/forum/images/whitespacer.gif" width="265" height="180" border="0" alt=""></p>
			<p id="LeftMenu">&nbsp;</p>
			</div>	
			<div id="RightColumn">&nbsp;</div>	
		</div>

		<div id="Spacer">&nbsp;</div>

		<div id="FooterNavigation">
			<ul>
				<li><a href="#">Agb</a></li>
				<li><a href="#">Datenschutz</a></li>
				<li><a href="#">Sitemap</a></li>
				<li><a href="#">Impressum</a></li>
				<li><a href="#">Kontakt</a></li>
			</ul>	
		</div>
	</div>
	<div id="RightBox">... und ich sollte eigentlich rechts oben, am Seitenkopf stehen.&nbsp;</div>
</div>
</body>
</html>

Hier das dazugehörige CSS namens meinstyle.css

Code:

body {
	color: black; 
	background-color: white;
	font-size: 100.01%;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	margin: 0 0 0 0; 
	padding: 0 0 0 0;
	min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
	/* border: 1px solid green; */
	text-align: center;
}


/********************/
/** CENTER BOX ******/
/********************/

div#CenterBoxMain {
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	
	/* opera does not like 'margin:20px auto' */
	text-align:left; 
	/* part 2 of 2 centering hack */
	width: 968px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 938px;
	min-height: 100%;
	height: 100%;
}

html>body #CenterBoxMain {
	width: 938px; /* ie5win fudge ends */
	min-height: 100%;
	height: 100%;
}

div#LeftBox {
	float: left;
}
div#CenterBox {
	float: left;
}
div#RightBox {
	float: right;
}

div#Header {
	margin: -36px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 219px;
	height: 219px;
	background-color: #efefef;
}

div#HeaderNavigation {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 62px;
	height: 62px;
	background-color: #feeefe;
}

div#Content {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 363px;
	height: 363px;
	background-color: #eefefe;
}
div#LeftColumn {
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 100%;
	height: 100%;
	width: 265px;
	background-color: #aefeae;
}
p#LeftImage {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 100%;
	height: 100%;
}
p#LeftMenu {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 100%;
	height: 100%;
}
div#RightColumn {
	float: right;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 100%;
	height: 100%;
	width: 673px;
	background-color: #feaeae;
}

div#Spacer {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 234px;
	height: 235px;
	background-color: #fefeee;
}

div#FooterNavigation {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 33px;
	height: 33px;
	background-color: #eefeee;
}
div#FooterNavigation ul {
	margin: 0px 0px 0px 0px;
	padding: 7px 0px 0px 0px;
}
div#FooterNavigation li {
	margin: 0px 0px 0px 0px;
	padding: 0px 23px 0px 23px;
	display: inline;
	color: #cccccc;
	font-size: 13px;
}
div#FooterNavigation a {
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	color: #cccccc;
}
div#FooterNavigation a:link {
	color: #cccccc;
}
div#FooterNavigation a:visited {
	color: #cccccc;
}
div#FooterNavigation a:hover {
	color: #585a59; 
	text-decoration: none;
}
div#FooterNavigation a:active {
	color: #585a59 
}

Kann mir da vielleicht jemand einen Tipp geben, was ich da falsch mache?

1000 Dank.

Liebe Grüße
Soezkan

denisSCR · 30. Juli 2009

Oh man was für ein Durcheinander ^^
Aber ich würde mal mit deinem Schreibfehler anfangen:

Code:

<div id="RightBox">Hallo, ich sollte eigentlich links oben, am Seitenkopf stehen ...</div>

nicht "Rightbox" sondern "LeftBox"

An deiner Stelle würd ich die DIVs die in der CenterBox sind erstmal weglassen, kümmere dich erstmal um die 3 Haupt-DIVs. Außerdem solltest du den DIVs eine Breite, am besten auch eine Höhe geben.

soezkan · 30. Juli 2009

Danke schonmal für den Tipp.

Hier nochmal etwas einfacher:

HTML:

<!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>
<title>Meine Seite</title>
<link href="meinstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CenterBoxMain">
	<div id="RightBox">Hallo, ich sollte eigentlich rechts oben, am Seitenkopf stehen ...</div>
	<div id="CenterBox">
        blablabla
	</div>
	<div id="RightBox">... und ich sollte eigentlich rechts oben, am Seitenkopf stehen.&nbsp;</div>
</div>
</body>
</html>

Und das dazugehörige CSS (ebenfalls abgespeckt)

Code:

body {
	color: black; 
	background-color: white;
	font-size: 100.01%;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	margin: 0 0 0 0; 
	padding: 0 0 0 0;
	min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
	/* border: 1px solid green; */
	text-align: center;
}


/********************/
/** CENTER BOX ******/
/********************/

div#CenterBoxMain {
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	
	/* opera does not like 'margin:20px auto' */
	text-align:left; 
	/* part 2 of 2 centering hack */
	width: 968px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 938px;
	min-height: 100%;
	height: 100%;
}

html>body #CenterBoxMain {
	width: 938px; /* ie5win fudge ends */
	min-height: 100%;
	height: 100%;
}

div#LeftBox {
	float: left;
}
div#CenterBox {
	float: left;
}
div#RightBox {
	float: right;
}

Die beiden Boxen links und rechts sollen maximal breit sein und den Rest des Bildschirms füllen. Habs mit width: 100% probiert, geht aber irgendwie nicht.

Gibts da ne andere Möglichkeit?

Vielen Dank für Hilfe!

Liebe Grüße
Soezkan

denisSCR · 31. Juli 2009

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="meinstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="LeftBox">LEFT BOX</div>
<div id="CenterBox">
<div id="center"></div>
</div>
<div id="RightBox">RIGHT BOX</div>

</body>
</html>

Code:

body {
margin-top:0px;
margin-left:0px;
}


#LeftBox{
position: absolute;
width:13%;
height:100%;
background-color:#0000FF;
}

#CenterBox{
position: absolute;
width:74%;
left:13%;
height:100%;
background-color:#0066CC;
overflow:auto;
}

#center {
position:absolute;
width: 938px; 
height:10px;
left:50%;
margin-left:-469px;
background-color:#FFFFFF;
}

#RightBox{
position: absolute; 
left:87%;
width: 13%; 
height:100%;
background-color:#00CCCC;
}

Versuchs mal damit...

soezkan · 31. Juli 2009

Ich habs jetzt so gemacht:

HTML:

body {
	background-color: #fff;
	font-family: Verdana, Arial, sans-serif;
	font-size: 100.01%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#Container {
	width: 900px;
	margin: 0px auto;
	border: 1px solid black;
}

#LeftBox {
	width: 200px;
	float: left;
	padding: 5px;
	background: #C5D78D;
}


#RightBox {
	width: 180px;
	float: right;
	padding: 5px;
	background: #A1B074;
}

#ContentBox {
	width: 470px;
	padding: 5px;
	margin-left: 220px;
	background: #D6D6D6;
}

h1 {
	text-align: center; 
	font-size: 1.5em;
	padding: 10px;
	margin: 0;
}

.center {
	text-align: center;
}

und ...

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dreispaltiges Layout, zentriert mit festen Breiten</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="meinstyle.css">
</head>
<body>

<div id="Container">

	<div id="LeftBox">Linksbox</div>

	<div id="RightBox">Rechtsbox</div>

	<div id="ContentBox">Content</div>

	<div style="clear: both;"></div>

</div>

</body>
</html>

Maik · 15. September 2009

Hi.

soezkan hat gesagt.:

Ich habs jetzt so gemacht:

HTML:

body {
	background-color: #fff;
	font-family: Verdana, Arial, sans-serif;
	font-size: 100.01%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#Container {
	width: 900px;
	margin: 0px auto;
	border: 1px solid black;
}

#LeftBox {
	width: 200px;
	float: left;
	padding: 5px;
	background: #C5D78D;
}


#RightBox {
	width: 180px;
	float: right;
	padding: 5px;
	background: #A1B074;
}

#ContentBox {
	width: 470px;
	padding: 5px;
	margin-left: 220px;
	background: #D6D6D6;
}

h1 {
	text-align: center; 
	font-size: 1.5em;
	padding: 10px;
	margin: 0;
}

.center {
	text-align: center;
}

und ...

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dreispaltiges Layout, zentriert mit festen Breiten</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="meinstyle.css">
</head>
<body>

<div id="Container">

	<div id="LeftBox">Linksbox</div>

	<div id="RightBox">Rechtsbox</div>

	<div id="ContentBox">Content</div>

	<div style="clear: both;"></div>

</div>

</body>
</html>

Das Thema liegt ja schon eine ganze Weile zurück (wurde während meines Sommerurlaubs erörtert), aber meinen Kommentar möchte ich hier dennoch nicht hinter'm Berg halten

Wo du doch immer ein besonderes Auge auf den IE6 hast, ist dir seinerzeit nicht aufgefallen, dass er die Box #ContentBox leicht nach rechts verschiebt?

Hier tritt nämlich "The IE6 Three Pixel Text-Jog" in Erscheinung.

HTML:

<link rel="stylesheet" type="text/css" href="meinstyle.css">
<!--[if lt IE 7]>
<style type="text/css">
#ContentBox { margin-left: 217px; }
</style>
<![endif]-->

Das inhaltsleere DIV zum Beenden der Floatumgebung wird mit Hilfe von CSS im Markup überhaupt nicht benötigt: How To Clear Floats Without Structural Markup.

HTML:

<div id="Container" class="clearfix">
	<div id="LeftBox">Linksbox</div>
	<div id="RightBox">Rechtsbox</div>
	<div id="ContentBox">Content</div>
</div>

CSS:

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik

✔ Dreispaltiges Layout macht mucken

soezkan

Erfahrenes Mitglied

denisSCR

Mitglied

soezkan

Erfahrenes Mitglied

denisSCR

Mitglied

soezkan

Erfahrenes Mitglied

Maik

Neue Beiträge