SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Sweden
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    span width, background-image

    Hi,

    I have a problem with the width of a span (or <a ...>, containing an image as background. The class that I use has got a background-image, and the width set to the same width as the image is. But the span's width is automaticly set to the text's width... how do I make this work the way I want? :-)

    Here's my code:
    Code:
    <a href="lyrics.html" class="topMenuElement">Lyrics</a>
    <span class="topMenuElement">Lyrics1</span>
    
    .topMenuElement{
    	height: 24px;
    	width: 92px;
    	background-image: url(../img/topmenu.gif);
    	text-align: center;
    }
    If I use a div, the width is correct, but I need to have many of these besides each other so I need a span. And if I use div and set display: inline, it collapses just like the span.

    Look at this page if you want to see what I meen for real :-)
    The test link

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use an unordered list and float each li left.

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does this help?

    Code:
    <a href="lyrics.html" class="topMenuElement">Lyrics</a>
    <span class="topMenuElement">Lyrics1</span>
    
    .topMenuElement{
    	height: 24px;
    	width: 92px;
    	background-image: url(../img/topmenu.gif);
    	text-align: center;
    	display:block;
    }
    spans are by default inline, div would work without the display:block;
    edit:
    after posting, I saw the bottom of your message.

    Try div with float:left;

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Sweden
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    Use an unordered list and float each li left.
    Thanks a lot man! It works like a charm :-)

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Sweden
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Arkkimaagi
    Does this help?

    spans are by default inline, div would work without the display:block;
    edit:
    after posting, I saw the bottom of your message.

    Try div with float:left;
    Thanks!
    It works with float: left with a div.
    Also works great with a span, with display: block... why one would do that :-)

    I think that I will use the unordered list version though, it looks better :-)


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
  •