SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    276
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rounded corner tab

    Hi, im trying to have a 'tab' on my page with the top corners rounded, now I have made tab image and set it in css, but how do I stretch the image to same width as the text.

    below is my css and what I want to acheive is my background image being stretched to the full width of the div.


    Code CSS:
    .StepOneTitle{
    float:left;
    background-image:url(../images/general/tabTop.gif);
    text-align:left;
    width:auto%;
    padding-left:5px;
    }

    Thanks
    Chris

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like you need "sliding doors:"

    Sliding Doors of CSS

    Sliding Doors of CSS, Part II

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    276
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but thats not what I need.
    Imagine I have a div thats background colour is blue and I set that div width to auto, so that no matter how much text I insert it always neatly expands taking the blue background colour with it.
    What I want to do is remove the blue background and use an image with rounded corners, the problem I have is that the image doesnt stretch to fill the div it repeats... how can i stop the image repeating and make it stretch instead

    Chris

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't scale background images (to my knowledge). You either need to use the sliding doors technique, something like spiffy corners, or maybe Flash.


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
  •