Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    216
    Thanks
    116
    Thanked 1 Time in 1 Post

    Trying to add a simple css overlay, having issues

    Hello,

    I am trying to build a simple "Back" button with a nice, compact div box in the top-left corner.

    However you can see the trouble I am having if you check it out here:


    http://tinyurl.com/9x2fpxu


    If you notice, there is a div in the css named "#bannerscollection_kenburns_generous #back {"

    Any help wuold be greatly appreciated!

    I would like the "back" button to look like this (quick mockup):


  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I think you should explain what the problem is exactly. How are you expecting it to behave?

    BTW data-* attributes are not valid unless you use the HTML5 DOCTYPE declaration:

    Code:
    <!DOCTYPE html>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    BlackReef (08-10-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,125
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ummm...yes I see it in the CSS. But it has no content.
    Code:
    #bannerscollection_kenburns_generous #back {
    }
    At a *GUESS* I would say you could do this:
    Code:
    <div id="back" onclick="location.href='index.html';">&nbsp;&nbsp;&lt;&lt; BACK</div>
    and then this
    Code:
    #bannerscollection_kenburns_generous #back 
    {
        position: absolute;
        top: 0px; left: 0px;
        background-color: black;
        font-family: arial;
        font-size: xx-large;
        font-weight: bold;
        color: white; 
        padding: 5px;
    }
    ** BUT **

    But an even easier way to do it would be to use that button IMAGE that you seem to have used there (cut it out of the larger image, if needed) and save it as, say "backButton.jpg".

    And then simply do:
    Code:
    <img  id="back" onclick="location.href='index.html';" src="backButton.jpg" alt="back button" />
    And then
    Code:
    #bannerscollection_kenburns_generous #back 
    {
        position: absolute;
        top: 0px; left: 0px;
    }
    Why work harder than that?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    BlackReef (08-10-2012)

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Old Pedant View Post
    And then simply do:
    Code:
    <img  id="back" onclick="location.href='index.html';" src="backButton.jpg" alt="back button" />
    There's no reason to use script when a simple link will suffice:

    Code:
    <a href="./"><img id="back" alt="Back" src="backButton.jpg"/></a>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    BlackReef (08-10-2012)

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    216
    Thanks
    116
    Thanked 1 Time in 1 Post
    Ok, take a look at it now:

    http://tinyurl.com/9x2fpxu

    Notice how the 'back' image is actually pushing the whole slideshow down?

    I would like the image to lay on top of the slideshow

    Thanks for your help,
    -Joe


    EDIT:

    I added this CSS, but the image was not appearing anywhere at all:

    Code:
    #bannerscollection_kenburns_generous #back {
        position: absolute;
        top: 0px; left: 0px;
    }
    So I put it back
    Last edited by BlackReef; 08-10-2012 at 06:38 PM.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by BlackReef View Post
    I would like the image to lay on top of the slideshow

    [...]

    I added this CSS, but the image was not appearing anywhere at all:

    Code:
    #bannerscollection_kenburns_generous #back {
        position: absolute;
        top: 0px; left: 0px;
    }
    Your code is close; add remove the #bannerscollection_kenburns_generous portion of the selector and addz-index: 1 to complete it.

    In case you want to know why:
    • #bannerscollection_kenburns_generous #back doesn't select anything because #back is not a child of #bannerscollection_kenburns_generous.
    • When sibling elements (at the same source code hierarchy level) have the same z-index, they're painted in source code order with the items coming later in the source code being painted last and therefore on top of preceding content and vice versa. Since your #back element precedes the #bannerscollection_kenburns_generous element (with all the content) and both of those elements have the same z-index (by default), the #back element is painted first and therefore behind the content. Adding z-index: 1 overrides that behavior.

      This, of course, means that you could alternatively move the #back element to a position after the div element and get the same result without touching the z-index property.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    BlackReef (08-13-2012)

  • #7
    Regular Coder
    Join Date
    Apr 2010
    Posts
    216
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Arbitrator View Post
    Your code is close; add remove the #bannerscollection_kenburns_generous portion of the selector and addz-index: 1 to complete it.

    In case you want to know why:
    • #bannerscollection_kenburns_generous #back doesn't select anything because #back is not a child of #bannerscollection_kenburns_generous.
    • When sibling elements (at the same source code hierarchy level) have the same z-index, they're painted in source code order with the items coming later in the source code being painted last and therefore on top of preceding content and vice versa. Since your #back element precedes the #bannerscollection_kenburns_generous element (with all the content) and both of those elements have the same z-index (by default), the #back element is painted first and therefore behind the content. Adding z-index: 1 overrides that behavior.

      This, of course, means that you could alternatively move the #back element to a position after the div element and get the same result without touching the z-index property.
    wow thanks. I added the z-index:1 to it, and that fixed it! Thank you very much for your help and the detailed explanation


  •  

    Posting Permissions

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