SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question multi layered div border?

    hi there,

    I've got something like this:

    Code:
    #main	{	
    	margin: auto;
    	border-top: 5px solid #69C;
    	border-left: 10px solid #69C;
    	border-right: 2px solid #69C;
    	border-color: #69C;
    	background: #fff;
    	margin-bottom: 0px
    	}
    Instead of having the 'border-left' 10px blue I would like to sub-divide it into 2 or 3 'stripes', going from dark to light blue

    I know that the following, although logic to me, does not work:

    Code:
    #main   {
            ...
            border-left: 6px, 2px, 2px
            ...
            }
    I hope you see what I mean, and is there an easy way to do this, or will I have to put more <div>s in?
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    So are you asking for one border line that has a basic multicoloured affect, i.e. going from dark blue to light blue gradient, or three different lines that run parallel to one another.

    Considering the one line method, I don't believe it's going to be possible with CSS alone unless you use something like z-index, obviously you could always cheat by using three border-left values at different points so you'd have three div's instead of one.

    Really it's been awhile since I've read the CSS Technical Recommendations so Im a little rusty...

    Alas there is the stretching an image method.

  3. #3
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    X nearly hit the nail on the head, use a background image! its cleaner, easyer and will be less likely to break between the browsers.

  4. #4
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by xhtmlcoder
    one border line that has a basic multicoloured affect, i.e. going from dark blue to light blue gradient
    that's it...

    i've played a little around now, and finally i will nest one <div1> inside another <div2>, where <div2> has got the simple function of a frame...

    cheers for the replies
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fwiw, once more complete support for the full CSS2 spec is uniformally built into browsers, the outline attribute will go some way to addressing this.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the clients are IE5+ only, you could try the Gradient Filter

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by jofa
    If the clients are IE5+ only, you could try the Gradient Filter
    ...*and* PC only.

    (Just so you know)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers guys, i'll have a look into them gradient filters.
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  9. #9
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Bill Posters
    ...*and* PC only.
    (Just so you know)
    Sorry, IE5+ should have been IE5.5+, and since the highest version for Mac is 5.2.2, it's implicitly PC only, or more correct Win only


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
  •