Guten Tag zunächst mal,
da ich hier noch neu bin, weiß ich nicht, ob ich mit der richtigen Tür ins Haus falle. Ich sitze nun seit zwei Tagen an einem (für mich) scheinbar unlösbaren Problem, obwohl das ganze (sogar für mich) recht einfach klingt.
Ich habe hier drei Dateien vor mir: 1 *.html-Datei, 1 dazugehörige *.css-Datei und ein *.jpg in der Größe 1024 x 768 Pixels. Im folgenden hänge ich die beiden ersteren Dateien mal an (hoffentlich mach ich es richtig).
Mein Wunsch wäre folgender: In der #seite sollte das komplette Hintergrundbild im gen. Format erscheinen. Der #header sollte immer oben stehen. Der #fussbereich sollte permanent unten angeheftet sein, wobei der #inhalt wegen variierenden Datenmengen scrollbar sein.
Stehe ich tatsächlich vor einem unlösbaren Problem, oder stelle ich mich nur wieder zu dusselig an? Als kleine Info kann ich noch sagen, daß ich mir alles beim "Sticky-Footer am unteren Rand" abgeguckt habe
Hier mal die 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" xml:lang="de" lang="de">
<head>
<title>ISAs Sport- und Line Dance Seiten</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link href="main-01.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body { font-family: Verdana, sans-serif, Arial} {font-size: 14px }
<!-- a { padding: 3px; } a:focus { background-color: yellow; color: black;} -->
a:link { color: white; text-decoration: none; }
a:hover { background-color: none; color: black; text-decoration: none; }
a:active { background-color: yellow; text-decoration: blink; }
</style>
</head>
<body bgcolor="grey" oncontextmenu="return false">
<div id="seite">
<div id="header">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3" height="38">
<tr>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="index.html">HOME</a></b></font></td>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="isa/index.html">ISA</a></b></font></td>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="sportmitisa/index.html">FIT MIT ISA</a></b></font></td>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="linedance/index.html">LINE DANCE</a></b></font></td>
</tr>
<tr>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="links/index.html">LINKS</a></b></font></td>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="highlights/index.html">HIGHLIGHTS</a></b></font></td>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="sportforum/index.html">FORUM</a></b></font></td>
<td width="20%" height="19" align="center">
<font face="Verdana"><b><a href="http://www.isa-tut.de/chat/login.php">DANCE
CHAT</a></b></font></td>
</tr>
</table>
</div>
<div id="inhalt">
<center><font face="Verdana" size="3" color="#000000"></font>
<p>Inhalt1</p>
<p>Inhalt2</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Inhalt1</p>
<p>Ende vom Inhalt1</p>
</center>
</div>
<div id="fussbereich">
<center>ISAs Homepage</center>
</div>
</div>
</body>
</html>Und hier noch die CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#seite {
position: relative;
min-height: 100%;
background-image: url(bg-04.jpg); opacity: 0.4;
background-color: silver;
width: 1024px;
margin: 0 auto;
}
#header {
position: relative;
width: 1024px;
margin: 0 auto;
background-color: red; opacity: 0.5;
}
#inhalt {
position: relative;
max-height: 100%;
height: 100%;
margin-bottom: 0;
}
#fussbereich {
position: absolute;
bottom: -2em;
width: 100%;
background-color: yellow;
height: 2em;
line-height: 2em;
margin-top: -2em;
}Für Hilfe bin ich stets dankbar... Was mach ich nur falsch?