PDA

View Full Version : css border question


chriskq
02-14-2007, 10:47 AM
hey all,

just a query, say i wanted a 3px dotted bottom border but i want each 1px line to be a different color.

Is this possible?

davidj
02-14-2007, 11:16 AM
3px dotted bottom line

1 px all others but different colours. Yes ??

chriskq
02-14-2007, 12:11 PM
code me up pls

eg:
.navitem {
border-bottom: 3px solid #dedede;

wats next?
}

domedia
02-14-2007, 04:43 PM
You can't do it with one CSS rule, there's only a few border-style options, none of which includes 3 lines, dotted or not. 3 different colors are not even in CSS3 at this point.

You're probably looking at creating the 3 lines in Photoshop, you would only need it to be a couple of pixels wide if you want to repeat horizontally and use as a background image:

.navitem { background: url(image.gif) repeat-x bottom left;}

chriskq
02-14-2007, 10:55 PM
dj why did u get my hopes up !!

bAAhahaha...

its all good i have a way of getting around it...it just would have been nice to do i thought.

thanks for ur suggestion too dom - i like that idea.

Andromeda
03-17-2007, 09:07 PM
You can't do it with one CSS rule, there's only a few border-style options, none of which includes 3 lines, dotted or not. 3 different colors are not even in CSS3 at this point.

You're probably looking at creating the 3 lines in Photoshop, you would only need it to be a couple of pixels wide if you want to repeat horizontally and use as a background image:

.navitem { background: url(image.gif) repeat-x bottom left;}

is it possible to have:
.navitem { border-style: url(image.gif);} ??

d a v e
03-18-2007, 07:33 AM
nope just set it as a background image to the container

chriskq
03-22-2007, 05:35 AM
yep its done.
its in effect here:

http://redro.com.au/TEST/

Andromeda
03-22-2007, 08:28 AM
and is it possible to use the css values (i.e. repeat-x bottom left) in html rather than css?

domedia
03-22-2007, 01:53 PM
and is it possible to use the css values (i.e. repeat-x bottom left) in html rather than css?

You can do it inline in the HTML tag, although not looked upon as too good practice:

<div style="background: url(bg.gif) repeat-x center center #fff;">

davidj
03-22-2007, 05:30 PM
chriskq

what about a nice transition where you have the press room image

http://www.inovartis.com/

chriskq
03-23-2007, 12:23 AM
nice one Dj.

i was thinking of something like that. althou the client wasnt prepared to pay any extra for a flash banner - but i think ill do it anyways which would make them happy.

ill keep u posted