WordPress.org

Forums

image header (8 posts)

  1. Tek
    Member
    Posted 12 years ago #

    image header

  2. Tek
    Member
    Posted 12 years ago #

    UGH... sorry I didn't mean to do this... this was supposed to be a search... =( but now that I made a topic, let me tell you what I am looking for and maybe you can help?
    I am looking for how to in the CSS use an image for my header and NO TEXT . They will need to click on the image for it to bring you back *home*. I'm sure there is a way to supress it and I am just not thinking of it.
    Thanks! =)

  3. Anonymous
    Unregistered
    Posted 12 years ago #

    Read this:
    Header CSS Code

  4. Mark (podz)
    Support Maven
    Posted 12 years ago #

    Also take this out of your index.php;
    <?php bloginfo('name'); ?>
    It's at the top, just under the body tag

  5. Tek
    Member
    Posted 12 years ago #

    Damn... but if I take that out then the skins that USE the text will be screwed. =( Hmmm... Seems I just put myself in a hole here.

  6. Tek
    Member
    Posted 12 years ago #

    LMAO... thanks for all your help... I think I just figured out a way to *cheat* that looks fine in both IE and FF. I'm laughing because it looks okay in both but its funny what the two browers are doing with the font.

  7. Geof
    Member
    Posted 12 years ago #

    Tek: Don't know if you still need to work it out. I hacked it by indenting the text to some insance amount (20,000 or something), then setting the overflow to hidden. Then by setting the width and height of the h1 div and assigning it a backround image, it should be clickable. I think. If you want I can have another look at it for you and post the code. Just let me know =). I'm a bit of a CSS newbie, so I'm sure there's a better way though!
    http://www.geoffreytang.com/

  8. Geof
    Member
    Posted 12 years ago #

    Whoops sorry. Little mistake just looked at my code: here's what I did:
    #header
    {
    padding: 0px;
    margin: 0px;
    width: 850px;
    height: 150px;
    background: url(images/Your Image Here!);
    }
    h1 a
    {
    width: 850px;
    height: 150px;
    float: left;
    text-indent: -10000px;
    overflow: hidden;
    border:none;
    text-decoration: none
    }
    h1 a:hover
    {
    text-decoration: none (stops it from being underlined which causes some flickering)
    }
    This should overlay the h1 div on top of the header div. Assigning a background to the header div will make it a 'clickable' link (in reality, the h1 div is being clicked). Hope this makes sense. It's messy, but works in Moz and IE and Opera I believe without any problems.
    http://www.geoffreytang.com/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.