WordPress.org

Ready to get started?Download WordPress

Forums

Image link not working? (14 posts)

  1. Justinvanheel
    Member
    Posted 4 years ago #

    My image link is not working

    This is my html

    <div id="topright">
    <ul>
    <a href="#"><img src="images/kc.png" width="208" height="80"</a></a>
    
    </ul>
    </div>

    And this is my CSS

    #header #topright {
      text-align: right;
      float: right;
      margin-top:6px;
      margin-right:-15px;
      background-image:url(images/kc.png);
      background-repeat:no-repeat;
      width:208px;
      height:80px;
    }
  2. Yoru HTML is bad.

    Change this:
    <a href="#"><img src="images/kc.png" width="208" height="80"</a></a>

    To this:
    <a href="#"><img src="images/kc.png" width="208" height="80" /></a>

  3. Justinvanheel
    Member
    Posted 4 years ago #

    Already did it as I saw the typo. Ain't working either :(

  4. Where do you have <a name="#"> defined?

    And can you toss a link up to the page?

  5. Justinvanheel
    Member
    Posted 4 years ago #

    Aye this is the link to the image Click :)

    What do you mean defined?

    Even if I put a link into this it doesn't work either

    <a href="http://google.com"><img src="images/kc.png" width="208" height="80" /></a>

    Though - If i put an alternate like

    <a href="http://google.com"><img src="images/kc.png" width="208" height="80" alt="xxx"/></a>

    The xxx shows up and that is clickable which will redirect you to google.com for example

  6. Wait, you mean the image doesn't show up? That's different from 'the link doesn't work'!

    Try putting in the FULL path for the image: http://mydomain.com/images/kc.png

  7. Justinvanheel
    Member
    Posted 4 years ago #

    I never said the image is not showing up. Point is that as soon as I put an alternate the alternate text will show up OVER the image which is clickable.

  8. Sorry, but clearly I'm missing something.

    Can you explain 'what' isn't working? This:

    My image link is not working

    Implies that the link URL is bad.

    But this:

    as soon as I put an alternate the alternate text will show up OVER the image which is clickable.

    Implies that the IMAGE is not showing up at all. Which given your original code, yeah, it wouldn't.

    What do you mean by 'My image link is not working?'

    Does the image show up?
    Can you click on the image?
    Can you share the link of the webpage where all this is happening? Sometimes seeing things in context helps :)

  9. Justinvanheel
    Member
    Posted 4 years ago #

    Aye but my website ain't running online my dear friend. Im still being busy in localhost. In my CSS I've got a background image right? :).

    I cannot click on the image. You know what I mean?

    So to make clear

    Does the image show up?
    Can you click on the image?
    Can you share the link of the webpage where all this is happening? Sometimes seeing things in context helps :)

    1. Yes
    - I know it shows up as a background image defined in the CSS.
    - I also know it doesn't show up as coded in the HTML
    2. No
    3. Can't as im still on localhost.

  10. Well. Yeah. You can't click on a background image :) You have to trick it with the text.

    Add this to your css

    #header #topright {
      text-align: right;
      float: right;
      margin-top:6px;
      margin-right:-15px;
      background-image:url(images/kc.png);
      background-repeat:no-repeat;
      width:208px;
      height:80px;
    }
    
    #header #topright span {
            display:none;
    }

    Then try this for your html: <a href="#"><span>Logo</span></a>

    You may need to add display:block; and set position to absolute to make it work.

    For example, I use this to put a logo in my top-left corner:

    #logo {
            display:block;
            width:200px;
            height:155px;
            position:absolute;
            top: 0px;
            left: 5px;
            background: transparent url('/image/logo.png') no-repeat top left;
    }
    #logo span {
            display:none;
    }

    And my HTML is <div id="logo"><span>Logo - My Site</span></div>

    Mind, mine isn't a link, but in theory putting the a href around it should work.

  11. Justinvanheel
    Member
    Posted 4 years ago #

    Alright now this is what I did

    html:

    <li>
    <div id="twitter">
    <a href="http://twitter.com"><span><img src="images/tweet.png" /></span></a>
    </div>
    </li>

    CSS

    #header #topright {
      text-align: right;
      float: right;
      margin-top:6px;
      margin-right:-15px;
      background-image:url(images/kc.png);
      background-repeat:no-repeat;
      width:208px;
      height:80px;
    }
    
    #header #topright span {
            display:block;
    		position:absolute;
    }

    Neither this is working when I use my HTML

    <li>
    <div id="twitter">
    <a href="http://twitter.com"><span>my site</span></a>
    </div>
    </li>

    Or when i leave "my site" empty
    Still ain't working man :( Am I just dumb? :p

  12. 1) Is 'twitter' defined in your CSS anywhere?
    2) Is the list inside your Header?

    You may need to define li.header or something similar.

    Can you perhaps paste your whole header section?

  13. Justinvanheel
    Member
    Posted 4 years ago #

    Ok this is my header.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>"  />
    <title><?php if (is_home () ) { bloginfo('name'); echo " - "; bloginfo('description');  } elseif (is_category() ) {single_cat_title(); echo " - "; bloginfo('name'); } elseif (is_single() || is_page() ) {single_post_title(); echo " - "; bloginfo('name'); } elseif (is_search() ) {bloginfo('name'); echo " search results: "; echo wp_specialchars($s); } else { wp_title('',true); }?></title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <meta name="robots" content="follow, all" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    <?php wp_head(); ?>
    
    <!-- this product is released under General Public License. Please see the attached file for details. You can also find details about the license at http://www.opensource.org/licenses/gpl-license.php -->
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    	if (!document.getElementsByTagName) return false;
    	var sfEls = document.getElementById("nav").getElementsByTagName("li");
    
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]>
    
    </script>
    <script type="text/javascript">
    stuHover = function() {
    	var cssRule;
    	var newSelector;
    	for (var i = 0; i < document.styleSheets.length; i++)
    		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
    			{
    			cssRule = document.styleSheets[i].rules[x];
    			if (cssRule.selectorText.indexOf("LI:hover") != -1)
    			{
    				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
    				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
    			}
    		}
    	var getElm = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<getElm.length; i++) {
    		getElm[i].onmouseover=function() {
    			this.className+=" iehover";
    		}
    		getElm[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", stuHover);
    </script>
    
    <!--[if lt IE 8]>
    <link href="<?php bloginfo('template_url'); ?>/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    
    <!--[if lt IE 7]>
    <link href="<?php bloginfo('template_url'); ?>/ie6.css" rel="stylesheet" type="text/css" />
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
    <![endif]-->
    
    </head>
    
    <body>
    <div id="wrapper">
    
    <div id="header">
    
    <div id="topright">
    <ul>
    <a href="http://google.com"><span><img src="images/kc.png" width="208" height="80" /></span</a>
    </ul>
    </div>
    </div> <!-- Closes header -->

    And then here you go with my Topright div in the CSS

    #header #topright {
      text-align: right;
      float: right;
      margin-top:6px;
      margin-right:-15px;
      background-image:url(images/kc.png);
      background-repeat:no-repeat;
      width:208px;
      height:80px;
    }
    
    #header #topright span {
            display:none;
    		position:absolute;
    }

    And sorry I posted the wrong link :P Hehe

  14. <div id="header">
    
    <div id="topright">
    <ul>
    <a href="http://google.com"><span><img src="images/kc.png" width="208" height="80" /></span</a>
    </ul>
    </div>
    </div> <!-- Closes header -->

    That's the relevant part, FWIW.

    I'm a little stumped. Part of it is, I think, you can't absolute position to the top right, since that corner changes (English being a left-> right language, that side moves).

    Maybe this?
    <div id="topright"><span><a href="http://google.com"><img src="images/kc.png" width="208" height="80" /></a></span></div>

Topic Closed

This topic has been closed to new replies.

About this Topic