I'm often seeing websites where a logo overlaps the navigation bar and sticks out either side. Here is how it's done. You'll need to add your own image in place of mine because flickr didn't seem to accept the transparency behind my silver sticker logo.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping logo</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
margin: 0 auto;
width:920px;
border:1px solid #CCCCCC;
}
h1
{
margin-left:120px;
color:#FFFFFF;
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
}
#nav a
{
width: 100px;
height:28px;
padding-top:8px;
padding-bottom:4px;
padding-left:30px;
padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav a:hover
{
background:#FF0000;
}
#nav img
{
float:right;
position:relative;
top:-30px;
right:20px;
}
#content
{
min-height:400px;
}
</style>
</head>
<body>
<br /><br />
<div id="container">
<h1>This is a sticky footer example</h1>
<div id="nav">
<img src="images/silversticker.png" alt="silver sticker" />
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<div id="content">
</div>
</div>
</body>
</html>
No comments:
Post a Comment