treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Clickable Wordpress Header in 2.5

  • 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.
    <div id=\"headerimg\">
    <h1><a href=\"http://www.filmgrenade.com/\">FiLM Grenade</a></h1>
    <div class=\"description\">The Most Explosive Film News</div>
    </div>


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

    any ideas? Thanks :D
  • 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.



    #header h1 a{
    display:block;
    }



    ...then your link will be clickable. Make sure your h1 height and width match that of you image.
  • "box" said:
    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.



    #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
  • In your CSS file, you have this code:
    #headerimg 	{ 
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }


    Replace it by:
    #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.
  • hey so i replaced
    #headerimg    {
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }


    with this one
        #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
    <div id=\"headerimg\">
    <h1><a href=\"http://www.filmgrenade.com/\">FiLM Grenade</a></h1>
    <div class=\"description\">The Most Explosive Film News</div>
    </div>
    I was talking about was in my header.php file not in my style.css file
  • You can make entire DIV's clickable with inline javascript/css if you need to:

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