For this one, I have used the approach of having the header, contained in the footer. I have also created quite a lot of space around the navigation.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jo's Orange ring photographed by Cath</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
text-align:right;
margin-right:120px;
color:#FFFFFF;
font-size:3em;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align:left;
height:224px;
width:200px;
margin-left:80px;
font-size:1.2em;
position:relative;
border-radius:6px;
behavior: url(scripts/PIE.htc);
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:180px;
height:40px;
padding-top:16px;
padding-left:16px;
padding-right:4px;
color:#FFFFFF;
}
#nav a.subMenu:hover
{
background:#000000;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
</style>
</head>
<body>
<img id="background" src="http://farm4.static.flickr.com/3216/2329105730_265bae807a.jpg" alt="orangering4" />
<br /><br />
<div id="container">
<div id="nav">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
</div>
<div id="footer">
<h1>Orange Ring 4</h1>
</div>
</body>
</html>
No comments:
Post a Comment