nicht angemeldet
Footer...
0 
suit
0
Footer...
Ich versuche bereits seit 3 Stunden einen Footer ganz unten auf der Seite zu platzieren. Der Footer hat als Hintergrundbild ein über die gesamte Seite verlaufendes Gras. Prinzipell funktionierts... doch wenn die Seite zu kurz ist (d.h. kein scrollen nötig)ist das Bild direkt unter dem Content, anstatt ganz unten:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Volksschule</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- ###DOCUMENT_BODY### Start -->
<div id="wrapperAll">
<div id="superWrapper">
<!-- BEGINN HEADER -->
<div id="wrapperHeader">
<div id="header">
</div>
</div>
<!-- ENDE HEADER -->
<!-- BEGINN NAV -->
<div id="wrapperNav">
<div id="mainNav">
###MENU###
</div>
</div>
<!--- ENDE NAV -->
<div id="spacer"></div>
<!-- BEGINN CONTENT -->
<div id="wrapperContent">
<div id="content">
###CONTENT###
</div>
</div>
<!-- ENDE CONTENT -->
</div>
<!-- Footer -->
<div id="wrapperFooter">
<div id="grass">
</div>
</div>
</div>
<!-- ###DOCUMENT_BODY### End -->
</body>
</html>
CSS:
/***************/
/** Allgemein **/
/***************/
body{
margin: 0em;
padding: 0em;
background-color: #FFF;
background-image: url(../images/verlauf.png);
background-repeat: repeat-x;
font-family: arial;
}
h1, h2, h3, h4, h5, h6{
margin-top: 0em; padding-top: 1em;
}
/*************************/
/** Background - Wrapper **/
/*************************/
#superWrapper{
margin-right: 20%;
margin-left: 20%;
padding: 0;
box-shadow: 10px 10px 5px 5px #736f6e;
-moz-box-shadow: 10px 10px 5px 5px #736f6e;
-webkit-box-shadow: 10xp 10px 5px 5px #736f6e;
}
#wrapperAll{
z-index: 1;
margin: 2% 0 0% 0;
min-height: 100%;
}
/**************/
/*** Header ***/
/**************/
#wrapperHeader{
background-image: url(../images/header_verlauf.png);
background-repeat: repeat-x;
border-radius: 1em 1em 0em 0em;
-ms-border-radius: 1em 1em 0em 0em;
-o-border-radius: 1em 1em 0em 0em;
-moz-border-radius: 1em 1em 0em 0em;
-webkit-border-radius: 1em 1em 0em 0em;
}
#header{
background-image: url(../images/header_fertig.png);
background-repeat: no-repeat;
height: 8em;
margin-left: 2%;
margin-right: 2%;
}
/**************/
/**** Nav *****/
/**************/
#mainNav{
background: url(../images/nav.jpg) no-repeat;
min-height: 1.875em;
}
#wrapperNav ul {
margin: 0;
padding: 0em;
list-style: none;
line-height: normal;
min-width: 100%;
margin-left: 2%;
margin-right: 2%;
}
#wrapperNav li {
float: left;
}
#wrapperNav a {
display: block;
float: left;
min-height: 1.875em;
margin: 0em;
padding: 0em 2em 0em 1.5em;
line-height: 3em;
letter-spacing: 0.063em;
text-decoration: none;
font-variant: small-caps;
font-size: 80%;
color: #000;
border: none;
max-width: 100%;
}
#wrapperNav a:hover{
color: #A82D08;
}
.current_page_item{
pointer-events: none;
cursor: default;
}
/***************/
/*** Content ***/
/***************/
#wrapperContent{
background-color: #fff;
border-radius: 0em 0em 1em 0em;
-ms-border-radius: 0em 0em 1em 0em;
-o-border-radius: 0em 0em 1em 0em;
-moz-border-radius: 0em 0em 1em 0em;
-webkit-border-radius: 0em 0em 1em 0em;
max-width: 100%;
}
#content{
padding: 0em 1em 1.25em 1em;
margin: 0em;
max-width: 100%;
}
#content img{
width: auto !important; /*override the width below for IE*/
width: 100%;
max-width: 100%;
}
#content p{
max-width: 100%;
}
#spacer {
height: 0.313em;
margin 0em;
padding: 0em;
background-color: gray;
}
/*************************/
/*** Tabelle Schulfrei ***/
/*************************/
#tblSchulfrei{
border: 0.188em solid black;
margin-left: 0 auto;
margin-right: 0 auto;
width: 100%;
}
#tblSchulfrei td{
border-bottom: 0.063em solid black;
border-right: 0.063em solid black;
}
/****************/
/*** Leitbild ***/
/****************/
#ulLeitbild{
border: 0.063em dotted black;
border-radius: 15px 15px 15px 15px;
padding-top: 0.313em;
background-color: #DAA520;
}
#ulLeitbild li{
padding-bottom: 0.438em;
}
#olHausordnung ol li{
padding-bottom: 1.25em;
}
/**************/
/*** Footer ***/
/**************/
#wrapperFooter{
padding-top: 2.5em;
width: 100%;
bottom: 0;
}
#grass{
min-height: 2.5em;
background-image: url(../images/grass.png);
background-repeat: repeat-x;
}
/***************/
/**** MISC ****/
/**************/
.align-center { text-align: center;}
.align-right { text-align: right; }
.align-left {text-align: left;}
.align-justify {text-align: justify;}
Ich benutze dieses Template für Typo3. Ausserdem wenn ich das Browserfenster verschiebe, fällt die Navigation (ist mit Typoscript generiert) eine Zeile Runter. Wie kann ich dass bereinigen?
-
Ich benutze dieses Template für Typo3.
Spiele keine Rolle
Ausserdem wenn ich das Browserfenster verschiebe, fällt die Navigation (ist mit Typoscript generiert) eine Zeile Runter.
Mit TypoScript hat das ziemlich sicher nichts zu tun.
Dein Stickwort ist "Sticky Footer".
-
Moin!
Ich mag es in diesem Wust aus Code uebersehen haben. Aber hast Du irgendwo versucht den body auf Seitenhoehe (Viewporthoehe) anzupassen? Dann klappts auch mitm Nachba... Footer.
--
Signaturen sind blöd!-
Moin!
Ich mag es in diesem Wust aus Code uebersehen haben. Aber hast Du irgendwo versucht den body auf Seitenhoehe (Viewporthoehe) anzupassen? Dann klappts auch mitm Nachba... Footer.
Danke es hat wirklich an der Viewporthoehe gelgegen
thx!
-