mogmog
Erfahrenes Mitglied
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:
ich weiß nicht vieleicht giebt es da probleme mit einem anderen befehl udn deswegen hier mal den ganze css code:
gruß mogmog
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