So I'm trying to add a badge to
the top right corner of a site I'm doing some work on. z-index works to float
the object above
the page content but each time i try to use position relative
the background image disappears only position absolute shows
the image. I don't really want to use absolute as
the image needs to be positioned on
the right hand side of
the sites menu bar not
the right hand side of
the viewport.
Any thoughts or advice appreciated
<div class="badge-box">
<a href="http://www.google.com" class="badge">Book Now!</a>
</div>
<div id="header">
<a href="index.php"><img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" /></a>
</div>
<div id="main-menu">
<div>
<a href="/">Home</a>
<a href="/cottages.php">Our Cottages</a>
<a href="/gwynfryn.php">Bed & Breakfast</a>
<a href="/rates.php">Price Guide</a>
<a href="/llanbedr.php">Location & Local Attractions</a>
<a href="/news.php">News & Special Offers</a>
<a href="/contact.php">Contact Us</a>
</div>
</div>
.badge-box {
width: 1030px;
margin-left: auto;
margin-right: auto;
border: 0px solid red;
}
.badge {
background: url(../images/badge.png) 0px 0px no-repeat;
width: 148px;
height: 148px;
text-indent: -10000px;
position: relative;
z-index: 999;
}
#header {
width: 960px;
height: 40px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding: 20px 0px 0px 20px;
background: #58564f url(../images/header-top-background.png);
}
#main-menu {
width: 980px;
margin-left: auto;
margin-right: auto;
height: 35px;
/*background: red;*/
background: #58564f url(../images/header-bottom-background.png);
font-family: Georgia, "Times New Roman", Times, serif;
}
#main-menu div {
width: 776px;
height: 35px;
margin-left: auto;
margin-right: auto;
background: blue;
}
#main-menu div a {
display: block;
float: left;
padding: 5px 10px 0px 10px;
height: 30px;
color: #FFFFFF;
font-size: 1.2em;
text-align: center;
background: green;
}
#main-menu div a:hover {
background-color: #333333;
}
