SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    NJ
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I build an expandable nav button like this using CSS?

    I'm trying to build an expandable navigation button using CSS. Since I don't always know the length of the text in button, I'd like it to be able to expand to as necessary.

    I'd like to have something like this:



    each color is a different image (a right side, a left side and a background that could be repeated to fill the width).

    Can I do this using CSS? Can I declare a repeating background image and a left and right border image? The borders would not be repeatable (I couldn't slice and repeat them down the side...they need to be a fixed height).

    Thanks for any help. I have a basic understanding of CSS layout but this is a bit over my head.

    Thanks,

    Chris

  2. #2
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure this is what you are looking for. It's called Sliding Doors of CSS. I hope this helps. If not, let me know.

  3. #3
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    NJ
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've read through those two and they are kind of what I'm after, but not exactly.

    Is it possible to declare a border for an element from a url? Like:

    Code:
    border-top: url("border-top.gif") no-repeat left top;
    Thanks,

    Chris

  5. #5
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, but you can make an image that is say 1px in height and 5px in width (the height and width can be changed to whatever you want), and then tile it horizontally on the top like this:

    Code:
    #whatever {
              background: url("bgimage.gif") repeat-x top left;
    }


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
  •