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 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Alternative to divs with background-image set?

    Hey all,

    I'm trying to insert symbols on a webpage, sort of like how various card games do it. The problem is that I want to write letters/numbers on them as well.

    I've gotten the main code working with <div> tags, but the problem with using <div> tags is that like one would expect, it tends to force a break. Is there any other way I can do things?

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    div {
    display: inline;
    } should remove that effect. floats also work.

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your response.

    I was reading that it's not recommended to override this standard behavior of <div>s, and should instead use <span>s. However, it doesn't matter between inline <div>s and <span>s, because when I switch, it seems to not display anything at all, whether I have height/width explicitly set or not.

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Inline elements don't have a set height and width, they just fill to the content, so if you have nothing in the inline element it never gets large enough to display the background image.

    Just set float:left

    I'd suggest putting all your floated divs in a container div also set to float:left;

    Then if you have any content further down the page, you'll put it in a container with clear:left;

    This will ensure that the container of your floated elements maintain its place in the dom and allow you to properly adjust its margins.
    Last edited by Basscyst; 10-04-2012 at 11:56 PM.
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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