Beginner : Help me replace a background image logo with a clickable one

Question

I'm not really good with CSS and html when the layout is complicated. I can quick fix things, but I have no real knowledge.

I'm trying to adapt this demo : http://demo.marcofolio.net/bgimg_slideshow/ for my website.

Problem: the logo is a background image for a div and not a link.

I'm not good enough to see how i could change it without defacing the layout.

Could you help me either by providing the fix (if it doesn't take you more than 5 minutes) or by giving me hints or links so i could figure it out myself?

Edit : here's a jsfiddle with minimum code

And here are the files :

html :

<div id="header">
    <div id="headerimgs">
        <div id="headerimg1" class="headerimg"></div>
        <div id="headerimg2" class="headerimg"></div>
    </div>
    <div id="nav-outer">
        <div id="navigation">
            <div id="menu">
                <ul>
                    <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
                    <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
                    <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
                    <li><a href="http://jquery.com/">jQuery</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
                    <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Css :

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

#header { height:600px; }

.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }

#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/headerbg.png"); }

#navigation { height:100px; width:960px; margin:0 auto; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/logo.png"); background-position:top left; background-repeat:no-repeat; }

#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }

Do you have any example code? Try putting it in a fiddle: http://jsfiddle.net/ then people can help. — jezzipin, Jan 02 '13 at 16:57
Please see to this, I think it is what you are searching for: http://stackoverflow.com/questions/796087/make-a-div-into-a-link — Sampsa, Jan 02 '13 at 17:07
no, i don't want to make the div clickable, i want to replace the image in background of a div with a link and the image. I just don't know how to do it without breaking everything — Maxime ARNSTAMM, Jan 02 '13 at 17:10
@MaximeARNSTAMM : http://jsbin.com/oyusin/2/, You'll obviously have to change the background to remove the name from it :P — Pranav 웃, Jan 02 '13 at 17:15

Pranav 웃 · Answer 1 · 2013-01-02T17:22:35.363

I did some live edits on the link you provided. I think this is what you want to achieve.

Here is a Demo, based on your fiddle.

HTML

<div id="navigation">
  <h1 id="logo"><a href="/">My Website!</a><br />
    <span>loving jQuery and CSS</span>
  </h1>
...

CSS

#navigation {
    position: relative;
}

#logo {
    position: absolute;
    top: 0;
    left: 0;
}
#logo a {
    color: #fff;
    text-decoration: none;
    font-size: 32px;
}
#logo span {
    font-size:20px;
    color:#48bdee;
    margin-left:50px;
}

score 1 · Answer 2 · answered Jan 02 '13 at 17:11

Here is how I did it.

First, Remove the background image from your #navigation div.

Then add the following as a first child of the #navigation.

<a href="/" style="
    height: 80px; 
    width: 500px;  
    background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png');
    background-position: top left; 
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
" alt="Image Description"></a>

So your Navigation div should look like this:

<!-- Remove all background attributes from #navigation in the CSS -->
<div id="navigation">
            <!-- Below is the new line!, makes your logo clickable! -->
            <a id="logo" href="" style="height: 80px; width: 500px; background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png'); background-position: top left; background-repeat: no-repeat;display: inline-block; position: absolute;"></a>
            <!-- Everything else below stays the same!... -->
            <div id="search">
                <form>
                    <input type="text" id="searchtxt">
                    <input type="submit" value="search" id="searchbtn">
                </form>
            </div>
            <div id="menu">
                <ul>
                    <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
                    <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
                    <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
                    <li><a href="http://jquery.com/">jQuery</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
                    <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a>
                </li></ul>
            </div>
        </div>

Basically, you make a <a href> which has a background image (all a href's are clickable). When you assign a background image to a <a href>, you have to set the display:block for it to be rendered as a block level element. In this case, we position it absolutely to knock it out of the document flow and keep it from disturbing other elements.

There are better ways to do this, but it would probably require re-writing some of your code (Which is not that difficult, but does require an amateur skill level of HTML & CSS).

Hope this helps!

score 1 · Accepted Answer · answered Jan 02 '13 at 17:13

You should add

    <div id="logo">
        <a href="#">
            <img src="images/logo.png" alt="" />
        </a>
    </div>

to <div id="#navigation">, right before <div id="search">

Then:

1) you should float the logo to the left

    #logo{
         float: left;
    }

2) remove top: 85px; from #menu and add clear: both;

3) remove background-image: url("../images/logo.png"); from #navigation

This way, you have clickable image logo. :)

Explanation:

You float the logo to the left because #search is floated to right
You remove top: 85px; because that was compensation for empty space which is now filled with image, and add clear: both because it clears the floats and positions the menu back in place

score 0 · Answer 4 · answered Jan 02 '13 at 17:08

If you're up to using javascript too, you could do the following.

Set the style of the div to show up as a mouse pointer when hovering over it:

.Logo { cursor:pointer; }

Then using javascript, have a url open with the onclick event:

<div class="Logo" onclick="window.open('google.com')" />

Beginner : Help me replace a background image logo with a clickable one

4 Answers4