Antworten zum Thema „[Frage] Contentbereich mit automatischer Höhe“

Yaulin · 19.06.2009

Guten Tag!

Ich erstelle gerade eine Website. Mein Problem ist, ich habe ein div-Tag "content" das. Darin enthalten sind "contentleft" und "contentright" (also ein zweispaltiges Layout)

#content hat als Hintergrundfarbe weiß, eine feste Breite. Soll aber eine variable Höhe haben.

Der Inhalt in left und right wird korrekt dargestellt, nur der #content Tag bleibt ohne höhe.
Wenn ich eine feste Höhe einstelle funktioniert es, leider habe ich verschiedene Seite mit verschieden Höhen.

Hat jemand eine Idee?

leohh · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

height: 100%; je nachdem...
Ein bisschen was an Code, zum besseren Verstaendnis ist nie verkehrt

Yaulin · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

CSS (Ausschnitt):

#content
{
padding:10px;
height:500px; -> sollte auto; sein
}

#top{
background-image:url(images/top.png);
height:10px;
}

#bottom{
background-image:url(images/top.png);
height:10px;
padding:5px;
float:left;
width:1014px;
}

#contentwrapper{
width:1004px;
background-color:#009999;
float:left;
height:100%;
}

#contenttop{
width:984px;
float:right;
}
#contentleft{
width:592;
float:left;
}

#contentright{
width:490px;
float:right;
}

<div id="wrapper">
<div id="top"></div>
<div id="wrapper2">

<div id="header"></div>
<div id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="produkt1.php">Das Produkt</a></li>
<li><a href="technischedaten1.php">Technische Daten</a></li>
<li><a href="wirueberuns1.php">Wir über uns</a></li>
<li><a href="referenzen1.php">Referenzen</a></li>

<li><a href="presseberichte1 .php">Presseberichte</a></li>
<li><a href="kontakt1.php">Kontakt</a></li>
</div>
<div id="content">

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

<div id="content">
<div id="contentright">
<h2>Ladungssicherung für LKWs</h2>

<a>SEHR VIEL TEXT
</a>
</div>
</div>
</div>
</div>

Hoffe das hilft so?

bluenote · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

Ähem, Du deklarierst in Deiner CSS Elemente die in einem Html nicht auftauchen, auch wenn es nur Ausschnitte sind.
Außerdem solltest Du Deine <li> schon noch mit einem <ul> umfassen. So finde ich's nicht sehr hilfreich...

Jens

Schattenspringer · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

hallo,

hmm mal noch n paar fragen, wieso verwendest du die id "content" zweimal? eine id darf nur einmal verwendet werden.
ich glaube, eines deiner divs ist nicht geschlossen, viellt. gibt es deswegen einen fehler....
ich hab übrigens nicht gesehen, wo du die hintergrundfarbe von #content definiert hättest ....
ach ja und wieso bindest du die css zweimal ein ? einmal ist die pfadangabe auch nciht richtig geschrieben ...

gruss
schattenspringer

Yaulin · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

Sorry, aber is schwer zu erklären. Ein Bild sagt mehr als 1000 Worte!

leohh · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

du floatest .. aber clearst du denn auch?
Unter dem floatenden container ein <div style="clear: both" /> duerfte es richten. // Wobei ich selber selfclearing-Methoden oder ein br bevorzuge. Das both waere evtl. durch die zu clearende Richtung zu ersetzen.
Zumindest entnehm ich das deinem obigen Code. Im Uebrigen eine ID ist einzigartig.
Bei gleichen Namen auf Klassen ( class ) ausweichen.

Das waere eigentlich alles, was man aus dem Teil da oben entnehmen kann...

Yaulin · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

Wo genau muss ich das setzen?! Habs jetzt einfach mal bei allen rein gemacht, hat aber nix gebracht

PS: Ich habe eine Seite, die nicht mehrspaltig ist, also auch keine divtags drin sind, da funktioniert es einwandfrei mit auto...

leohh · 19.06.2009

AW: [Frage] Contentbereich mit automatischer Höhe

Setz mal ein live-Beispiel oder erzaeng deinen obigen Codeabschnitt.
Dein obiger Code ist unvollstaendig

Yaulin · 19.06.2009

Nicht schön, aber selten...ich klatsch einfach mal alles hier rein:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W&K Antirutschboden GmbH</title>
<link href="../styles.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="wrapper">
    	<div id="top"></div>
    	<div id="wrapper2">

        	<div id="header"></div>
            <div id="nav">
                	<li><a href="index.php">Home</a></li>
                    <li><a href="produkt1.php">Das Produkt</a></li>
                    <li><a href="technischedaten1.php">Technische Daten</a></li>
                    <li><a href="wirueberuns1.php">Wir über uns</a></li>
                    <li><a href="referenzen1.php">Referenzen</a></li>

                    <li><a href="presseberichte1	.php">Presseberichte</a></li>
                    <li><a href="kontakt1.php">Kontakt</a></li>
            </div>
            <div id="content">
            	
<link href="/styles.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />

<div id="contentleft">

</div>

<div id="contentright">
<h2>Ladungssicherung f&uuml;r LKWs</h2>

<a>Text
</a>
</div>

			</div>
        </div>
        <div id="bottom"><a>W&K Antirutschboden GmbH Design © 2009 by Fabian Lang.</a></div>
    </div>

    
    			
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

body{
	background-color: #CCCCCC;
}

h1{
font-family:Arial,Helvetica,sans-serif;
font-size:26px;
color:#333333;
text-align:center;
}

h2{
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
color:#333333;
text-align:left;
}


a{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#333333;
text-align:center;
}

#wrapper{
	margin: 0 auto;
	background-color:#FFFFFF;
	width:1024px;
	height:100%;
	}
	
#wrapper2{
	width:1004px;
	margin-left:10px;
	margin-top:0px;
	height:100%;
	}

#header{
	background-image:url(images/header.png);
	width:1004px;
	height:200px;
	}
	
#nav {
	background-color:#16618B;
	height:40px;
	width:1004px;
	}
	
#nav li a {
-x-system-font:none;
border-right:1px solid #CCCCCC;
color:#FAFCF8;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding:12px 15px 13px;
text-decoration:none;
}

#nav li a:hover {
background-color:#16308B;
	}

#nav li {
	display:block;
	float:left;
	}

#content
{
	padding:10px;
	float:none;
	height:100%;
}
	
#content img{
	padding:10px;
	margin-left:40px;
}

#nav li a{
-x-system-font:none;
border-right:1px solid #CCCCCC;
color:#FAFCF8;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding:12px 15px 13px;
text-decoration:none;
}
	


#top{
	background-image:url(images/top.png);
	height:10px;
	}
	
#bottom{
	background-image:url(images/top.png);
	height:10px;
	padding:5px;
	float:left;
	width:1014px;
	}

#contentwrapper{
	width:1004px;
	background-color:#009999;
	float:left;
	height:100%;
	}

#contenttop{
	width:984px;

	float:right;
	}
#contentleft{
	width:592;
	float:left;

	}
	
#contentright{
	width:490px;

	float:right;
	}

#contentright li a{
color:#333333;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
line-height:normal;
	}	
	
#contentright ul{
	list-style-type:square;
	color:333333;
	}
#bottom a {
-x-system-font:none;
font-family:Arial,Helvetica,sans-serif;
color:#999999;
font-size:10px;
padding-left:25px;
text-align:center;
}

Hab meinen Fehler gefunden! Das "clear" war an der falschen Stelle, bzw in einer Datei garnicht vorhanden...danke für eure Hilfe!