Logo and a link

Discussion in 'CSS' started by genius, Mar 1, 2010.

0
  1. #1
    Hello,

    I want that when you click the logo to take you on the homepage , here is my code for the logo in CSS :

    #logo {
    float: left;
    height: 120px;
    margin-left: 10px;
    background: url(images/logo.png) no-repeat left center;
    }

    How can I link it with the homepage throught CSS ?

    If someone has any ideas hope you can help me.

    Thank you
     
    genius, Mar 1, 2010 IP
  2. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Why through CSS, why not in the HTML?
     
    typingmums, Mar 1, 2010 IP
  3. MmmDesign

    MmmDesign Peon

    Messages:
    185
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You have to do it in the HTML.

    Code would be something like this:

    <a href="index.html">
    <img id="logo" border="0" src="path to image">
    </a>
     
    MmmDesign, Mar 1, 2010 IP
  4. genius

    genius Well-Known Member

    Messages:
    535
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    108
    #4
    All I have in HTML is <div id="logo"></div> , how can I link it up ?
     
    genius, Mar 1, 2010 IP
  5. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #5
    If you're not doing it for SEO reasons, why not put the image in the div rather than as a background image? Personally though I would do it like this (great for SEO)

    html:
    <h1><a href="#">Company Name</a></h1>

    CSS:

    h1 {
    width: 344px;
    padding-right: 0;
    font-size: 0;
    text-indent: -99999em;
    background-image: url(images/logo.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 150px;
    margin-left: -28px;

    obviously change the margins as you need to. This basically makes the H1 an image, the text is not visible to the viewer only the background image, and it will be clickable :)
     
    typingmums, Mar 1, 2010 IP