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;
}
