# Links Mitte Rechts Problem, Mitte soll eigenständig sein



## Dark Ranger (8. Juli 2008)

Hi ich habe folgenden Code:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Seitentitel</title>
	<link href="./content/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="header">
			<h1 class="headline1">Große Überschrift</h1>
			<h2 class="headline2">Kleinere Überschrift</h2>
		</div>
		<div id="leftbox">
			<a href="#">Home</a>
			<a href="#">Seite1</a>
		</div>
		<div id="rightbox" class="clearfix">
			<ul>News
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
			</ul>			
		</div>
		<div id="content" class="clearfix">
			<div id="buildings">
				<div class="building clearfix">
					<div class="descimg">
						BILD1
					</div>
					<div class="kosten">
						1 GOLD
						2 EISEN
					</div>
					<div class="centercell clearfix">
						<div class="description">
							BESCHREIBUNG1
						</div>
						<div class="level">
							LEVEL1
						</div>
						<div class="next">
							NÄCHSTE STUFE1
						</div>
					</div>
				</div>
				<div class="building">
					<div class="descimg">
						BILD2
					</div>
					<div class="kosten">
						2 GOLD
						1 EISEN
					</div>
					<div class="centercell clearfix">
						<div class="description">
							BESCHREIBUNG2
						</div>
						<div class="level">
							LEVEL2
						</div>
						<div class="next">
							NÄCHSTE STUFE2
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
```

Und folgende Css:

```
/* CSS Document */

body
{
	height: 90%;
	width: 90%;
	margin: 0px auto;
}

#leftbox
{
	float: left;
	background-color:#0033CC;
	margin: 0px;
	padding: 0px;
}

#leftbox a
{
	display: block;
	width: 100px;
	text-align: center;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	background-color:#0033CC;
	color:#FFFFFF;
	text-decoration: none;
}

#rightbox
{
	float: right;
	margin: 0px;
	padding: 0px;
	border: 1px solid black;
}

#content
{
	width: 75%;
	margin: 0px auto;
}

.clearfix:after {
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
}

.clearfix {
    display: block;
}

.building
{
	border: 1px groove #993300;
}

.descimg
{
	float: left;
	height: 100px;
	width: 100px;
}

.kosten
{
	float: right;
}
```

Das Problem besteht nur darin, dass von der mittleren Spalte das Div sich lang zieht, solang wie die rechte Box, so soll es aber nicht sein!

Ich probiere schon lange mal hier mal da rum und fange öfters wieder ganz von vorne an, aber so wirklich will es nicht gelingen.

Ich will einfach ein Design, mit Header, linker Box, rechter Box, Inhalt und Footer. Und das ganze versuche ich noch ein bisschen dynamisch hinzubekommen, da muss ich mich nochmal ein bisschen mit beschäftigen.

Kann mir vielleicht irgendjemand sagen woran es liegt? Vielleicht auch noch ein gutes Buch empfehlen?

P.S.: Ich merke gerade das im IE das Problem mit dem verzerrten nicht da ist, aber dafür ist die zweite Building Div Box verschoben -.-

Ach ja ich benutze Firefox, sowohl die 3er Version als auch die 2er Version

Edit: Bei Opera sieht es eigentlich so aus wie beim Firefox


----------



## -Raid- (8. Juli 2008)

Hab gerade nich viel Zeit, deswegen nur mal was zum IE.
Der IE, wie du noch merken wirst, ist eine Zumutung für jeden Coder.
Mit Version 8.0 soll's ja besser werden, aber trotzdem muss man immer noch Rücksicht nehmen, auf die Leute, die noch eine ältere Version nutzen.


```
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
```

Damit bindest du eine CSS mit dem Namen ie7.css in deine Index-Datei ein, die nur von dem Internet Explorer verarbeitet wird.

Jetzt richtest du mit dem CSS-File "ie7.css" einfach deine Box für den Internet Explorer aus.
z.B.:
Firefox

```
ul#Navigation {
margin: 50px 0px 50px 0px
}
```

Nehmen wir mal an, dass wird im Firefox richtig dargestellt, dann öffnest du deine ie7.css und versetzt dort die Box, bis sie im IE passt.

```
ul#Navigation {
margin: 25px 0px 25px 0px
}
```

Mit freundlichen Grüßen,
-Raid-


----------



## DeluXe (8. Juli 2008)

Mach mal die ganzen clearfix'es raus.
Wenn ich das richtig verstanden habe, brauchst du nicht einen einzigen davon.


----------



## -Raid- (8. Juli 2008)

So sollte die Seite funktionieren.
Ich habe dir direkt mal einen Footer eingebaut.


```
body
{
	height: 90%;
	width: 90%;
	margin: 0px auto;
}

#leftbox
{
	float: left;
	background-color:#0033CC;
	margin: 0px;
	padding: 0px;
	clear: left;
}

#leftbox a
{
	float: left;
	display: block;
	width: 100px;
	text-align: center;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	background-color:#0033CC;
	color:#FFFFFF;
	text-decoration: none;
	clear: left;
}

#rightbox
{
	float: right;
	margin: 0px 0px 15px 0px; /* 15 px Abstand zum Footer */
	padding: 0px 0px 0px 0px;
	border: 1px solid black;
	clear: right;
}

#content
{
	width: 75%;
	margin: 0px auto;
}

.clearfix:after {
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
}

.clearfix {
    display: block;
}

.building
{
	border: 1px groove #993300;
}

.descimg
{
	float: left;
	height: 100px;
	width: 100px;
	
}

.kosten
{
	float: right;
}

div#footer {
	text-align: center;
	margin: 15px 0px 0px 0px; /* 15px Abstand zum Inhalt */
	position: relativ;
	border: 1px groove #993300;
	height:22px;
	width:100%;
	color: #000000;
	clear: both;
	background: #FFFFFF;
}
```


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Seitentitel</title>
	<link href="./content/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="header">
			<h1 class="headline1">Große Überschrift</h1>
			<h2 class="headline2">Kleinere Überschrift</h2>
		</div>
		<div id="leftbox">
			<a href="#">Home</a>
			<a href="#">Seite1</a>
		</div>
		<div id="rightbox">
			<ul>News
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
			</ul>			
		</div>
		<div id="content">
			<div id="building">
				<div class="building">
					<div class="descimg">
						BILD1
					</div>
					<div class="kosten">
						1 GOLD
						2 EISEN
					</div>
					<div class="centercell">
						<div class="description">
							BESCHREIBUNG1
						</div>
						<div class="level">
							LEVEL1
						</div>
						<div class="next">
							NÄCHSTE STUFE1
						</div>
					</div>
				</div>
				<div class="building">
					<div class="descimg">
						BILD2
					</div>
					<div class="kosten">
						2 GOLD
						1 EISEN
					</div>
					<div class="centercell">
						<div class="description">
							BESCHREIBUNG2
						</div>
						<div class="level">
							LEVEL2
						</div>
						<div class="next">
							NÄCHSTE STUFE2
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<div id="footer">Copyright 2008 by Name</div>
	</body>
</html>
```


----------



## Dark Ranger (8. Juli 2008)

mhhh ok danke schonmal ^^ Das mit dem Clearfix habe ich hier irgendwo ausm Forum und das sorgt anscheinend dafür, dass das zweite Building wieder richtig angezeigt wird, wenn ich es weglasse, dann habe ich das gleiche Problem wie beim Internet Explorer. 

Muss ich nochmal schauen wie ich das anstelle, aber danke erstmal für eure Hilfe


----------



## -Raid- (8. Juli 2008)

Also bei mir läuft die Seite, mit dem Code den ich geschrieben habe, im Firefox und im IE6.
Mehr Browser habe ich im Moment leider nicht zu verfügung, wechsel demnächst zu Linux, von daher bin ich langsam am aussortieren.


----------



## Dark Ranger (8. Juli 2008)

Bei mir wird das "BILD 2" versetzt angezeigt, so soll es ja nicht sein, muss nochmal schauen


----------



## -Raid- (9. Juli 2008)

Der Fehler liegt hier:

```
.descimg
{
	float: left;
	height: 100px;
	width: 100px;
	
}
```

Der Inhalt wird immer weiter um 100px verschoben.
Eine Möglichkeit den Fehler zu beheben wäre dies hier:

```
body
{
	height: 90%;
	width: 90%;
	margin: 0px auto;
}

#leftbox
{
	float: left;
	background-color:#0033CC;
	margin: 0px;
	padding: 0px;
	clear: left;
}

#leftbox a
{
	float: left;
	display: block;
	width: 100px;
	text-align: center;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	background-color:#0033CC;
	color:#FFFFFF;
	text-decoration: none;
	clear: left;
}

#rightbox
{
	float: right;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid black;
	clear: right;
}

#content
{
	display: block;
	width: 75%;
	margin: 0px auto;
}

.clearfix:after {
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
}

.clearfix {
    display: block;
}

.building
{
	border: 1px groove #993300;
}

.spacing
{
margin: -20px 0px 0px 100px;
}

.kosten
{
	float: right;
	margin: -20px 0px 0px 0px;
}

div#footer {
	text-align: center;
	margin: 15px 0px 0px 0px; /* 15px Abstand zum Inhalt */
	position: relativ;
	border: 1px groove #993300;
	height:22px;
	width:100%;
	color: #000000;
	clear: both;
	background: white;
}
```


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Seitentitel</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="header">
			<h1 class="headline1">Große Überschrift</h1>
			<h2 class="headline2">Kleinere Überschrift</h2>
		</div>
		<div id="leftbox">
			<a href="#">Home</a>
			<a href="#">Seite1</a>
		</div>
		<div id="rightbox">
			<ul>News
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
			</ul>			
		</div>
		<div id="content">
			<div id="building">
				<div class="building">
						BILD1
					<div class="kosten">
						1 GOLD
						2 EISEN
					</div>
					<div class="spacing">
						<div class="description">
							BESCHREIBUNG1
						</div>
						<div class="level">
							LEVEL1
						</div>
						<div class="next">
							NÄCHSTE STUFE1
						</div>
					</div>
				</div>
				<div class="building">
						BILD2
					<div class="kosten">
						2 GOLD
						1 EISEN
					</div>
					<div class="spacing">
						<div class="description">
							BESCHREIBUNG2
						</div>
						<div class="level">
							LEVEL2
						</div>
						<div class="next">
							NÄCHSTE STUFE2
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">Copyright 2008 by Name</div>
	</body>
</html>
```

Ob es die beste Lösung ist, sei dahingestellt.
Bin auch noch am lernen. 

Mit freundlichen Grüßen,
-Raid-


----------



## Dark Ranger (9. Juli 2008)

Wow danke das sieht sehr gut aus! Ich werde mich morgen weiter damit beschäftigen muss erstmal ins Bett!

Gruß


----------



## Quaese (9. Juli 2008)

Hi,

eine weitere Möglichkeit.

Zeichnest du für den FF den Container mit der ID *buildings* mit *float: left* aus und ziehst ihn auf 100% Breite, kannst du darin die *clear*-Eigenschaft verwenden - ohne dass das Element auf die Höhe des rechten Bereichs gestreckt wird.

In den *building*-Boxen solltest du den mittleren Bereich ebenfalls so auszeichnen, dass er sich zwischen die äusseren Säulen einfügt.

Mein Vorschlag:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Seitentitel</title>
<style type="text/css">
  <!--
/* CSS Document */
body
{
	height: 90%;
	width: 90%;
	margin: 0px auto;
}

#leftbox
{
	float: left;
	background-color: #0033CC;
	margin: 0px;
	padding: 0px;
}

#leftbox a
{
	display: block;
	width: 100px;
	text-align: center;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	background-color:#0033CC;
	color:#FFFFFF;
	text-decoration: none;
}

#rightbox
{
	float: right;
	margin: 0px;
	padding: 0px;
	border: 1px solid black;
}
#rightbox ul{ list-style: none;}

#content
{
	width: 75%;
	margin: 0px auto;
}
#buildings{ float: left;
            width: 100%;}

.building
{
	border: 1px groove #993300;
}

.descimg
{
	float: left;
	width: 100px;
        height: 100px;
}

.kosten
{
	float: right;
}

.centercell{ margin: 0 130px;}
* html .centercell{ height: 1%;}

.clearfix:after {
    content: ".";
    display: block;
    height: 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 */
 //-->
</style>
	</head>
	<body>
		<div id="header">
			<h1 class="headline1">Große Überschrift</h1>
			<h2 class="headline2">Kleinere Überschrift</h2>
		</div>

		<div id="leftbox">
			<a href="#">Home</a>
			<a href="#">Seite1</a>
		</div>

		<div id="rightbox">
			<ul>News
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
				<li>Keine News</li>
			</ul>
		</div>

		<div id="content" class="">
			<div id="buildings">

				<div class="building clearfix">
					<div class="descimg">
						BILD1
					</div>
					<div class="kosten">
						1 GOLD
						2 EISEN
					</div>
					<div class="centercell">
						<div class="description">
							BESCHREIBUNG1
						</div>
						<div class="level">
							LEVEL1
						</div>
						<div class="next">
							NÄCHSTE STUFE1
						</div>
					</div><!-- centercell -->
				</div><!-- building -->

				<div class="building clearfix">
					<div class="descimg">
						BILD2
					</div>
					<div class="kosten">
						2 GOLD
						1 EISEN
					</div>
					<div class="centercell">
						<div class="description">
							BESCHREIBUNG2
						</div>
						<div class="level">
							LEVEL2
						</div>
						<div class="next">
							NÄCHSTE STUFE2
						</div>
					</div><!-- centercell -->
				</div><!-- building -->

			</div><!-- buildings -->
		</div><!-- content -->

	</body>
</html>
```
Ciao
Quaese


----------



## Dark Ranger (9. Juli 2008)

@Raid: Kannst du mir mal erklären was du wie und warum gemacht hast?

@Quaese: Mhhh das Ergebniss sieht auch sehr gut aus, allerdings blicke ich da noch nicht so ganz durch. Kannste mir das auch noch ein wenig erklären?



An Alle: Kann mir irgendwer ein Buch empfehlen?


----------



## -Raid- (9. Juli 2008)

Sicher kann ich das.
Ich habe:

```
.descimg
{
	float: left;
	height: 100px;
	width: 100px;
	
}
```
aus der .css gelöscht und dafür:

```
.spacing
{
margin: -20px 0px 0px 100px;
}
```
eingefügt.

Dann habe ich in der .html noch folgende Änderungen vorgenommen:

```
<div class="descimg">
```
 gelöscht, und 

```
<div class="spacing">
```
 hier:

```
<div class="spacing">
						<div class="description">
							BESCHREIBUNG1
						</div>
						<div class="level">
							LEVEL1
						</div>
						<div class="next">
							NÄCHSTE STUFE1
						</div>
					</div>
```
 eingefügt.

Jetzt wird durch 
	
	
	



```
<div class="spacing">
```
 der Text einfach nur verschoben.

```
margin: -20px 0px 0px 100px
```
-20px verschiebt den Text nach oben und die 100px verschieben den Text nach rechts.
Hoffe das ist so verständlich.

Mit freundlichen Grüßen,
-Raid-


----------



## Quaese (9. Juli 2008)

Hi,

die Sache mit dem buildings-Element und seiner Auszeichnung habe ich ja bereits erklärt.

Die Boxen für die unterschiedlichen Gebäude (building) werden mit den erforderlichen Aussenabständen eingefügt (margin: 0 130px). Damit ist gewährleistet, dass der Inhalt in der Mitte Abstand von 130 Pixel nach links und rechts nicht unterschreitet. 
Die zusätzliche Angabe ** html .centercell{ height: 1%;}* ist für IEs kleiner gleich Version 6. Notwendig ist sie, da sonst die Aussenabstände zu den Rändern nicht auf der gesamten Höhe eingehalten werden würden.

Ciao
Quaese


----------



## Dark Ranger (15. Juli 2008)

Hi

Wollte nochmal Fragen wegen einem Buchtipp?


----------

