WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to add link to image in header (19 posts)

  1. tonedru
    Member
    Posted 2 years ago #

    I have an image in my header but i can't figure out how to make that image link back to a different web page.
    In the header.php i added the image then put this coding:

    <a href="http://www.elkforge.com"><img src="http://events-sugarhouse.com/website/wp-content/uploads/2011/09/Button-back-to-Elk-Forge.jpg" style="float:left;" />

    The image shows up just fine, but the link doesn't work.

    any help??

    Thanks!
    ToneDru

    [Please post code snippets between backticks or use the code button.]

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    You're missing a closing </a> at the end of that code snippet. I would also strongly recommend that you add an alt text attribute to the link indicating where it is linking to.

  3. tonedru
    Member
    Posted 2 years ago #

    So it should look like this?
    <a href="http://www.elkforge.com"><img src="http://events-sugarhouse.com/website/wp-content/uploads/2011/09/Button-back-to-Elk-Forge.jpg" style="float:left;" /></a>

    [Please post code snippets between backticks or use the code button.]

    because that doesn't seem to work :(

    You can check it out at events-sugarhouse.com/website

    Also how do I add an alt text attribute?

    Thanks!!!

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    Yes it does. The central logo is a link.

  5. tonedru
    Member
    Posted 2 years ago #

    It's the image on the left that I'm trying to be a link. The one in the center already did that as part of the theme....

  6. esmi
    Forum Moderator
    Posted 2 years ago #

    There's no image or text in that left hand link.

  7. tonedru
    Member
    Posted 2 years ago #

    I'm not sure I understand what you mean by that.

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    The link is empty. There's no image markup or anything.

  9. tonedru
    Member
    Posted 2 years ago #

    I don't quite get what you're referring to... i think you're talking a little over my head there... The image in the header that says "back to elkforge.com" I want to be a link. but when i edit the header.php file it doesn't seem to work.

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    Can you please post a link to the site in question?

  11. tonedru
    Member
    Posted 2 years ago #

  12. esmi
    Forum Moderator
    Posted 2 years ago #

    Your header div is overlaying the image link. Try placing a header image link inside the header div.

  13. tonedru
    Member
    Posted 2 years ago #

    I think you lost me again, but here's the coding around the image that I'm trying to work with, hope it will help:

    [Code moderated as per the Forum Rules. Please use the pastebin]

  14. tonedru
    Member
    Posted 2 years ago #

    that didn't post properly, maybe this will work?

    [Code moderated as per the Forum Rules. Please use the pastebin]

  15. esmi
    Forum Moderator
    Posted 2 years ago #

    You need to move your image link into the header div in header.php and then adjust your CSS to suit.

  16. tonedru
    Member
    Posted 2 years ago #

    Do you mean to move the image link here?:

    <div id="container">
    		<div id="header" class="clearfix">
    <a href="http://www.elkforge.com" title="Elk Forge Bed and Breakfast"><img src="http://events-sugarhouse.com/website/wp-content/uploads/2011/09/Button-back-to-Elk-Forge.jpg" style="float:left;" /></a>
    			<a href="<?php bloginfo('url'); ?>">
    				<?php $logo = (get_option('chameleon_logo') <> '') ? get_option('chameleon_logo') : get_bloginfo('template_directory').'/images/logo.png'; ?>
    				<img src="<?php echo $logo; ?>" alt="Chameleon Logo" id="logo"/>

    And I'm not sure how to adjust the css accordingly... here's the code for the header in css, i think:

    #header { position: relative; padding:30px 35px 3px; }
    		#logo {position: relative;left: 80px;}
    		p#slogan { float: left; font-size: 13.5px; color: #66929c; text-transform: uppercase; padding-top: 27px; margin-left: 0px; }
    		ul#top-menu { float: right; padding-top: 30px; }
  17. esmi
    Forum Moderator
    Posted 2 years ago #

    Do you mean to move the image link here?

    Yes. Now it's in the right part of the page markup. As for the CSS, you'll need to start looking at floating one (or both) of the two images that you will now have in the header.

  18. tonedru
    Member
    Posted 2 years ago #

    i think i got it!
    Can you check it out and see if it looks ok on your end?

    Thank you so much,
    Sorry for being such a pest and not understanding this stuff :(

  19. esmi
    Forum Moderator
    Posted 2 years ago #

    Yep - seems to be working now. Well done! :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.