CSS Sticky Footer

Cool Master · 11. Juli 2011

Morgen, ich habe ein kleines problem. Ich möchte das mein Footer immer unten bleibt. Mein Aufbau der Seite sieht atm so aus:

Der CSS Code von meinem Footer und dem Fistec Div sieht so aus:

Code:

#Fistec {
left : auto;
top : 10px;
margin : 0 auto;
position : relative;
width : 1255px;
height : 100%;
background : #ffffff;
}

#Footer {
background : gray;
height : 32px;
position : absolute;
top : 870px;
width : 1255px;
}

Ich hoffe ihr könnt mir helfen ich habe bestimmt schon 10 andere Seiten gefunden die das Umgesetzt haben aber bei mir will es einfach nicht gehen

GreenGene · 11. Juli 2011

Hallo bei #footer musst du bei position statt absolute fixed benutzen.

Code:

#Footer {
background : gray;
height : 32px;
position : fixed;
top : 870px;
width : 1255px;
}

Cool Master · 11. Juli 2011

Hmm da passiert nichts außer das der Footer an die Linkte Seite gepresst wird.

.olli · 11. Juli 2011

Kannst du die Seite mal irgendwo hochladen? Mit Firebug dürfte sich der Fehler relativ schnell finden lassen.

Eagle-PsyX- · 12. Juli 2011

Wie wäres es mit:

Code:

#Footer { 
  background-color : #555;
  height : 32px; 
  position : absolute; 
  top : 0; 
  width : 100%; 
}

Wieso eigentlich width: 1255px oder height: 870px ? Wie kommst du auf diese Zahlen? Das entspricht keinem Standard und die Auflösung (angenommen im maxmierten Modus) variiert je nach Browser und dessen Toolbar...

Cool Master · 12. Juli 2011

.olli schrieb:
Kannst du die Seite mal irgendwo hochladen? Mit Firebug dürfte sich der Fehler relativ schnell finden lassen.

Die Seite ist im Netz allerdings hinter einem PW das ich nicht heraus geben werde.

Eagle-PsyX- schrieb:
Wieso eigentlich width: 1255px oder height: 870px ? Wie kommst du auf diese Zahlen? Das entspricht keinem Standard und die Auflösung (angenommen im maxmierten Modus) variiert je nach Browser und dessen Toolbar...

Width: 1255 weil das Design auf 1280px ausgelegt ist. Top: 870px weil so der Footer unten ist aber wie gesagt die Seite ist noch nicht fertig. Zudem ist das der Wraper der die Seite zentriert. Btw. es gibt keinen Standard für die Auflösung im Web da es da zu viele Variationen gibt.

Dein Vorschlang ging auch nicht da bleibt er stur oben stehen.

.olli · 12. Juli 2011

Versuch mal den folgenden Code:

Code:

#footer {
	bottom: 0;
	height: 32px;
	left: 0;
	position: absolute;
	width: 1255px;
}

Weitere Informationen hier oder hier.

Cool Master · 12. Juli 2011

Danke für die Links. Habe es nun mal temp. anderst gelöst. Werde mich da heute noch mal richtig einlesen.

Mr. Snoot · 12. Juli 2011

Kannst auch mal hier schauen: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Die vorgestellten CSS-Layouts funktionieren eigentlich in jedem Browser.

Eagle-PsyX- · 12. Juli 2011

Die meisten Leute führen aber keine >1200px Breite. Deshalb die Frage. Und es gibt sehr wohl Auflösung die mit Abstand mehr Vertreten sind wie andere. Ich nenne sie "DeFacto-Standards.

800x600
1024x768
1280x1024
etc.

1024x768 wird meinen und paar anderen Seitenstatistiken am Meisten genutzt.
Im Fullscrenn in Firefox/IE/Chrome/Opera bist du mit ~980x580 ganz gut aufgehoben

Zeig mal vielleicht ein Screenshot von deinem Template. Glaube das lässt sich alles irgendwie besser/anders lösen.

Cool Master · 14. Juli 2011

Huhu

klar gibt es "Standard" Auflösungen. Da es eine Seite für ein Unternehmen ist wird aber 1024x768 nicht vertreten sein da jedes Unternehmen heute min. 17" TFT's hat die 1280x1024 fahren. Deswegen die 1255px Breite das sieht im Browser auf 1280x1024 wunderbar aus.

Also hier mal der HTML Code von der Index Datei:

HTML:

<div id="Fistec"><!-- Div für die Gesamte Seite -->
<div id="Header"><!-- Header Bereich -->
<div id="Logo"><a href="/"><img id="logo" src="/media/images/logo.png" alt="Home" name="logo" /></a></div>
<!--<div id="Lang"><a href="/?language=en"><img id="englisch" src="/media/images/Englisch.gif" alt="Home" name="englisch" /></a><a href="/?language=de"><img id="deutsch" src="/media/images/Deutsch.gif" alt="Home" name="deutsch" /></a></div>-->
<!-- Header ende -->
<!-- Navigation Menü -->
<div id="menu_bg">
<div class="menu">
<ul>
<li><a href="/unternehmen" target="_self">Unternehmen</a>
<ul>
<li><a href="/unternehmen/philosophie" target="_self">Unternehmensphilosophie</a></li>
<li><a href="/unternehmen/standort" target="_self">Standort</a></li>
<li><a href="/unternehmen/vorstand" target="_self">Vorstand</a></li>
<li><a href="/unternehmen/mitarbeiter" target="_self">Mitarbeiter</a></li>
<li><a href="/unternehmen/partner" target="_self">Partner</a></li>
<li><a href="/unternehmen/referenzen" target="_self">Referenzen</a></li>
<li><a href="/unternehmen/impressum" target="_self">Impressum</a></li>
<li><a href="/unternehmen/datenschutz" target="_self">Datenschutzerklärung</a></li>
</ul>
</li>
<li style="margin-top: 6px; color: white;"> | </li>
<li><a href="/beratungsleistung" target="_self">Beratungsleistung</a>
<ul>
<li><a href="/beratungsleistung/fertigungsindustrie" target="_self">Fertigungsindustrie</a></li>
<li><a href="/beratungsleistung/prozessanalyse" target="_self">Prozessanalyse und -optimierung</a></li>
<li><a href="/beratungsleistung/it-auswahl" target="_self">IT-Auswahl und Konzeption</a></li>
<li><a href="/beratungsleistung/sapberatung" target="_self">SAP-Beratung</a></li>
<li><a href="/beratungsleistung/pdm" target="_self">PDM</a></li>
<li><a href="/beratungsleistung/change-management" target="_self">Change Management</a></li>
<li><a href="/beratungsleistung/e-procurement" target="_self">e-Procurement</a></li>
<li><a href="/beratungsleistung/outsourceing" target="_self">SAP-Outsourcing/Hosting</a></li>
<li><a href="/beratungsleistung/anwenderschulung" target="_self">Anwenderschulung</a></li>
</ul>
</li>
<li style="margin-top: 6px; color: white;"> | </li>
<li><a href="/produkte" target="_self">Produkte</a>
<ul>
<li><a href="/produkte/engineer" target="_self">Fistec-Engineer</a></li>
<li><a href="/produkte/siscos" target="_self">SISCOS</a></li>
<li><a href="/produkte/sap-imds" target="_self">SAP-IMDS-Strukturbrowser</a></li>
<li><a href="/produkte/easy-cash" target="_self">Fistec Easy Cash</a></li>
</ul>
</li>
<li style="margin-top: 6px; color: white;"> | </li>
<li><a href="/service" target="_self">Service &amp; Support</a>
<ul>
<li><a href="/service/reaktionszeiten" target="_self">Reaktionszeiten</a></li>
<li><a href="/service/hotlinemeldung" target="_self">Hotlinemeldung</a></li>
</ul>
</li>
<li style="margin-top: 6px; color: white;"> | </li>
<li><a href="/archiv" target="_self">Archiv</a>
<ul>
<li><a href="/archiv/aktuelles" target="_self">Aktuelles</a></li>
<li><a href="/archiv/veranstaltungen" target="_self">Veranstaltungen</a></li>
</ul>
</li>
<li style="margin-top: 6px; color: white;"> | </li>
<li><a href="/jobs" target="_self">Jobs</a>
<ul>
<li><a href="" target="_self">Aktuelle Jobs</a></li>
<li><a href="" target="_self">Diplomarbeitsthemen</a></li>
<li><a href="" target="_self">Trainee</a></li>
<li><a href="" target="_self">Studentenjobs</a></li>
<li><a href="" target="_self">Kooperatives Studium</a></li>
</ul>
<li style="margin-top: 6px; color: white;"> | </li>
<li><a href="/kontakt" target="_self">Kontakt</a></li>
</div>
</div>
</div>
<!-- Navigation ende-->
<!-- Body Bereich -->
<div id="Body">
<div id="Testimonial">
<div id="Suche">
<form action="/suchergebnis">Welche Lösung suchen Sie? <input type="text" name="search" /></form>
</div>
<div id="Cloud">{% placeholder "Cloud" %}</div>
<div id="Testimonial_bg">{% placeholder "Testemonial" %}</div>
</div>
<div id="News">{% placeholder "News" %}
<div class="background">WAS HAT SICH GETAN?</div>
</div>
<div id="Messe">{% placeholder "Messe" %}
<div class="background">WANN IST WAS LOS?</div>
</div>
<div id="Jobs">{% placeholder "Jobs" %}
<div class="background">WO KANN ICH ARBEITEN?</div>
</div>
<div id="Weiterbildung">{% placeholder "Weiterbildung" %}
<div class="background">WIE BILDE ICH MICH WEITER?</div>
</div>
<div id="Produkt_titel">{% placeholder "Produkt_titel" %}</div>
{% block inhalt %}
<div id="Start">
<div id="Beratung">{% placeholder "Beratung" %}</div>
<div id="Service">{% placeholder "Service" %}</div>
<div id="Outsourceing">{% placeholder "Outsourceing" %}</div>
<div id="Solutions">{% placeholder "Solutions" %}</div>
</div><!-- div ende für Start -->
{% endblock inhalt %}
</div>
<!-- ende Body -->
{% block footer %}
<div class="footer_nav" id="Footer">
<ul>
<li><a href="/" target="_self">HOME</a></li>
<li><a href="/disclamer" target="_self">DISCLAMER</a></li>
<li><a href="/unternehmen/impressum/" target="_self">IMPRESSUM</a></li>
<li><a href="/kontakt" target="_self" style="background:none;">KONTAKT</a></li>
</ul>
</div>
{% endblock footer %}
</div>
</div>

und die CSS Datei:

Code:

@charset "utf-8";

img {
border : 0 none;
display : block;
}

* {
margin : 0;
padding : 0;
}

body {
font : 10px tahoma, arial, helvetica, sans-serif;
color : gray;
}

ul li {
color : red;
}

ul li span {
color: gray;
font-size : 10px;
}

#Header{
height: 94px;
position: absolute;
width: 100%;
}

#Body{
height: 745px;
position: absolute;
width: 100%;
top:95px;
}

#Footer {
background : gray;
height : 32px;
position : absolute;
top : 840px;
width : 1255px;
}

#Footer_Inhalt{
background : gray;
height : 32px;
position : absolute;
top : 1200px;
width : 1255px;
}

.footer_nav {
position : absolute;
top : 0;
left : 0;
}

.footer_nav ul {
height: 32px;
left: 940px;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
width: 280px;
}

.footer_nav li {
float : left;
padding : 0;
}

.footer_nav li a {
background : url("/media/images/seperator.png") 0% 0% no-repeat scroll;
background-position : right center;
color : white;
display : block;
font-weight : normal;
line-height : 32px;
margin : 0;
padding : 0 10px;
text-align : center;
text-decoration : none;
}

#Fistec {
top:10px;
margin : 0 auto;
position : relative;
width : 1255px;
height : 100%;
min-height: 100%;
background : white;
}

#Logo {
height: 47px;
position: absolute;
width: 184px;
}

#deutsch {
left: 1115px;
position: absolute;
top: 20px;
}

#englisch {
left: 1170px;
position: absolute;
top: 20px;
}

#menu_bg {
width : 1255px;
height : 32px;
top : 55px;
background : url("/media/images/nav_bg.png") 0% 0% repeat scroll;
position : relative;
}

.menu {
border : 0 none;
font-size : 16px;
margin-left : 267px;
padding : 0;
position : relative;
top : 0;
z-index : 3;
}

.menu ul {
height : 32px;
list-style : none;
margin : 0;
padding : 0;
width : 100%;
}

.menu li {
float : left;
padding : 0;
}

.menu li a {
background-position : right center;
color : white;
display : block;
font-weight : normal;
line-height : 31px;
margin : 0;
padding : 0 10px;
text-align : center;
text-decoration : none;
}

.menu li a:hover, .menu ul li:hover a {
background : url("/media/images/nav_mouse.png") 0% 0% repeat scroll;
color : white;
text-decoration : none;
}

.menu li ul {
background : #cc3333;
border : 0;
display : none;
height : auto;
padding : 0;
position : absolute;
width : 185px;
z-index : 3;
}

.menu li:hover ul {
display : block;
opacity: 0.9;
}

.menu li li {
display : block;
float : none;
margin : 0px;
padding : 0px;
width : 185px;
z-index : 3;
}

.menu li:hover li a {
background : url("/media/images/dropdown.png") 0% 0% repeat scroll transparent;
}

.menu li ul a {
display : block;
font-size : 12px;
height : 30px;
margin : 0px;
padding : 5px;
text-align : left;
border : 0px; /* Border für Dropdown Box */
}

.menu li ul a:hover, .menu li ul li:hover a {    /* Farbeinstellung für Mouse over im Dropdown */
background : none 0% 0% repeat scroll gray;
color : white;
text-decoration : none;
}
.menu p {
clear : left;
}

.background{ /* BG für Rechte Seite "Graue Box" */

background : #8b8c8e;
width : 280px;
height : 24px;
color : white;
position : absolute;
line-height : 25px;
font-size : 14px;
text-align : left;
text-indent : 15px;
left : 12px;
top : 5px;
}

#Suche {
background: gray;
color: white;
font-size: 14px;
height: 50px;
left: 2px;
position: absolute;
text-align: center;
top: 5px;
vertical-align: text-bottom;
width: 210px;
}

#Suche form {
position:absolute;
top : 10px;
}

#Cloud {
height: 270px;
left: 2px;
position: absolute;
top: 55px;
width: 325px;
}

#Testimonial {
background-color: white;
width : 845px;
top: 0px;
height : 325px;
background : url("/media/images/bsp_02.jpg") 0% 0% no-repeat scroll;
background-position : right center;
border : 2px solid lightgray;
position: absolute;
left: 55px;
box-shadow : 0px 4px 10px gray;
-webkit-box-shadow: 0px 4px 10px gray;
}

#Testimonial_bg {
background: none repeat scroll 0 0 white;
color: black;
height: 65px;
left: 333px;
opacity: 0.8;
padding-left: 10px;
position: absolute;
top: 210px;
width: 400px;

box-shadow : 4px 4px 10px gray;
-webkit-box-shadow: 4px 4px 10px gray;
}

#testemonial_1 {
margin-top : 4px;
font-weight : bold;
}

#testemonial_2 {
margin-top : 5px;
}

#News {
top : 0px;
width : 300px;
height : 165px;
background : white;
position : absolute;
left : 920px;
border : 2px solid lightgray;
box-shadow : 0px 4px 10px gray;
-webkit-box-shadow: 0px 4px 10px gray;
}

#news_1 {
margin-top : 35px;
margin-left : 10px;
font-size : 10px;
}

#mehr_1 {
margin-left : 240px;
}

#mehr_2 {
margin-left : 240px;
}

#news_2 {
font-size : 10px;
margin-left : 10px;
margin-top : 5px;
}

#Messe {
top: 175px;
width : 300px;
height : 240px;
background : white;
border : 2px solid lightgray;
position : absolute;
left : 920px;
font-size : 10px;
box-shadow : 0px 4px 10px gray;
-webkit-box-shadow: 0px 4px 10px gray;
}
#Messe ul {
margin-left : 25px;
}
#Jobs {
top: 430px;
width : 300px;
height : 80px;
background : white;
border : 2px solid lightgray;
position : absolute;
left : 920px;
box-shadow : 0px 4px 10px gray;
-webkit-box-shadow: 0px 4px 10px gray;
}

#Jobs table {
margin-top : 37px;
margin-left : 24px;
background : transparent;
width : 260px
}

#Weiterbildung {
background-color: white;
top:525px;
width : 300px;
height : 100px;
border : 2px solid lightgray;
position : absolute;
left : 920px;
box-shadow : 0px 4px 10px gray;
-webkit-box-shadow: 0px 4px 10px gray;
}

#Weiterbildung_1 {
margin-top : 40px;
margin-right : 100px;
margin-left : 15px;
font-size : 10px;
}

#Weiterbildung img {
margin-left : 195px;
margin-top : -60px;
}

#mehr_5 {
margin-left : 150px;
margin-top : -14px;
}

#Produkt_titel {
width : 830px;
height : 32px;
background : url("/media/images/nav_bg.png") 0% 0% repeat scroll;
color : white;
font-size : 18px;
line-height : 32px;
padding-left: 18px;
position: absolute;
top: 345px;
left: 55px;
}

#Start {
background: none;
height: 225px;
position: absolute;
width: 848px;
top: 385px;
left: 55px;
}

#Beratung {
position : absolute;
left: 0px;
width : 190px;
height : 215px;
padding-left : 5px;
padding-right : 5px;
background : white;
border : 3px solid lightgray;
box-shadow : 4px 4px 10px gray;
-webkit-box-shadow: 4px 4px 10px gray;
}

#Beratung p {
height : 55px;
margin-top : 10px;
width : 190px;
}

#Beratung h3 {
margin-top : 10px;
}

#Beratung ul {
margin-left : 20px;
}

#Service {
position : absolute;
width : 190px;
height : 215px;
left : 214px;
padding-left : 5px;
padding-right : 5px;

background : white;
border : 3px solid lightgray;
box-shadow : 3px 4px 10px gray ;
-webkit-box-shadow: 3px 4px 10px gray;
}

#Service p {
height : 55px;
margin-top : 10px;
width : 190px;
}

#Service h3 {
margin-top : 10px;
}

#Service ul {
margin-left : 20px;
}

#Outsourceing {
position : absolute;
width : 190px;
height : 215px;
left : 429px;
padding-left : 5px;
padding-right : 5px;

background : white;
border : 3px solid lightgray;
box-shadow : 4px 4px 10px gray ;
-webkit-box-shadow: 4px 4px 10px gray;
}

#Outsourceing p {
height : 55px;
margin-top : 10px;
width : 190px;
}

#Outsourceing h3 {
margin-top : 10px;
}

#Outsourceing ul {
margin-left : 20px;
}

#Solutions {
position : absolute;
width : 190px;
height : 215px;
left : 642px;
padding-left : 5px;
padding-right : 5px;
background : white;
border : 3px solid lightgray;
box-shadow : 4px 4px 10px gray ;
-webkit-box-shadow: 4px 4px 10px gray;
}

#Solutions p {
height : 55px;
margin-top : 10px;
width : 190px;
}

#Solutions h3 {
margin-top : 10px;
}

#Solutions ul {
margin-left : 20px;
}

Nicht wundern die {% placeholder "xyz" %} sind für das CMS.

Im Anhang mal ein Bild in 1280x1024

ice-breaker · 14. Juli 2011

Cool Master schrieb:
klar gibt es "Standard" Auflösungen. Da es eine Seite für ein Unternehmen ist wird aber 1024x768 nicht vertreten sein da jedes Unternehmen heute min. 17" TFT's hat die 1280x1024 fahren. Deswegen die 1255px Breite das sieht im Browser auf 1280x1024 wunderbar aus.

sehr gefährliche Annahme!
Dann besucht ein Kunde mit seinem Notebook die Seite, diese ist unbedienbar, da sie viel zu groß ist und verlässt die Seite wieder: ein potentieller Kunde verloren.

Schonmal von CSS gehört? Fast jedes li-Element hat die gleichen Styling-Regeln, das könnte man wunderbar in eine Regel auslagern.

Das Design könnte man auch wunderbar 200px weniger breit machen, das sollte nicht das Problem sein ...

Du solltest vllt die URL aus deinem Screenshot löschen

So wissen wir welche Firma dieses "Verbrechen" begeht

Cool Master · 14. Juli 2011

URL is weg^^

Ja das Design könnte man 200 px verkleinern aber ich setzte nur das um was ich bekomme. Der Kunde will es so der Kunde bekommt es so.

Und welcher halbwegs moderne Laptop hat nicht eine größere Auflösung als 1024x768? Jeder der diese Auflösung noch nutzt ist genau so schlimm wie jmd der den IE6 noch freiwillig benutzt.

Im Jahr 2011 kann man von einer Auflösung von 1280x1024 ausgehen und imho sollte man diese auch nutzen. Das ist das gleiche wie mit dem IE6 wenn immer noch drauf optimiert wird ist klar das die leute davon nicht weg gehen weil sie sich denken hmm warum sollte ich nen update machen alle seiten werden ja angezeigt.

Edit:

Was meinst mit: ob ich schon mal CSS gehört habe? Das Menu ist doch mit CSS gemacht mit der class .menu

ice-breaker · 14. Juli 2011

Cool Master schrieb:
Und welcher halbwegs moderne Laptop hat nicht eine größere Auflösung als 1024x768? Jeder der diese Auflösung noch nutzt ist genau so schlimm wie jmd der den IE6 noch freiwillig benutzt.

schonmal überlegt, dass nicht jeder ein Schlepptop mit hat? Subnotebooks sind im Businessbereich sehr beliebt.
Oder Smartphones? Die sind weit weg von 1280 Pixel, umso größer, umso komplexer zu bedienen.
Und der Vergleich einer Displayauflösung mit dem IE6 ist echt - naja

Also deine Vorstellungen sind wirklich, sehr ähm, auf eine kleine Welt bezogen.
Aber das ist ja nicht Sinn des Themas.

Der Link von Mr. Snoot ist wirklich gut.

Cool Master · 14. Juli 2011

Stell dir vor ich habe ein iPhone 4 und man kann die Seite ohne probleme bedienen

Subnotebooks:

Klar Fima X hat das evtl. oder Firma Y aber eben nicht jede. Nur weil jmd evtl. so ein Gerät hat muss man deswegen nicht gleich die Auflösung runter schrauben.

Und sind wir mal ehrlich wie viel Prozent der Firmen haben Subnotebooks? Wenn das 0,05 sind ist das viel.

Eagle-PsyX- · 14. Juli 2011

Ich finde das Design gut.
Vorallem ist es sehr gut möglich, das nur mit dynamischen Breiten (%) zu erstellen. Dann kannst du immer noch min-width oder max-width angeben, um es in Grenzen zu halten. Dabei sollte man aber die Kompatibilität beachten.

Zu den Auflösungen: Wie du meinst

Ignoriere halt die Tipps.

Cool Master · 14. Juli 2011

Eagle-PsyX- schrieb:
Zu den Auflösungen: Wie du meinst Ignoriere halt die Tipps.

Was soll ich da Ignorieren?

Wenn der Kunde sagt er will die 1280er Auflösung bekommt er die ist zwar nett gemeint von euch aber wenn der Kunde das will bekommt er es auch.

Ich denke mal das könnt ihr verstehen

fsx94 · 14. Juli 2011

Dritter Versuch

Vielleicht so?

Code:

#Footer {
background : gray;
height : 32px;
position : fixed;
bottom : 10px;
width : 1255px;
left: 12.5px;
}

#Footer_Inhalt{
background : gray;
height : 32px;
position : fixed;
bottom : 10px;
width : 1255px;
left: 10px;
}

Und #Footer + #Footer_Inhalt unter den .footer_nav-Klassen

Der Footer soll doch fest sein?

Eagle-PsyX- · 14. Juli 2011

Cool Master schrieb:
Ich denke mal das könnt ihr verstehen

Ja, leider.

Nur hoffe ich, du hast ihn aber drauf hingewiesen. Ansonsten (je nach Know-How) darfst du mit Beschwerden rechnen, à la "es sieht ja gar nicht so wie auf meinen Bildschirm aus" :-)

Hast du eigentlich meinen Code versucht? Bau halt width: **px ein. Der Ansatz müsste aber gehen, mit position:absolute; und bottom: 0;

Ergänzung:
Wieso sagt keiner das ich oben offensichtlich ein Fehler drin hatte -.-

Code:

#Footer { 
  background-color : #555;
  height : 32px; 
  position : absolute; 
  bottom : 0; 
  width : 1255px;
}

@fsx94
Mit position:fixed kriegst du es nur in der einen Position unten stehen.

fsx94 · 14. Juli 2011

Kannst vielleicht auch einfach bei deinem CSS #Footer und #Footer_Inhalt unter den .footer_nav-Klassen tun, falls du keine fixen Positionen möchtest; so funktioniert es aber bei mir:

So jetzt in kurz:

Code:

#Footer, #Footer_Inhalt {
background : gray;
height : 32px;
position : fixed;
bottom : 10px;
width : 1255px;
left: 12.5px;
}

Hoffentlich wolltest du fixe Positionen, ist kürzer als mein Oberes.

PS: Bin Neuling, also kleine Fehler verzeihen

PPS: Und das unter die .footer_nav-Klassen

CSS Sticky Footer

Fleet Admiral

Cadet 4th Year

Fleet Admiral

Cadet 4th Year

Commander

Fleet Admiral

Cadet 4th Year

Fleet Admiral

Mr. Snoot

Gast

Commander

Fleet Admiral

Commodore

Fleet Admiral

Commodore

Fleet Admiral

Commander

Fleet Admiral

Ensign

Commander

Ensign

Ähnliche Themen