mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 10:37 Benutzername: Passwort: Auto-Login

Thema: Footer Probleme vom 23.09.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Footer Probleme
Autor Nachricht
hondazp11
Threadersteller

Dabei seit: 23.09.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 23.09.2011 12:54
Titel

Footer Probleme

Antworten mit Zitat Zum Seitenanfang

hab schon einiges durchsucht, gelesen und ausprobiert, krieg das aber nicht hin. (bin auch anfänger :-/)
also hab hier eine seite, an deren inhalt ein footer gekoppelt werden soll.

der macht aber nicht das, was er soll. es entsteht ein scrollbalken, also verträgt sich wohl diese 100%height mit irgendwas nicht.
so sitzt der footer irgendwo drin, aber nicht am ende der seite.
Könnt ihr helfen<??

LG,frenzy

Code:
<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>...</title>


<style type="text/css">
body {
   background-color: #a4d6ea;
   background-repeat: repeat-x;
   margin: 0px;
   padding: 0px;
}

</style>
<link href="all.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
}
a:hover {
   text-decoration: none;
}
a:active {
   text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
   font-family: Verdana, Geneva, sans-serif;
}
body,td,th {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
   color: #06225C;
}
h1 {
   font-size: 14px;
}
h2 {
   font-size: 13px;
}
</style>

</head>
<body bgcolor="#A4D6EA" background="img/bg.gif" text="#333333" link="#FFFFFF" vlink="#0033FF" alink="#00CC66" topmargin="15">
<div id="wrapper">
  <div id="head">
      <div class="logorechts"> <img src="img/logo.gif" width="250" height="67" /></div>
      <div id="Navigation">
       <li class="navuntern"><a href="#"  target="_self">Link1</a></li>
       <li class="navuntern"><a href="#" target="_self">Link2</a></li>
       <li class="navuntern"><a href="#" target="_self">Link3</a></li>
       <li class="navuntern"><a href="#" target="_self">Link4</a></li> 
    </div>
      <div class="fotoleiste">inhalt hier
      </div>
  <div id="content">
  <div class="ueberschriftcontent">
    <h1>bla</h1>
  </div>
    <div class="fließ">
      <p>bla </p>
    </div>
    <div class="Kasten">
      <ul>
        <li><a href="#">• 1</a></li>
        <li><a href="#">• 2</a></li>
        <li><a href="#">• 3</a></li> 
        <li><a href="#">• 4</a></li>
        <li><a href="#">• 5</a></li>       
      </ul>
      </div>
    <div id="aktuell">
      <div class="aktuellueber">
        <h2>News</h2>
      </div>
      <div id="laufleiste">Content for  id "laufleiste" Goes Here      </div>
    </div>
  </div>
</div>
<div id="footer">
   <a href="#" target="_self">Links</a>
   <a href="#" target="_self">Kontakt</a>
   <a href="#"  target="_self">Impressum</a>
</div>
</body>
</html>

Code:
html,body {
   height: 100%;
}
#wrapper {
   background-color: #A4D6EA;
   background-image: url(img/bg.gif);
   background-repeat: repeat-x;
   width: 1024px;
   position: relative;
   height: auto;
   height: 100%;
   margin-top: 15;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}
#head {
   background-color: #FFF;
   height: auto;
   width: 1024px;
   left:200px;
   top:50px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   -khtml-border-radius-topleft: 10px;
   -khtml-border-radius-topright: 10px;
   -webkit-border-radius-topleft: 10px;
   -webkit-border-radius-topright: 10px;
   background-image: url(img/headbg.gif);
   background-repeat: repeat-x;
   display: block;
   border: 1px solid #91CDE7;
   margin-top: 18px;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: auto;
}
.logorechts {
   height: auto;
   padding-left: 754px;
   padding-top: 18px;
   padding-bottom: 18px;
}
li {
  list-style: none;
}
#Navigation {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #066;
   background-color: #FFF;
   display: block;
   height: 36px;
   width: 970px;
   margin-left: 28px;
}
.navuntern {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 13px;
   font-weight: normal;
   background-color: #FFF;
   float: left;
   text-align: center;
   /* [disabled]letter-spacing: 1pt; */
   padding: 0px;
   height: 36px;
   color: #FFF;
   text-decoration: none;
   margin-top: 0px;
   margin-right: 1px;
   margin-bottom: 0px;
   margin-left: 0px;
}
.navuntern2 {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 13px;
   font-weight: normal;
   background-color: #58AFDE;
   float: left;
   text-align: center;
   /* [disabled]letter-spacing: 1pt; */
   padding: 0px;
   height: 36px;
   color: #FFF;
   text-decoration: none;
   margin-top: 0px;
   margin-right: 1px;
   margin-bottom: 0px;
   margin-left: 0px;
   background-image: url(img/unternehmenaktiv.jpg);
   background-repeat: no-repeat;
   line-height: 30px;
   list-style-type: none;
   list-style-position: inside;
}
.navuntern a:hover {
   color: #FFF;
   height: 26px;
   width: 241px;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 13px;
   font-weight: normal;
   /* [disabled]letter-spacing: 1pt; */
   background-image: url(img/navunternbghover.jpg);
   background-repeat: no-repeat;
   display: block;
}
.navuntern a {
   color: #FFF;
   background-image: url(img/navunternbg.jpg);
   background-repeat: no-repeat;
   display: block;
   float: none;
   height: 26px;
   width: 241px;
   padding-top: 10px;
}
.fotoleiste {
   height: 253px;
   width: 967px;
   margin-left: 28px;
   display: block;
   background-color: #A8D7EB;
}
#content {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
   color: #06235F;
   background-color: #d6ecf6;
   padding-top: 25px;
   position: relative;
   height:auto !important;
   min-height: 100%;
   /* [disabled]height: 100%; */
   padding-bottom: 30px;
}
.ueberschriftcontent {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #D72025;
   font-variant: normal;
   font-style: italic;
   font-weight: lighter;
   margin-left: 60px;
   text-transform: uppercase;
   /* [disabled]margin-top: 50px; */
   line-height: 20px;
   margin-right: 60px;
}
.fließ {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 13px;
   color: #06225D;
   margin-left: 60px;
   float: left;
   width: 650px;
   line-height: 20px;
   display: inline;
   height: 130px;
   margin-right: 60px;
   /* [disabled]padding-top: 10px; */
   clear: right;
}
.Kasten {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #031844;
   background-color: #C1E3F0;
   -moz-border-radius: 10px;
   -khtml-border-radius:10px;
   -webkit-border-radius: 10px;
   display: block;
   margin-left: 740px;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-right: 20px;
   width: 180px;
   -webkit-box-shadow: inset 0 0 30px #78a8cb;
   -moz-box-shadow: inset 0 0 30px #78a8cb;
   box-shadow: inset 0 0 30px #78a8cb;
   background-image: url(img/klpfeil.gif);
   background-repeat: no-repeat;
   background-position: left 25px;
}
.Kasten ul li a {
   color: #06225E;
}
.Kasten ul li a:hover {
   color:#D72025;
}
#aktuell {
   font-family: Verdana, Geneva, sans-serif;
   background-color: #A4D6EA;
   display: block;
   height: 200px;
   width: 969px;
   margin-top: 20px;
   margin-right: 28px;
   margin-left: 28px;
   -moz-border-radius: 10px;
   -khtml-border-radius:10px;
   -webkit-border-radius: 10px;
}
.aktuellueber {
   font-family: Verdana, Geneva, sans-serif;
   text-transform: uppercase;
   color: #FFF;
   background-color: #2f9ccb;
   display: block;
   width: 241px;
   height: 34px;
   font-size: 10px;
   line-height: normal;
   -moz-border-radius-topleft: 10px;
   -khtml-border-radius-topleft:10px;
   -webkit-border-radius-topleft: 10px;
   -moz-border-radius-bottomright: 10px;
   -khtml-border-radius-bottomright:10px;
   -webkit-border-radius-bottomright: 10px;
   -webkit-box-shadow: inset 0 0 30px #1e70aa;
   -moz-box-shadow: inset 0 0 30px #1e70aa;
   box-shadow: inset 0 0 30px #1e70aa;
   font-style: oblique;
   font-weight: lighter;
   padding-top: 2px;
   text-align: center;
   text-indent: -10px;
}
#laufleiste {
   background-color: #3887C0;
   display: block;
   height: 130px;
   width: 969px;
   margin-top: 10px;
}
#footer {
   background-color: #06225D;
   display: block;
   height: 30px;
   position: absolute;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: auto;
   margin-left: auto;
   text-align: center;
   width: 100%;
   /* [disabled]padding-left: 300px; */
   bottom: 0 !important;
}
#footer a {
   color: #FFF;
   padding-right: 20px;
   padding-left: 20px;
   line-height: 20px;
   font-size: 10px;
}
#footer a:hover {
   color: #09F;
}

[/quote]
  View user's profile Private Nachricht senden
willshedo

Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
Verfasst Di 04.10.2011 12:13
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,

hier: http://www.cssstickyfooter.com/using-sticky-footer-code.html
ca in der Mitte steht der Css-Code für nen Sticky-Footer. Da solltest du auf deinen #wrapper und #footer achten.

Grüße,
Chris
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen footer-stick funkt aber nicht ganz / content macht probleme!
[css] - Footer Problem
Problem mit Footer
Festen Footer erzeugen
[CSS] Content Div überlagert Footer
[wordpress] footer hochgerutscht?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.