| Autor |
Nachricht |
christz
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 08.06.2015 10:57
Titel Footer soll ganz unten im Bildschirmrand bleiben |
  |
|
Servus liebe Mediengestalter/innen, ich habe immer ein ärgerliches Problem mit Div-Footer. Ich möchte es so, dass den Footer immer ganz unten im Browserfenster bleibt, aber Footer will einfach nicht mit.
Natürlich habe ich die Tutorials und so erst gelesen und ausprobiert, bevor ich hier schreibe. Diese Anleitungen habe ich mir angesehen, ausprobiert:
- http://www.html-seminar.de/sticky-footer-fussleiste-ganz-unten.htm
- http://aktuell.de.selfhtml.org/artikel/css/footer/
- http://www.ohne-css.gehts-gar.net/0044.php
- http://www.cssstickyfooter.com/using-sticky-footer-code.html
- https://www.html.de/threads/footer-bottom-position-immer-unten-positionieren.35477/
Aber es hat nicht ein bisschen geholfen, irgendwie steckt Footer oben am Navigationsleiste hängen... 
Ich hoffe, jmd. kann mir helfen. Also den Footer darf nicht fixiert sein, sondern scrollbar abhängig von Inhaltmenge. Danke im Voraus. 
index.php:
| Code: | <!DOCTYPE html>
<html>
<head>
<title>Site</title>
<?php include 'import.php'; ?>
</head>
<body>
<div id="wrapper">
<?php include 'site_header.php'; ?>
<?php include 'site_navigation.php'; ?>
<div id="content">
<div id="site_content" class="center">
<div id="sidebar_left" class="testbg2">
<?php include 'sidebar_left.php'; ?>
</div>
<div id="site_main">
<?php include 'main_banner.php'; ?>
</div>
<div id="sidebar_right" class="testbg2">
<?php include 'sidebar_right.php'; ?>
</div>
</div>
</div><!--Ende #content-->
<?php include 'site_footer.php'; ?>
</div><!--Ende #wrapper-->
</body>
</html> |
site_header.php:
| Code: | | <div id="site_header"></div> |
site_navigation.php:
| Code: | <div id="site_navigation">
<div class="center">
<span class="site_navigation_link">Navi Test</span>
<span class="site_navigation_close"></span>
<span class="site_navigation_link">Navi Test2</span>
<span class="site_navigation_close"></span>
<span class="site_navigation_link">Navi Suche</span>
<span class="site_navigation_close"></span>
<span class="site_navigation_link">Navi 4</span>
<span class="site_navigation_close"></span>
<span class="site_navigation_link">Navi 5</span>
<span class="site_navigation_close"></span>
<span class="site_navigation_link">Navi 6</span>
<span class="site_navigation_close"></span>
<span class="site_navigation_link">Registrieren</span>
</div>
</div> |
main_banner.php:
| Code: | <div class="boxborder">
Test
</div> |
site_footer.php:
| Code: | <div id="site_footer">
Das ist ein Footer
</div> |
import.php:
| Code: | <link rel="stylesheet" type="text/css" href="./css/layout.css">
<link rel="stylesheet" type="text/css" href="./css/sidebar_layout.css">
<link rel="stylesheet" type="text/css" href="./css/font.css"> |
layout.css:
| Code: | html, body {
margin: auto;
background-color: #f7f7f7;
overflow: hidden;
height: 100%;
}
.testbg2 {
background-color: #00ff00;
}
.center {
position: absolute;
width: 1200px;
left: 50%;
margin-left: -600px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#content {
}
#site_header {
width: 100%;
height: 180px;
display: block;
background-image: url(http://coala.zz.mu/images/site_header_background_esports.jpg);
background-position: center;
}
#site_navigation {
height: 40px;
background-image: url(http://coala.zz.mu/images/site_navigation_background.png);
background-repeat: repeat-x;
margin: 0px 0px 25px 0px;
}
.site_navigation_link {
color: #f7f7f7;
display: inline-block;
height: 40px;
padding: 0px 20px 10px 20px;
vertical-align: middle;
font-size: 13.5px;
font-weight: bold;
letter-spacing: 0.25px;
}
.site_navigation_close {
height: 40px;
width: 2px;
background-image: url(http://coala.zz.mu/images/site_navigation_close.png);
display: inline-block;
}
#site_content {
clear: both;
position: absolute;
overflow: auto;
}
#sidebar_left {
float: left;
width: 235px;
min-height: 800px;
}
#site_main {
float: left;
width: 700px;
margin: 0px 15px 0px 15px;
min-height: 800px;
}
#sidebar_right {
float: right;
width: 235px;
min-height: 800px;
}
#sidebar_title {
height: 20px;
display: block;
background-image: url(http://coala.zz.mu/images/site_sidebartitle_background.png);
background-repeat: repeat;
padding: 5px 5px 5px 10px;
vertical-align: middle;
font-size: 13.5px;
font-weight: bold;
color: #f7f7f7;
}
#sidebar_subnavi {
height: 20px;
max-width: 235px;
background-image: url(img/subnavi_right.png);
background-repeat: no-repeat;
background-position: 10px 11px;
display: block;
padding: 8px 5px 5px 30px;
vertical-align: middle;
font-size: 13px;
color: #4d4d4d;
border-bottom: 1px dotted #ddd;
}
.sidebar_blank {
height: 20px;
display: block;
}
#site_footer {
background-color: #e5e5e5;
border-top: 1px solid #cdcdcd;
width: 100%;
height: 220px;
position: absolute;
bottom: 0px;
}
.iconaligin_asc {
vertical-align: middle;
float: right;
padding: 6px 10px 0px 0px;
font-size: 10px;
}
.iconaligin_desc {
vertical-align: middle;
float: right;
padding: 2px 10px 0px 0px;
font-size: 10px;
}
.counter {
z-index: 5;
position: relative;
color: #f7f7f7;
text-shadow: 0px 1px #333;
font-size: 9px;
font-weight: bold;
padding: 1px 3px 1.5px 3px;
margin: 7px 0px 0px 0px;
position: absolute;
border-radius: 3px;
background-image: url(img/site_navigation_background.png);
}
.button1 {
right: 115px;
background-image: url(img/main_betgroup_title_background.png);
}
.buttonx {
right: 61px;
background-image: url(img/main_betgroup_title_background.png);
}
.button2 {
right: 7px;
background-image: url(img/main_betgroup_title_background.png);
}
.wcb {
background-image: url(img/main_betgroup_wbc_background.gif) !important;
}
.lcb {
background-image: url(img/main_betgroup_lbc_background.gif) !important;
}
.counter_left {
position: absolute;
left: 205px;
float: right;
color: #f7f7f7;
text-shadow: 0px 1px #333;
font-size: 9px;
font-weight: bold;
padding: 1px 3px 1.5px 3px;
margin: 0px 0px 0px 0px;
position: absolute;
border-radius: 3px;
background-image: url(img/site_navigation_background.png);
}
.counter_right {
position: absolute;
right: 10px;
float: right;
color: #f7f7f7;
text-shadow: 0px 1px #333;
font-size: 9px;
font-weight: bold;
padding: 1px 3px 1.5px 3px;
margin: 0px 0px 0px 0px;
position: absolute;
border-radius: 3px;
background-image: url(img/site_navigation_background.png);
}
img.flag {
padding: 0px 10px 0px 0px;
}
#site_footer {
position: relative;
display: block;
top: 100%;
bottom: 0px;
width: 100%;
height: 200px;
z-index: 1;
background-color: #e5e5e5;
border-top: 1px solid #cdcdcd;
}
#footer_content {
font-size: 12px;
color: #9b9b9b;
padding: 20px 0px 20px 0px;
}
.minisize {
font-size: 10.5px;
padding: 3px 0px 3px 0px;
white-space: pre-wrap;
}
.boxborder {
background-color: #e5e5e5;
padding: 5px;
border-radius: 4px;
} |
Zuletzt bearbeitet von christz am Mo 08.06.2015 11:00, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
JohnnyCage
Gesperrt
Dabei seit: 11.12.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 08.06.2015 14:14
Titel
|
|
|
|
verlink doch mal bitte deine Seite…
|
|
| |
|
|
|
Anzeige
|
|
|
christz
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 09.06.2015 01:22
Titel
|
|
|
|
Hallo, entschuldige mich. Ich habe es voll glatt vergessen. Hier ist URL-Adressee: http://coalabom.esy.es/
|
|
| |
|
|
JohnnyCage
Gesperrt
Dabei seit: 11.12.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 09.06.2015 10:08
Titel
|
|
|
|
Das position: relative deines Footers muss position: absolute sein
|
|
| |
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Di 09.06.2015 10:25
Titel
|
|
|
Ich verstehe das Ziel deines Layouts noch nicht ganz.
Der canvas ist overflow: hidden gestellt, soll also das scrolling komplett unterbunden bleiben?
Der Footer ordnet sich natürlich nicht unten an, da der Hauptcontent absolut positioniert ist - ist das das Produkt von dem Herumprobieren?
Grundsätzlich habe ich es so verstanden, dass bei wenig Inhalt der Footer am Browserende angezeigt wird, bei viel Inhalt mit dem Inhalt nach unten rutscht. Da das Scrollen aber unterbunden ist, schätze ich, du musst ihn lediglich wie Johnny meint absolut positionieren und mit einem negativen margin-top um die Höhe des Footers nach oben holen.
Aber auch das sollte in mindestens der Hälfte der oben genannten Beispiele so auch dokumentiert sein ...
|
|
| |
 |
|
JohnnyCage
Gesperrt
Dabei seit: 11.12.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 09.06.2015 11:32
Titel
|
|
|
| SimonDerDude hat geschrieben: | | Da das Scrollen aber unterbunden ist, schätze ich, du musst ihn lediglich wie Johnny meint absolut positionieren… |
Andersrum.
Meine Änderung bewirkt das wie du es grundsätzlich verstanden hast.
Das overflow: hidden habe ich übersehen. Damit wird meine Änderung nicht funktionieren.
BTW: muss das top: 100% natürlich auch raus.
|
|
| |
|
|
christz
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 10.06.2015 06:30
Titel
|
|
|
Vielen Dank für die Antworten.
Ich habe also wegen eure Tipps & Ratschläge dieses Tags entfernt und geändert.
html, body: (entfernt)
#site_footer: (entfernt)
#site_footer: (geändert)
in
Es hat fast geklappt, nur ein Problem ist noch aufgelöst, Footer hängt da fest, wenn man runterscrollt. Siehe Bild:
Was ich gemeint habe ist den Footer ganz unten bleiben soll. Falls der rechte oder/und linke Sidebar ganz lang ist, dann soll den Footer nicht sichtbar sein, denn Sidebars logisch lang sind und Footer ganz unten ist, bis man runterscrollen muss so dass den Footer sichtbar sein kann. Ich hoffe, ihr versteht mich, was ich genau meine. Und entschuldige mich für mein Deutsch.
|
|
| |
|
|
christz
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 10.06.2015 06:58
Titel
|
|
|
Nochmal hier, wegen nach langer Zeit nicht mehr editbar: | Zitat: | | Dieser Beitrag kann nicht mehr bearbeitet werden. Beiträge sind nach der Erstellung nur 20 Minuten lang editierbar. |
Mit dieser Url kann man bestimmt besser sehen bzw. nachprüfen wo der Fehler ist: http://codepen.io/anon/pen/WvOboG
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Unteren Bildschirmrand entfernen
Element fällt vom Bildschirmrand
Wie bleiben gifs tranzparent?
Navigationsleiste soll aufgeklappt bleiben
serverwechsel - domain soll bleiben
Link soll makiert bleiben, css od. js
|
|
Willkommen auf dem Portal für Mediengestalter
