Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Need some help with linking a bg img

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello pbneal,
    Presented from the markup, instead of as a background image, you can easily make it a link.

    Something like this -
    Code:
        <!-- 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 -
    Code:
    #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
    Code:
    #logo{
    	position:relative;
    	margin-left:25px;
    	padding-top:15px;
    	overflow:hidden;
    
    	
    }
    That will not work unless you have an element named logo.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    pbneal (11-23-2011)

  • #3
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •