SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)

    SPAN size and background image

    Finally getting off of my lazy butt and am going to attempt to do a very simple site tableless. Naturally I didn't get far before I ran into problems. I have a containing DIV id'd as "header". Within it is a span which is causing me problems. I'm trying to get a background image into the span (which works) but have that span be 390x90 instead of just the size of any text within it. If I type asdf with the SPAN I can see the bg image but it only is behind the text as the SPAN is not taking the size I have tried to dictate to it.

    Code:
    div#header span
    {
        background: url('images/bghead.jpg') repeat-x;
        height: 90px;
        width: 390px;
    }
    I hope that all made sense.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    A span is an inline element, so widths and heights are ignored. To remedy this, use "display: block;" in your CSS for the span (which will make it behave like a block element and use your dimensions set), or if you need block-level content go for a div instead.

  3. #3
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    I actually was swicthing to a DIV when I read this. Now I know it will work. The reason I used SPAN was because it is inline. I assumed it would "flow". This leads me to a new problem: how do I get two block elements to sit side-by-side (an image and a SPAN?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stymiee
    I actually was swicthing to a DIV when I read this. Now I know it will work. The reason I used SPAN was because it is inline. I assumed it would "flow". This leads me to a new problem: how do I get two block elements to sit side-by-side (an image and a SPAN?
    Floating or absolute positioning. Both of them have their benefits and drawbacks. Search the CSS forum for more info; there are a million and one threads on this topic

  5. #5
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Will do. Thanks.


Bookmarks

Posting Permissions

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