[HTML, CSS] Något att bita i grabbar
Ja, jag vill ha min footer i bottem av sidan oavsett mängd text i content. Någon som har ett bra förslag utan att gå ifrån mitt nuvarande upplägg? Lite kod när nedanför då
HTML
<!DOCTYPE html>
<html lang="se">
<head>
<title>*******</title>
<!-- <meta charset="utf8" /> -->
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie.css"/>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body id="index" class="home">
<header id="banner" class="body">
<figure class="header">
<img src="img/header.jpg" />
</figure>
<nav><ul>
<li class="active"><a href="#">.home</a></li>
<li><a href="#">.about</a></li>
<li><a href="#">.work</a></li>
<li><a href="#">.contact</a></li>
</ul></nav>
</header>
<section id="content" class="body">
<h2>.home</h2>
<p>
<hr align="left" height="1">
<aside>
<figure><img src="img/test.jpg" /></figure>
<span>.last project</span>
</aside>
Välkoma till **********<br />
</p>
</section>
<footer id="contentinfo" class="body">
<adress id="about">
<ul>
<li class="active"><a href="#">.home</a></li>
<li><a href="#">.about</a></li>
<li><a href="#">.work</a></li>
<li><a href="#">.contact</a></li>
</ul>
</adress>
</footer>
</body>
</html>
CSS filen
/*
INFO etc
*/
/* Imports */
@import url("reset.css");
/***** Global *****/
/* Body */
body {
background: #d7d7d7 url('../img/back.jpg');
background-position: center;
background-repeat: repeat-y;
color: #000305;
font-size: 87.5%;
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #fff;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
color: #000;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
/* Lists */
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 900px;}
img.right figure.right {float: right; margin: 0 0 0 0;}
img.left, figure.left {float: right; margin: 0 0 0 0;}
img.header, figure.header {margin: 0 0 0 0;}
/*
Header
*****************/
#banner {
margin: 0 auto 0 auto;
padding: 0;
background: #282c30;
}
/* Main Nav */
#banner nav {
background: #000305 url('../img/nav.jpg');
font-size: 1.5em;
height: 50px;
line-height: 45px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 50px;
margin: 0 1em 0 0;
text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
/* background: ; */
color: #333;
text-shadow: 1px 1px 1px #555;
}
/*
Body
*****************/
#content {
background: #fff url('../img/contentback.jpg');
background-repeat: no-repeat;
background-position: top;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
padding-bottom: 50px;
width: 860px;
}
#content aside {
background: #b31212;
float: right;
padding: 10px;
margin: 0 1em 0 5em;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#content aside figure img {display: block;}
#content aside span {text-align: center; margin-top: .5em; color: #fff; text-shadow: 1px 1px 1px #555}
#content hr {color: #b31212; width: 860px; margin-bottom: 10px; padding: 0; float: right;}
/*
About
*****************/
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;
height: 50px;
}
#about ul {list-style: none; margin: 0 auto; width: 800px;}
#about li {float: left; display: inline; margin: 0;}
#about li a:link, #about li a:visited {
color: #000;
display: inline-block;
height: 50px;
margin: 0 1em 0 0;
text-decoration: none;
}
#about li a:hover, #about li a:active,
#about li .active a:link, #about li .active a:visited {
color: #333;
text-shadow: 1px 1px 1px #555;
}
/*
Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}
