WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make header Image clickable--Tiga Theme (9 posts)

  1. lollymom
    Member
    Posted 7 years ago #

    This question was answered in another post, but they just gave the code--didn't tell me where to put it. And I'm not html/php smart enough to figure it out! (I tried replying to the topic, but I think since it was marked as resolved, no one responded.)

    I have an image for my header and my title/description is in the image. My blog title and description are set to display:none in the css. This issue is addressed in one of the docs but it doesn't work for the Tiga theme.

    Someone answered this same question by telling them to do this:

    "Why could you not just link the header image? You know, remove it as a background in your CSS file, and just link to it straight up in your HTML?

    <a href="#"><img src="header_image_here.jpg"></a>

    My problem is, I don't know where to put that code. My site is lollymom.com

    And my header code is here: http://wordpress.pastebin.ca/249888

    Thank you!

  2. moshu
    Member
    Posted 7 years ago #

    but they just gave the code--didn't tell me where to put it.

    Actually, they did.
    In the example there was the div clas="header" or the <div id="header"...
    and you also have a
    <div class="header">
    ...stuffff here...
    </div>

    portion in your code paasted to the address above.

    Both solutions given in that "other thread" where you asked the same thing, refer to the header div.
    1. You can add the onclick... stuff as described there to the div class="header" onlcick... >
    or
    2. remove the image from the stylesheet as bg and add it in INSIDE the header div as a linked image.

  3. lollymom
    Member
    Posted 7 years ago #

    Okay, sorry I didn't see that before. Thank you! Now my header is clickable, but my site is broken! I didn't touch anything else. I can view source in Firefox and it points out where the warnings are, but I don't understand what I'm supposed to do. It's probably really simple!

    I actually figured out how to fix it so it looks right in Firefox, but it would still be messed up in IE, so I don't know if my "fix" was correct, or if Firefox just overlooked it. Anyway, I noticed that <div class="page"> wasn't closed, at least as far as I could see, so I put another </div> after the one that closes <div class="header">

    So that makes everything okay in Firefox, but like I said, IE still looked funky. So I took that out and I'm coming to this wonderful source of knowledge and wisdom for advice before I really screw things up.

  4. moshu
    Member
    Posted 7 years ago #

    Well, normally, that "page div" should be closed somewhere in the footer.php...
    See this to get an idea how the divs open and close in different files.

  5. lollymom
    Member
    Posted 7 years ago #

    Oh, that's a nice diagram, thank you. I checked my footer file and there is a closing /div for the page. So what is the problem? And why did putting an extra one in there fix it, at least in Firefox? From what the Tidy thing tells me (in View Source), it looks like there's something wrong with the part that says <img src> It says element not empty or not closed. What does that mean?

  6. moshu
    Member
    Posted 7 years ago #

    in XHTML tags like the <img whatever> should be "closed" like:
    <img src..... last thing />
    <br />
    etc.

  7. lollymom
    Member
    Posted 7 years ago #

    Okay, so I need to have a <br /> somewhere after my img src thing... but where exactly? I've tried putting it before the /a and before the /h1 and neither fixed my problem. Here's what I have:

    <div class="page">
    <div class="header">
    <h1><a href="http://lollymom.com/"><img src="images/LollyBannerSuperShortJPG.jpg"></a></h1>
    <h2 class="blog-description"><?php bloginfo('description'); ?></h2>
    <div class="header" onclick="location.href='http://www.lollymom.com';" style="cursor: pointer;">
    </div>

    I'm tempted to just put that extra /div at the end because that at least fixes it in Firefox. But it's still all wonky in IE, and who knows what it looks like in other browsers!

  8. moshu
    Member
    Posted 7 years ago #

    This:
    <img src="images/LollyBannerSuperShortJPG.jpg">
    should look like:
    <img src="images/LollyBannerSuperShortJPG.jpg" />

    (sorry, the br was just another example!)

    On the other hand: you don't need to apply BOTH solutions outlined in the other thread.
    If you have the "onlick..." you could keep the picture as background image.
    If you have it directly hard coded in the headeras a link, you don't need the "onlick thing".

  9. lollymom
    Member
    Posted 7 years ago #

    Ohhhh! Thank you. It's fixed!

Topic Closed

This topic has been closed to new replies.

About this Topic