Hi:
I am wondering why my footer is showing up outside of my wrapper. View the page here: http://desimckinnon.com/test/
I thought that I had the html nesting done correctly, but it doesn’t seem to be working. I have a gradient overlay on the wrapper, so I need the footer to reside with in it.
I’m using absolute positioning on the figure section because I’m hoping to animate those to fade in slowly.
Any advice is welcome. I’m attaching an image of what I would like it to look like.
Thanks,
Desi
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="Melanie Lora">
<title>Melanie Lora</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="shortcut icon" href="images/japanesejobs_favicon.png" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<!--start wrapper-->
<div id="wrapper">
<aside>
<!--start logo-->
<a href="http://melanielora.com" id="logo"><img src="images/melanie-lora-logo.png" width="223" height="77" alt="logo"/></a>
<!--end logo-->
<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">press</a></li>
<li><a href="">photos</a></li>
<li><a href="">reel</a></li>
<li><a href="">resume</a></li>
<li><a href="">yoga</a></li>
<li><a href="">blog</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</aside>
<div id="content">
<section>
<figure>
<img src="images/floral.png" id="floral" alt="floral">
<img src="images/melanielora-homepage.png" id="hp-photo" alt="melanie-lora">
<img src="images/melanielora-homepage-2.png" id="hp-photo-2" alt="melanie-lora">
<img src="images/melanielora-homepage-3.png" id="hp-photo-3" alt="melanie-lora">
</figure>
<hgroup>
<h1>Melanie Lora</h1>
<p>Melanie is an actress, writer, yoga teacher and mother. Not in that order. Melanie has performed on stages all over Los Angeles and Southern California; her film and TV work has gotten her fan mail and Facebook friends from the far corners of the earth; and her blog has connected her with mothers and artists everywhere.</p>
<p>Since the birth of her daughter in 2011, Melanie’s #1 job has been Mother to Luciana; however, she was back at work commercially almost immediately and onstage 5 months after her daughter was born. Though she may not be treading the boards as often as she did pre-motherhood, Melanie claims to be using some of that time to write a mockumentary script, work on a web series, and get her voiceover work going. We’ll hold her to that. As for yoga teaching, she’s not currently teaching classes, but has retained her private clientele, and does have space if you’d like to <a href="mailto:melanielucy@me.com">contact her.</a></p>
<p>Glad you’re here.</p>
</hgroup>
</section>
</div>
<footer>
<div class="footer-links">
<a href="mailto:melanielucy@me.com" class="footer">email me</a>
<a href="" class="slash">/</a>
<a href="http://www.desimckinnon.com/" target="_blank" class="footer">site design + developed by desi mckinnon</a>
<a href="" class="slash">/</a>
<a href="http://www.melanielora.com" class="footer">©2012 melanie lora</a>
<a href="" class="slash">/</a>
<a href="https://twitter.com/MIssMelanieLora" target="_blank" class="footer">follow me</a>
</div>
<a href="https://twitter.com/MIssMelanieLora" target="_blank" class="twitter"><img src="images/twitter-icon.png"width="33" height="32" alt="twitter"></a>
</footer>
</div><!--end wrapper-->
</body>
/***************************************************
Reset
***************************************************/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
@font-face {
font-family: 'EngraversGothicFSBold';
src: url('../fonts/EngraversGothic-Bold-webfont.eot');
src: url('../fonts/EngraversGothic-Bold-webfont.eot?iefix') format('eot'),
url('../fonts/EngraversGothic-Bold-webfont.woff') format('woff'),
url('../fonts/EngraversGothic-Bold-webfont.ttf') format('truetype'),
url('../fonts/EngraversGothic-Bold-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'EngraversGothicFSRegular';
src: url('../fonts/EngraversGothic-Regular-webfont.eot');
src: url('../fonts/EngraversGothic-Regular-webfont.eot?iefix') format('eot'),
url('../fonts/EngraversGothic-Regular-webfont.woff') format('woff'),
url('../fonts/EngraversGothic-Regular-webfont.ttf') format('truetype'),
url('../fonts/EngraversGothic-Regular-webfont.svg#webfontysz32sPA') format('svg');
font-weight: normal;
font-style: normal;
}
ol, ul {
list-style: none;
text-transform: uppercase;
}
a img {
border: none
}
aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/***************************************************
Global styles
***************************************************/
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
html,body {
height: 100%;
width: 100%;
background-color: #fff;
background-image: url(../images/bg.png);
margin: 0px;
padding: 0px;
}
hgroup {
position: absolute;
margin-top: 485px;
width: 660px;
}
h1 {
text-align: center;
font-family: 'EngraversGothicFSRegular', sans-serif;
color: #f369af;
text-transform: uppercase;
letter-spacing:1px;
font-size: 25px;
}
p {
padding-top: 10px;
font-family: 'Droid Serif', Georgia, serif;
color: #68696b;
font-size: 12px;
line-height: 1.6em;
}
a {
text-decoration: none;
color: #68696b;
}
a:hover {
color: #f369af;
}
/***************************************************
Main containers
***************************************************/
#wrapper {
width: 1000px;
height: 100%;
margin: 0px auto;
background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #e8e7e4 100%);
background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #e8e7e4 100%);
background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #e8e7e4 100%);
background-image: -webkit-gradient(radial, left top, 0, left top, 1010, color-stop(0, #FFFFFF), color-stop(1, #e8e7e4));
background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #e8e7e4 100%);
background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #e8e7e4 100%);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.55);
}
aside {
width: 260px;
float: left;
padding: 40px 0 40px 40px;
}
#content {
width: 740px;
height: 100%;
float: left;
padding: 40px 40px 0 40px;
}
/***************************************************
MENU
***************************************************/
nav {
padding-top: 40px;
margin: 0px auto;}
nav ul li {
text-align: center;
border-top:1px dashed #68696b;
}
nav ul li:last-child {
border-bottom:1px dashed #68696b;
}
nav ul li a {
font-size: 19px;
font-family: 'EngraversGothicFSRegular', sans-serif;
color: #68696b;
font-weight: normal;
text-decoration: none;
letter-spacing:1px;
display: block;
padding: 15px 0 15px 0;
}
nav ul li a:hover {
background-image: url(../images/nav-bg.png);
color: #fff;
}
nav ul li a.current {
background-image: url(../images/nav-bg.png);
color: #fff;
}
/***************************************************
FOOTER
***************************************************/
footer {
width: 740px;
float: left;
padding: 40px 40px 40px 105px;
}
.footer, .slash {
font-family: 'EngraversGothicFSRegular', sans-serif;
font-size: 14px;
color: #68696b;
text-decoration: none;
}
.slash {
padding-right: 3px;
padding-left: 3px;
}
.footer:hover {
color: #f369af;
}
.twitter {
float: right;
}
.footer-links {
margin-top: 6px;
display: inline-block;
}
/***************************************************
SPECIFIC
***************************************************/
#floral {
z-index: 1;
position: absolute;
margin-left: 305px;
}
#hp-photo {
z-index: 2;
position: absolute;
margin-top: 149px;
}
#hp-photo-2 {
z-index: 4;
position: absolute;
margin-top: 35px;
margin-left: 210px;
}
#hp-photo-3 {
z-index: 5;
position: absolute;
margin-top: 198px;
margin-left: 395px;
}
