ZeitGeist
Lounge-Member
Hallo,
ich möchte dass das Element footer immer 20px vom unteren Seitenrand entfernt ist.
Mit position: absolute; erreiche ich das nur, wenn der Inhalt auch ins Browserfenster passt (kein vertikales Scrollen). Wenn der Inhalt über mehr ist als auf einer Bildschirmseite im Browser angezeigt werden kann (vertikales Scrollen), wird der footer einmalig mit 20px Abstand zum unterem Browserrand angezeigt. Ich will aber dass er den Abstand zum Seitenrand behält, am also scrollen muss um den footer zu sehen.
Eine Positionierung zum Textfluss geht auch nicht, da der Inhalt auch weniger als eine Browserseite sein kann. In dem Fall soll der Footer dann 20px vom unteren Browserrand entfernt sein.
Hier mal mein Code:
Ich hoffe ich hab mich halbwegs verständlich ausgedrückt. Sonst bitte nachfragen
und schon mal vielen Dank im Voraus.
ich möchte dass das Element footer immer 20px vom unteren Seitenrand entfernt ist.
Mit position: absolute; erreiche ich das nur, wenn der Inhalt auch ins Browserfenster passt (kein vertikales Scrollen). Wenn der Inhalt über mehr ist als auf einer Bildschirmseite im Browser angezeigt werden kann (vertikales Scrollen), wird der footer einmalig mit 20px Abstand zum unterem Browserrand angezeigt. Ich will aber dass er den Abstand zum Seitenrand behält, am also scrollen muss um den footer zu sehen.
Eine Positionierung zum Textfluss geht auch nicht, da der Inhalt auch weniger als eine Browserseite sein kann. In dem Fall soll der Footer dann 20px vom unteren Browserrand entfernt sein.
Hier mal mein Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- Created by Carl Volhard (CarlVolhard at web dot de) -->
<title>X • Café & Bar | News</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-size: 8pt;
font-family: "Arial", sans-serif;
}
html, body {
min-height: 100%;
border: 1px solid black;
}
.frame {
margin: 40px 20px 80px 40px;
}
.leftCol {
padding-right: 120px;
}
.leftCol div {
margin-top: 83px;
margin-left: 101px;
}
.leftCol div p {
color: #E52525;
margin-left: 2px;
margin-bottom: 54px;
}
.navigation {
margin-bottom: 60px;
}
.navigation li {
list-style-type: none;
margin-bottom: 2px;
}
.navigation a {
padding: 0px 3px 0px 2px;
}
.navigation a:HOVER, .navigation a.active {
color: black;
background-color: #E52525;
text-decoration: none;
}
#footer {
position: absolute;
bottom: 20px;
margin-bottom:20px;
padding-left: 40px;
}
</style>
</head>
<body>
<table class="frame" border="0">
<tr>
<td class="leftCol" valign="top">
<div>
<p> • Café & Bar</p>
<ul class="navigation">
<li><a href="index.html" class="active">News</a></li>
<li><a href="index.html">Speisekarte</a></li>
<li><a href="index.html">Getränke</a></li>
<li> </li>
<li><a href="index.html">Bilder</a></li>
<li><a href="index.html">Kontakt</a></li>
<li><a href="index.html">Links</a></li>
</ul>
</div>
</td>
<td valign="top">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin suscipit felis, sed elementum felis aliquet nec. Cras mi est, placerat ac interdum non, volutpat a augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque mollis lacus sed lacus suscipit ultricies. Ut lacinia posuere dapibus. Nunc in magna magna. Ut ut urna a arcu sagittis iaculis ac vitae ante. Praesent iaculis leo et enim sodales adipiscing. In sit amet elit vitae tortor hendrerit feugiat. Pellentesque porta tellus ac leo auctor tristique. Morbi imperdiet eros ut lectus tincidunt sit amet blandit lacus tempor.
</p>
<p>
Nunc massa nulla, feugiat nec porta ac, tempus nec felis. Fusce eleifend metus nec elit laoreet nec feugiat quam interdum. Duis mollis pellentesque tempus. Suspendisse eget lectus lorem. Nulla facilisi. Nam facilisis euismod interdum. Nulla facilisi. Nullam id arcu metus, vitae gravida nisi. Proin fringilla condimentum suscipit. Morbi tincidunt tristique erat, non venenatis nulla ultricies id. Donec cursus varius justo ac cursus. Donec molestie dui quis orci vulputate nec ullamcorper felis porttitor. Ut cursus magna hendrerit quam convallis blandit eget ac nunc. Phasellus eros nulla, dignissim non auctor ut, convallis in sem. Suspendisse sit amet nibh ante. Vivamus et lobortis ligula. Quisque adipiscing venenatis nisl, sit amet gravida justo dapibus et. Pellentesque semper consectetur aliquet. Donec consequat ultricies hendrerit. Duis condimentum lacus vitae neque tincidunt commodo.
</p>
</td>
</tr>
</table>
<div id="footer">X | <a href="impressum.html">Impressum</a></div>
</body>
</html>Ich hoffe ich hab mich halbwegs verständlich ausgedrückt. Sonst bitte nachfragen
und schon mal vielen Dank im Voraus.
Zuletzt bearbeitet:
