Making Header Linkable

  • I’ve read how to make headers linkable, but the trouble is, my header is part of my background image.

    is there any way to make the ‘image/flowers.jpg’ shown below linkable??

    My site: Link

    My code inside the style.css:

    #header{
    background:url(images/flowers.jpg) left no-repeat #FFF;
    }

    #header .inside{
    padding: 7em 0px;
    }

    #header h2{
    border-right: 1px solid #808080;
    float: left;
    font-size: 2.25em;
    margin: 0px 0.5em 0px 0px;
    padding: 0px 0.5em 0.25em 0px;
    }

    #header h2 a{
    color: #000000;
    text-decoration: none;
    }

    #header p{
    line-height: 1em;
    margin: 0px;
    padding: 1em 0px;
    }

Viewing 5 replies - 1 through 5 (of 5 total)

  • The easiest way is to take the image out of the CSS and put it into an <img ... /> tag surrounded by <a> tags.

    Another option… and you should have found this because it is from here, from the forum:
    <div id="header" onclick="location.href='https://example.com/';" style="cursor: pointer;">
    This should be done in the header.php file.

    I guess I mispoke; moshu’s solution is the easiest. But if you have any blog visitors with non-javascript browsers (mainly blind folks), though, take the non-javascript route.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    A non-javascript way to do it is to put the link inside your header DIV, and then use CSS to give the link absolute position and size (same size as the header DIV).

    The general technique is like this:

    <div id="header">
<a href="https://example.com/"></a>
</div>
...
#header a { position:absolute;
	left:0px; top:0px; width:600px;	height:150px; }

    Or whatever works for your positioning.

    Also, I’d make that header image centered if I were you. Looks way better centered instead of shoved over to the left.

    Thread Starter dirtyscarab

    (@dirtyscarab)

    Brilliant. Thanks Guys.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Making Header Linkable’ is closed to new replies.