Detlef G.: Anzeigebereich über gesamte Höhe mit CSS

Beitrag lesen

SELF-Forum

Anzeigebereich über gesamte Höhe mit CSS

Detlef G.
– Informationen zu den Bewertungsregeln

Hallo Arnold,

anhand deines geposteten Quelltextes stelle ich mir vor, dass du es dir vielleicht so vorstellst.

XHTML:

<?xml version="1.0" encoding="ISO-8859-1" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>LKU Test</title>  
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  <link href="test.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
  <div id="container">  
    <div id="banner"><img  src="../../LKU/Internet/images/top6.jpg" alt="Banner" width="766" height="135" /></div>  
    <div id="center">Raum für den Inhalt von  id "center"<br /></div>  
    <div id="bottom">  
      <p>mm</p>  
    </div>  
  </div>  
</body>  
</html>

CSS:

html, body {  
  background-color: #CCC;  
  margin: 0;  
  padding: 0;  
  text-align:center;  
  height:100%;  
  min-width: 766px;  
}  
#container {  
  width: 766px;  
  margin: 0 auto;  
  background-color: #FFF;  
  color: #000;  
  min-height: 100%;  
  text-align:left;  
  position:relative;  
}  
* html #container {  
  height:100%;  
}  
#banner {  
  border-top: 10px solid #CCC;  
}  
#center {  
  padding-bottom: 2em; /* Höhe von #bottom */  
}  
#bottom {  
  background-color: #FC0;  
  color: #000;  
  position:absolute;  
  bottom: 0;  
  left:0;  
  right:0;  
  width: 100%;  
  border-bottom: 10px solid #CCC;  
}  
#bottom p {  
 margin:0;  
 padding: 0;  
}

Schau es dir an und frage hier wieder nach, wenn es anders ist, als du es wolltest, oder du nicht verstehst, warum welche Eigenschaften im CSS gesetzt sind.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Beitrag melden
–
Informationen zu den Bewertungsregeln