Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539

    Position text under background image


    I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

    My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

    Please help.

    Code:
    <style type="text/css">
    .toolbar_list ul { float: right; text-align: right; margin:10px;}
    .toolbar_list li{list-style: none;display: inline;}
    .toolbar_list a { float: none; width: 32px; height: 32px; }
    
    div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}
    
    .icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
    .icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
    .icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
    .icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
    </style>
    
    </head><body>
    
    <div class="toolbar_list">
     <ul>
      <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
      <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
      <li><a href="#" class="icon-32-new new" title="New">New</a></li>
     </ul>
     <div class="toolbarheader icon-48-module">Title</div>
    </div>
  2. #2
  3. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    838
    Hi, NotionCommotion

    Just to be clear, you want to do this for accessibility reasons, for when images or CSS is disabled, and for Web crawlers like Google, right?

    If that's the case, I made a small post about that the other day. If you want more details, just ask.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539
    Hello f_nietzsche,

    Actually, I want both the text and the images to always be present. For instance, I will have a garbage can image with the word "delete" underneath it.

    You think the <span> tag as you used in your post will help?

    Thank you
  6. #4
  7. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    838
    I will have a garbage can image with the word "delete" underneath it.
    What would be the point of that? If it's under the image it's presumably hidden. It's thus the same as what I described. The text will always be present, CSS will just define properties so the user does not see it.

    Do you mean to say you want corresponding text below an image, like this:

    ._____
    |****|
    |****|
    +--.--+
    Recycle

    For lack of ASCII skills, that's an image of a recycling bin, with the word "Recycle" below it. You want this?
    Last edited by f_nietzsche; September 26th, 2010 at 07:41 PM.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539
    That is actually an amazingly good looking recycling bin!

    And yes, that is exactly what I want.

    Furthermore, I may have several of these images with words below them in a row. If you couldn't tell, that is a disk drive symbolizing "save".

    ._____ ____
    |****| |.....|
    |****| |.D..|
    +--.--+ |___|
    Recycle Save

    Thank you
    Last edited by NotionCommotion; September 27th, 2010 at 08:27 AM.
  10. #6
  11. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    838
    It's really as simple as positioning the background properly, and making sure the anchor tag's dimensions are set explicitly to be a bit taller than the actual image. That, or you can just embed an image tag inside the anchor tag and clear it so the text falls below it. Just hack for a bit; you're bound to find a solution.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539
    It's really as simple as positioning the background properly, and making sure the anchor tag's dimensions are set explicitly to be a bit taller than the actual image.
    I thought I had been doing that, but obviously not. I even changed it from 32px to 3200px just to make sure! Any other pointers?
    Code:
    .toolbar_list a { float: none; width: 32px; height: 32px; }
    Thanks
  14. #8
  15. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    838
    Any other pointers?
    Give me the URL if you can.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539
    Give me the URL if you can.
    http://www.villascape.net/testing/toolbar/test.html

    Thanks for your help, f_nietzsche. CSS and I often do not seem to get along.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    Float the A tags left and instead of setting a height set a padding-top.
  20. #11
  21. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    838
    To use rdoyle's method you will need to modify the image sprites so they have more vertical space between their states. The text will overlap the lower state.

    He's right, so go with it.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539
    Thank you,

    Your suggestion fixed 90%, but I should have told you my images are sliding door duel images. I will need to move up the document upon hover and always crop the bottom. Will your recommendations work under this scenario, or do I need to do something different?

    Thanks
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539
    Okay, I made some progress, but am still stuck.

    I am able to toggle my two state images using:
    .toolbar_list a:hover{background-position:0% -32px;}

    When not being hovered, however, the bottom shows. I randomly fixed it by adding a height of 0 to the anchor tag. I have no idea why this worked, and would appreciate any explanation.
    .toolbar_list a { float: left; width: 32px; height: 0px; padding-top: 32px;}

    I am still having problems with padding/margin between each image/text. I would have expected it should have been applied to the <li> element, however, the space just shows up way to the right of all the images. I guess this makes sense because I floated the images left, but do I add space between them?

    I've updated the following http://www.villascape.net/testing/toolbar/test.html
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    Setting a height makes the background only display as high as the total height, which in your case would be 0+32px of padding. By default elements that overflow the height (your text) will still display unless you define overflow: hidden or overflow:auto.

    The other solution you could have used would have been to edit your sprites so they weren't so close together, like f_nietzsche said above.

    Your margins aren't taking effect because your LI's are set to display inline. Left and right margins don't work if something is displayed inline. You could add a margin to the A's, or you could set the LI's to display: block and then float them left. You could then take the float left off of the A's, but you'd need to add display: block to those as well.
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Sep 2006
    Posts
    2,122
    Rep Power
    539
    Setting a height makes the background only display as high as the total height, which in your case would be 0+32px of padding. By default elements that overflow the height (your text) will still display unless you define overflow: hidden or overflow:auto.
    Thank you, that was very helpful.

    ..edit your sprites ...
    Took me a while to figure out what a "sprite" was. If anyone else is wondering, it is basically just little images used by computers.

    Left and right margins don't work if something is displayed inline.
    I recognize you know 100 times more than me about CSS, but you might want to verify this.

    I thank you both for your help!
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo