nicht angemeldet
Höhe des Div Containers auf 100% setzen
1 
Der Martin
Höhe des Div Containers auf 100% setzen
Matthias ApselGuten Abend,
ich verzweifel seit einigen Stunden etwas und habe schon Tante Google ordentlich zum glühen gebracht, doch finde ich den Fehler einfach nicht.
Ich habe eine Webseite mit folgender CSS Datei:
body {
margin:0;
font:12px Tahoma;
color:black;
background:url("../images/bg1.jpg") 50% 0 #151921 repeat-x;
}
#box_background {
background:url("../images/ev_bg.gif") repeat-y;
width:1064px;
margin:0px auto;
}
#content_box_background {
width:1000px;
margin:0 32px;
background:url("../images/parchment-light2.jpg");
border:1px solid black;
border-width:0px 1px;
}
#header {
height:162px;
background:url("../images/wow_header.jpg") right no-repeat;
padding:0 20px;
}
#header h1 {
padding-top:115px;
margin:0;
color:white;
}
#header_line {
clear:both;
background:url("../images/border-red.gif") repeat-x;
padding:20px 10px;
}
.horizontal #column {
width:auto;
float:none;
height:30px;
}
#navigation a {
background:url("../images/button-red.gif") no-repeat;
width:115px;
height:25px;
display:block;
padding-left:25px;
margin:5px 0;
font-size:11px;
font-weight:bold;
color:white;
text-decoration:none;
line-height:25px;
}
#navigation a:hover {
background-position:0 bottom;
}
.horizontal #navigation a { float:left; }
#subnavigation { margin:10px 0; text-align:center;}
#subnavigation a { color:#7A0C0C; }
#subnavigation a:hover { color:#E51414 }
#content {
float:left;
width:50%;
margin:0px 20px;
}
.horizontal #content {
width:auto;
float:none;
}
.content_title {
background:url("../images/parchment-light3.jpg");
border:1px solid #545454;
margin-bottom:35px;
line-height:18px;
}
.content_title h1 {
background:url("../images/title-red.gif") repeat-x #0d2368;
padding:2px 10px;
margin:0;
font-size:15px;
color:white;
}
.content_body {
padding:5px 15px;
}
ul {
margin:20px; padding:10px;
}
li {
list-style:none;
background:url("../images/bullet.gif") 0 5px no-repeat;
padding-left:30px; line-height:25px;
}
Folgende HTML Datei habe ich erstellt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Language" content="de">
<title>Meine Webseite</title>
<link href="css/meinecss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box_background">
<div id="content_box_background">
<div id="header">Startseite</div>
<div id="header_line" class="horizontal">
<div id="column">
<div id="navigation">
<a href="index.html">Startseite</a>
<a href="andereseite.html">AndereSeite</a>
<a href="andereseite2.html">AndereSeite2</a>
</div>
</div>
<div id="subnavigation">
<a href="subseite.html">Subseite</a>
</div>
<div id="content">
<div class="content_title">
<h1>Startseite</h1>
<div class="content_body">
Mein Content
</div>
</div>
</div>
</div>
</div>
</div>
Das ist die Seite:
Jetzt möchte ich die Pergamentbox und dessen Rand auf 100% Höhe bringen, also wie die Pfeile im Beispielscreen anzeigen. Dazu habe ich folgende Änderungen an der CSS Datei gemacht:
html, body { //html hinzugefügt
margin:0;
font:12px Tahoma;
color:black;
height:100%; //height hinzugefügt
background:url("../images/bg1.jpg") 50% 0 #151921 repeat-x;
}
#box_background {
background:url("../images/ev_bg.gif") repeat-y;
width:1064px;
margin:0px auto;
min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */ Hinzugefügt
height: auto !important; /* important Befehl (bei modernen Browsern */ Hinzugefügt
height: 100%; /* IE soll wie gewünscht interpretieren */ Hinzugefügt
overflow: hidden !important; /* Firefox Scrollleiste */ Hinzugefügt
}
#content_box_background {
width:1000px;
margin:0 32px;
background:url("../images/parchment-light2.jpg");
border:1px solid black;
border-width:0px 1px;
min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */ Hinzugefügt
height: auto !important; /* important Befehl (bei modernen Browsern */ Hinzugefügt
height: 100%; /* IE soll wie gewünscht interpretieren */ Hinzugefügt
overflow: hidden !important; /* Firefox Scrollleiste */ Hinzugefügt
Doch leider sieht das dann so aus:
Hat irgendjemand eine Idee? Ich komme einfach nicht auf die Lösung.
-
Moin,
html, body { //html hinzugefügt
margin:0;
font:12px Tahoma;
color:black;
height:100%; //height hinzugefügt
background:url("../images/bg1.jpg") 50% 0 #151921 repeat-x;
}CSS kennt keine einzeiligen, mit // eingeleteten Kommentare. Das ist ein Syntax Error, die betreffende Regel wird ignoriert. Also die ganze Sequenz "//html hinzugefügt margin:0;", die background-Regel verschwindet auf die gleiche Weise. > Hat irgendjemand eine Idee? Ich komme einfach nicht auf die Lösung. Verwende korrekte Kommentarzeichen. Dann klappt's auch mit dem Nachbarn ... äh, Background. So long, Martin -- Die neue E-Mailadresse des Papstes: <mailto:urbi@orbi> Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Moin,
html, body { //html hinzugefügt
margin:0;
font:12px Tahoma;
color:black;
height:100%; //height hinzugefügt
background:url("../images/bg1.jpg") 50% 0 #151921 repeat-x;
}> > CSS kennt keine einzeiligen, mit // eingeleteten Kommentare. Das ist ein Syntax Error, die betreffende Regel wird ignoriert. Also die ganze Sequenz "//html hinzugefügt margin:0;", die background-Regel verschwindet auf die gleiche Weise. > > > Hat irgendjemand eine Idee? Ich komme einfach nicht auf die Lösung. > > Verwende korrekte Kommentarzeichen. Dann klappt's auch mit dem Nachbarn ... äh, Background. > > So long, > Martin > Entschuldigung das // hat vielleicht etwas verwirrt. In der CSS Datei sind die // nicht vorhanden sondern nur /\*\*/ Kommentare. Die // Kommentare habe ich nur hier im Forum hinzugefügt damit man direkt den Unterschied von der alten zur neuen CSS sieht. Ich werds fix mal der Übersichtlichkeithalber abändern.-
Om nah hoo pez nyeetz, Athris!
Du hast gelesen, dass Vollzitate nicht erwünscht sind?
Sa beste wäre, du würdest die Seite verlinken, dann lässt sixh dir effizient helfen. Zudem solltedt du keine div-Suppe kochen. Es gibt inzwischen semantisch passende Elemente. Schau etwa in unser Blog, und dort in die HTML5-Serie.
Matthias
-
-
