Grow your CSS skills. Land your dream job.

Clickable WordPress Header in 2.5

  • # May 3, 2008 at 6:56 pm

    Ok so I just went to WordPress 2.5 from 2.3.3 and i used to have it set up as my header being clickable to the home page. Now for some reason the same coding i used does not work. I do not understand could someone help me.

    Code:

    FiLM Grenade

    The Most Explosive Film News

    Now i added on to the original <div id="headerimg">

    any ideas? Thanks :D

    box
    # May 3, 2008 at 7:31 pm

    You don’t need the extra headerimg div – all you’ve done is place a div inside a div, thus bloating your code. Simply add your image as a background to the h1 tag and include all of your text as a single link. The add display:block to that link. i.e.

    Code:
    #header h1 a{
    display:block;
    }

    …then your link will be clickable. Make sure your h1 height and width match that of you image.

    # May 3, 2008 at 8:06 pm
    "box" wrote:
    You don’t need the extra headerimg div – all you’ve done is place a div inside a div, thus bloating your code. Simply add your image as a background to the h1 tag and include all of your text as a single link. The add display:block to that link. i.e.

    Code:
    #header h1 a{
    display:block;
    }

    …then your link will be clickable. Make sure your h1 height and width match that of you image.

    I’m sorry but i am a little confused could you show me. I can not figure out the placement of everything your talking about. I am a newb…sorry :D

    # May 5, 2008 at 2:55 am

    In your CSS file, you have this code:

    Code:
    #headerimg {
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }

    Replace it by:

    Code:
    #header h1 {
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }
    #header h1 a {
    display:block;
    }

    You can remove the <div id="headerimg"> from your html file.

    # May 23, 2008 at 3:35 am

    hey so i replaced

    Code:
    #headerimg {
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }

    with this one

    Code:
    #header h1 {
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }
    #header h1 a {
    display:block;
    }

    but it does not seem to do anything. My header image still is not clickable. The

    Code:

    FiLM Grenade

    The Most Explosive Film News

    I was talking about was in my header.php file not in my style.css file

    # May 23, 2008 at 11:02 am

    You can make entire DIV’s clickable with inline javascript/css if you need to:

    http://css-tricks.com/creating-clickable-divs/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".