✔ Footer setzt sich nicht richtig an das Ende der Seite

mogmog · 8. Juli 2007

Hallo alle zusammen.

Ich habe eine Seite mit einem Footer erstellt. der soll immer am ende der seite sein (was er auch ist) aber wenn die auflösung des Users zu groß ist (oder zuwenig text) soll der footer am browserfenster unten anliegen.

und das wollte ich so mit einer css datei erstellen:

HTML:

#footer-wrapper {
	width: 100%;
	background: #3C3C3C url(images/footer_background.png) repeat-x;
	color: #CCCCCC;
	bottom: 0;
	margin: 0;
	padding: 0;
}

ich weiß nicht vieleicht giebt es da probleme mit einem anderen befehl udn deswegen hier mal den ganze css code:

HTML:

body {font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      background: #fff url(images/background.png) repeat-x;
      color: #37383A;
      text-align: center;} /* Needed to center layout in old IE browsers. */

acronym, abbr {cursor: help;
               border-bottom: 1px dotted;}

h1, h2, h3, h4, h5, h6, p {margin: 0 0 25px 0;
                           padding: 0;}

p {line-height: 160%;}

img {
	border: 0;
	margin: 0 0 25px 0;
}
       
h1 {font-size: 24px;}
h2 {
	font-size: 22px;
	background-color: #383838;
	color: #CCCCCC;
}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

a {color: #586D8C; text-decoration: none;}
a:link {color: #586D8C;}
a:visited {color: #586D8C;}
a:hover {color: #4153AD;}

.clear-fix:after {content: ".";
                  display: block;
                  clear: both;
                  height: 0;
                  visibility: hidden;}

.clear-fix {display: inline-block;}



.clear-fix {display:block;}



.right {float: right;}

.left {float: left;
       margin: 3px 5px 0 0;}

.justify {text-align: justify;}
                  
#container {
	width: 800px;
	margin: 0 auto;
	text-align: left;
	padding-bottom:3em;
}

#header {
	width: 100%;
	height: 152px;
	position: relative;
	background-image: url(images/Karten.png);
	background-repeat: no-repeat;
}

#logo {position: absolute;
       left: 554px;
       bottom: -43px;
       width: 264px;
       height: 64px;}

#logo h1 {margin: 0;}

#logo a {background: transparent;}

#logo img {display: block;
           margin: 0;}



#search {position: absolute;
         right: 0;
         top: 87px;}

#search input#s {margin-right: 5px;
                 vertical-align: middle;
                 border-bottom: 1px solid #6C6764;
                 border-right: 1px solid #6C6764;
                 border-top: 1px solid #272525;
                 border-left: 1px solid #272525;
                 padding: 0.24em;
                 width: 135px;
                 background-color: #514C4B;
                 color: #B7B2B1;}

#search input#s:focus {background-color: #4A4544;
                       color: #B7B2B1;}

#search input#submit {border: 0;
                      margin: 0;
                      vertical-align: middle;
                      background-color: #4A4544;
                      color: #B7B2B1;}





#menu {width: 100%;
       height: 23px;
       clear: both;}

#menu ul {list-style-type: none;
          margin: 0;
          padding: 0;}

#menu ul li {display: inline;}

#menu ul li a {text-decoration: none;
               height: 23px;
               padding: 0 14px;
               margin: 0;
               line-height: 23px;
               display: block !important;
               float: left !important;
               background: #817A77 url(images/button_background.png) repeat-x;
               color: #E3DBDB;
               font-size: 14px;
               border-right: 1px solid #504B4A;}

#menu ul li a#first {border-left: 1px solid #504B4A;}

#menu ul li a:hover {background: #5D5756 url(images/button_background.png) repeat-x;
                     background-position: 0 -23px;
                     color: #FFF;}



#wrapper {width: 100%;
          margin-top: 11px;
          padding: 0;} 

#left-column {
	width: 500px;
	float: left;
	padding: 0;
	margin: 0;
	min-height: 356px;
}

p#intro {font-size: 24px;
         margin: 0;}

#learn-more {width: 100%;
             text-align: right;
             margin-bottom: 25px;}

#learn-more a img {display: block;
                   float: right;}

#right-column {
	width: 240px;
	padding: 0;
	float: right;
	margin: 0;
	border: yes;
	border-color: #333333;
	border-left-width: 1px;
}

.sidebar-header {font-size: 20px;
                 font-weight: normal;
                 width: 240px;
                 height: 37px;
                 line-height: 37px;
                 text-indent: 34px;
                 color: #E3DBDB;
                 background: #544F4E url(images/sidebar_header.png) no-repeat;}



.headline {margin: 0 0 5px;
           padding: 0;
           font-size: 12px;}

.date {color: #5A6F90;
       background-color: #F5F5F4;
       float: right;}

#footer-wrapper {
	width: 100%;
	background: #3C3C3C url(images/footer_background.png) repeat-x;
	color: #CCCCCC;
	bottom: 0;
	margin: 0;
	padding: 0;
}

#footer {
	width: 780px;
	margin: 0 auto;
	clear: both;
	padding: 0;
	text-align: right;
	position: relative;
	background-image: url(images/grau-footer.png);
	background-repeat: no-repeat;
}

#back-to-top {position: absolute;
              right: 2px;
              top: 4px;}

#back-to-top img {display: block;}

#footer-content {padding: 45px 0 5px;}

#footer p {
	margin: 0;
}

#footer a {
           color: #CCCCCC;
           text-decoration: none;}

#footer a:link {
                color: #CCCCCC;}

#footer a:visited {
}

#footer a:hover {
}

#footer-left {float: left;
              margin: 0;}

#footer-left img {display: block;
                  float: left !important;
                  margin: 0;}



#links {width: 100%;
        margin-bottom: 25px;}

#links ul {margin: 0;
           padding: 0;
           list-style-type: none;}

#links ul li {margin: 0 0 1px;}

#links ul li a {display: block;
                padding: 3px 0;
                width: 230px;
                border-bottom: 1px dotted #5D5756;
                text-decoration: none;}

#links a:hover {background-color: #E2E2E0;}

gruß mogmog

Maik · 8. Juli 2007

Hi,

zum einen fehlt dem Element #footer-wrapper noch position:absolute und zum anderen dem übergeordneten Element #wrapper bzw. #container die position:relative-Deklaration, damit die absolute Positionierung des Footers innerhalb eines dieser Elemente überhaupt greift.

mogmog · 8. Juli 2007

Ja das ist schon mal echt super das funktioniert beim firefox relativ gut nur das wenn jetzt der text zu lang ist scrollt sich der footewrapper mit nach oben

schau es dir einfach mal an hier.
Irgendwie ist das eine merkwürdige reaktion.

gruß ralf

Maik · 8. Juli 2007

Du musst den Footer innerhalb, und nicht außerhalb vom DIV #container einbetten / positionieren, dann wandert der Footer auch bei zunehmenden Inhalt nach unten und verharrt nicht in seiner Position, wenn die Seite gescrollt wird.

Im Umkehrschluß müssen dann die Breitenangaben für #container, #header und #wrapper getauscht werden, damit der Footer seine 100%-Breite beibehält - also:

Code:

#container {
        /*width: 800px;*/ /* auskommentiert = deaktiviert */
        /*margin: 0 auto;*/ /* auskommentiert = deaktiviert */
        text-align: left;
        padding-bottom:3em;
        position: relative;
}

#header {
        width: 800px;
        height: 152px;
        position: relative;
        margin: 0 auto;
        background-image: url(images/Karten.png);
        background-repeat: no-repeat;
}

#wrapper {
          width: 800px;
          margin: 11px auto 0 auto;
          padding: 0;

}

mogmog · 8. Juli 2007

ja das hhe ich gemacht nur habe ich jetzt das problem das es wieder wie forher ist ich habe bei einer zu grßen Auflösung einen weißen streifen unten.

und was ich dann auch nicht verstehe ist das jetzt mein menü rechtbündig ist.
hier

Irgendwie hab ich jetzt den fahden verloren.

gruß

Maik · 8. Juli 2007

Hierfür sind noch ein paar Ergänzungen und Umstellungen erforderlich:

Code:

html,body {
height: 100%;
}

#container {
        text-align: left;
        /*padding-bottom:3em;*/ /* auskommentiert = deaktiviert */
        position:relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
}

#menu {
       width: 800px;
       height: 23px;
       clear: both;
       margin: 0 auto;}

#wrapper {
          width: 800px;
          margin: 11px auto 0 auto;
          padding: 0;
          padding-bottom: 3em;
}

Das komplette Beispiel hänge ich hier als ZIP-Datei an.

mogmog · 8. Juli 2007

ja cool danke es funktioniert

supie 1000dank

gruß mogmog

✔ Footer setzt sich nicht richtig an das Ende der Seite

mogmog

Erfahrenes Mitglied

Maik

mogmog

Erfahrenes Mitglied

Maik

mogmog

Erfahrenes Mitglied

Maik

Anhänge

mogmog

Erfahrenes Mitglied

Neue Beiträge