Border question in CSS (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

paul rayner -> Border question in CSS (11/7/2008 18:01:43)

Hi
is it possible to get a CSS border tom emulate the effect seen in this image?

Cheers

[image]local://upfiles/131/6B4A7AEA8E93409A8C853F945E8C4A0F.gif[/image]



TexasWebDevelopers -> RE: Border question in CSS (11/7/2008 18:53:57)

http://www.cssplay.co.uk/menu/tictactoe.html
Looks like 9 absolutely positioned 100px X 100px style p tags in an unordered list.
This is really fairly cool...



treetopsranch -> RE: Border question in CSS (11/7/2008 22:00:50)

Might be easier to just create a graphic.



paul rayner -> RE: Border question in CSS (11/8/2008 0:18:41)

I'd thought about using a graphic - I thought it might be too big, and that CSS might give a better file size.



Tailslide -> RE: Border question in CSS (11/8/2008 1:55:56)

Yes but it's not practical! The stuff Stu produces on that site is brilliant - but a fair bit of it isn't for practical day to day use.

I'd split the graphic into 3 - have the top bit as a background for something at the top of the div - like a heading.

The side lines would be the background for the div itself.

The bottom bit would be the background for something at the bottom of the div - if you've just got a load of paragraphs then give the last one a class and attach the background.



Tailslide -> RE: Border question in CSS (11/8/2008 2:23:05)

Here's a better way to do it:

TEST PAGE

In this case I stuck an inner div in there to hold the bottom image because it wouldn't actually work well on a paragraph. This method will expand with the content and works on IE6, IE7, FF and Opera (haven't checked any others).



paul rayner -> RE: Border question in CSS (11/8/2008 20:28:51)

Thanks Tailslide
that works very effectively



womble -> RE: Border question in CSS (11/9/2008 5:26:45)

quote:

ORIGINAL: Tailslide

Here's a better way to do it:

TEST PAGE


Ooooh! That's niiiice Tail! Wombley likey! [:)]

I guess by splitting the image down more (though not making it half as complicated as Stu's example), you could probably get it to work as a liquid layout. Hmmmm...I might have to have a play with that later...



Tailslide -> RE: Border question in CSS (11/9/2008 7:01:48)

Yes you could but you'd need more markup to attach the bits to.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625