hondazp11
Threadersteller
Dabei seit: 23.09.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 23.09.2011 12:54
Titel Footer Probleme |
|
|
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]
|
|