...

View Full Version : Need some help with linking a bg img



pbneal
11-22-2011, 09:18 PM
Tried to do many of the ideas I found on the site, but to no avail. Could someone please take a look my code and help me out. I would like to make the PureCare logo in the top left corner linkable. THANKS!!

PureCare (http://pcnaturals.com/index.html)

Excavator
11-22-2011, 09:50 PM
Hello pbneal,
Presented from the markup, instead of as a background image, you can easily make it a link.

Something like this -

<!-- begin banner section -->
<div id="banner">

<!--Begin top navigation -->
<div id="navTop">
<a href="" id="pclogo"><img src="../images/logo.png"></a>
<ul class="navTop">
<li><a href="#">Login/Register</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Cart</a></li>
</ul>
<!-- Begin search form -->

The some styling to go with that...make these changes to your nav.css -
#navTop {
width:725px;
height:103px;
/*background:url(../images/logo.png) no-repeat 25px 15px;*/
text-decoration:none;
color:#fff;
position:relative;
font-family:Verdana, Geneva, sans-serif;
font-size:.9em;
}
#pclogo {
height: 185px;
width: 321px;
margin: 5px 0 0 5px;
display: block;
float: left;
}




-------
I notice your attempt to style that logo with

#logo{
position:relative;
margin-left:25px;
padding-top:15px;
overflow:hidden;


}
That will not work unless you have an element named logo.

pbneal
11-23-2011, 03:42 PM
Ex, you are a great help and resource!! Thanks so much for this. Had to tweak it a little, but the principle idea was spot on!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum