www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] added images to header, now most of page is clickable

  1. #1
    Join Date
    Jun 2014
    Posts
    6

    resolved [RESOLVED] added images to header, now most of page is clickable

    I entered the following:
    add_action ('genesis_header', 'social_header');
    function social_header() {
    echo '<div class="socialicons">

    <div id="googleplus">
    <a href="https://plus.google.com/" target="_blank"/a>
    <img src="http://image" width="50" height="50"/>
    </div>
    <div id="linked">
    <a href="http://www.linkedin.com/company/" target="_blank"/a>
    <img src="http://image" width="50" height="50"/>
    </div>
    <div id="youtube">
    <a href="http://www.youtube.com/channel/" target="_blank"/a>
    <img src="http://image" width="50" height="50"/>
    </div>
    <div id="twitter">
    <a href="https://twitter.com/" target="_blank"/a>
    <img src="http://image" width="50" height="50"/>
    </div>
    <div id="facebook">
    <a href="http://www.facebook.com/" target="_blank"/a>
    <img src="http://image" width="50" height="50"/>
    </div>

    </div>';
    }

    Everything works fine, all the images are clickable. But its seems like the last one, facebook in this case is clickable throughout the whole page, minus the footer and other half of the header. This is in genesis framework.

    Any ideas why?

  2. #2
    Join Date
    May 2014
    Posts
    900
    Would help if you knew HTML. Not joking, that code is gibberish.

    Between the DIV for nothing, improper anchor structure, and the TARGET attribute that has NO business used on any website written after 1997...

    Basically, change each of these:
    Code:
    <div id="googleplus">
     <a href="https://plus.google.com/" target="_blank"/a>
     <img src="http://image" width="50" height="50"/>
     </div>
    To look like this:

    Code:
    <a href="https://plus.google.com/" id="googleplus">
      <img src="http://image" width="50" height="50" alt="DESCRIBE THIS!" />
    </a>
    <a>CONTENT</a> -- not <a /a>CONTENT

    What you were doing none of those anchors are treated as being closed, so of course the rest of the document is clickable.

    IF you REALLY insist on those garbage DIV.

    Code:
    <div id="googleplus">
      <a href="https://plus.google.com/">
        <img src="http://image" width="50" height="50" alt="DESCRIBE THIS IMAGE!!!" />
      </a>
    </div>
    That's how you use anchor tags.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Jun 2014
    Posts
    6
    @deathshawdow

    Thanks for the help, no need to be rude...a forum is where people come to ask questions. If you don't like it...go.

    And what do you recommend using to open a new window then???

    And what is wrong with div. I am unsure of what else to use for my specific project, as I need multiple images to come together in a certain way. As they are irregular shapes. Since you are an absolute genius, please teach me oh wise one.

    Cheers

  4. #4
    Join Date
    May 2014
    Posts
    900
    Apologies if you thought that was being rude; was just being honest with you.

    In terms of new window's... DON'T! All it does is annoy users who don't want new windows. People want it in a new window they can ctrl-click or middle-click. There's a REASON "target" was deprecated as of HTML 4.01 Strict some sixteen years ago; it's usability trash... You don't shove new windows down the user's throat! They want a new window, let them do it -- don't force the choice on people.

    Which is why the folks who started using JS a decade or so ago to do it as "target is invalid now" COMPLETELY MISSED THE POINT!

    Of course, if you're vomiting up HTML 5, it's magically back in as they are bound and determined to drive web development back to the worst of 1997... just another strike against that idiotic halfwit nonsense and the people DUMB ENOUGH to see merit in it. See, that's being rude!

    Whole bunch of redundancies and things we've been told for over a decade were bad practice magically re-appear and new redundancies and accessibility trash thrown in, because instead of trying to tell us how to write good websites, the W3C has shrugged, thrown it's hands in the air, and said "Oh well, go ahead and crap out sites any old way." and just started documenting what's supported instead of what we should be doing -- yeah, such an improvement and what a great way to write a specification.

    Ok, I'll stop there before I start another 80 paragraph rant about what's wrong with 5.

    As to DIV, nothing wrong with them in and of themselves when they serve a purpose; like when you've expended what you can do with the existing tags... but if you already HAVE existing tags, style those instead. With CSS there's not a whole lot you can do to a DIV you can't do to a tag inside it -- like those anchors. Whatever you are doing to those DIV, do it to the anchor.

    Losing the DIV means less markup for faster page loads, smaller DOM for faster application of CSS and things like the various document.getElementsBytype functions, etc, etc...

    DIV and SPAN are great for grouping like elements or application of style once you've used up your semantic markup -- that is why they shouldn't be added to your HTML until AFTER you've written your semantic markup and only when you NEED them.

    I very much doubt you need them there... though admittedly that's a wild guess without seeing what you are doing for style. I mean you want block behavior, set the anchors to display:block; you want them floated, float them. You want them inline, set inline-block...

    You might even be better off hitting the image tags with display:block and leaving the anchors inline and out-of-flow -- all hinges on how you're fitting them together.

    Remember, using more CSS beats using more HTML every time so long as semantics isn't compromised, because CSS in an external stylesheet (where 99.99% of CSS belongs) can be cached.
    Last edited by deathshadow; 08-08-2014 at 06:58 PM.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Jun 2014
    Posts
    6
    @deathshadow

    I know my coding needs work in all languages (which is why I hire people for most projects, this is just one I am doing for myself) So yes, you were definitely being honest.

    I would like to apologize as well. I shouldnt have reacted that way. I tried to edit the post, but apparently I cant do that. It was extremely disrespectful of me. sorry.

    Thank you very much for putting the time in to answer the questions. I really appreciate it.

    It all makes sense, Ill put those into practice asap.

    Thanks again

  6. #6
    Join Date
    May 2014
    Posts
    900
    No worries, no matter what I say or how I say it people take it as being rude even when not intended as such. I'm just used to it. In fact I've lightened up on watering down what I think and to blazes with if it might "offend" someone BECAUSE even when put as nice as I can put it, people still take offense -- so if it's going to offend anyways, might as well just come right out and say it unfiltered.

    Basically, I'm used to that reaction no matter how I say things; probably why my reaction to "It's not what you said but how you said it" is a string of expletives expressing extreme doubt.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles