How to do this with CSS: see linked site

Dev Shed Forums Sponsor:

May 30th, 2003, 02:01 PM

stodge

Contributing User

Join Date: Jun 2000

Posts: 61

Time spent in forums: < 1 sec
Reputation Power: 13

How to do this with CSS: see linked site

Is it possible to do the light blue and white horizontal stripes with CSS, as can be seen on the left side of this site:

http://www.5by5software.com/default.asp

I appreciate it could be done with an image, but I was wondering if there was a CSS way of specifying this.

Many thanks

May 30th, 2003, 11:51 PM

magma

Contributing User

Join Date: Apr 2003

Location: Italy, EU

Posts: 517

Time spent in forums: 11 h 45 m 8 sec
Reputation Power: 11

You can do it using a code like the following one:

Code:

h3 {
	font-size:10pt;
	font-family:Verdana, Arial, sans-serif;
	font-weight: bold;
	color: white;
	background-color: #4880C0;
	line-height: 20px;
}

In this way you can later insert an H3 tag to have that effect. You can also set a MARGIN-RIGHT value to limit the width of the line.
If you don't want to modify the definition of a header (level 3 in this case), you can define a class (.TITLE) and then refer to it using the appropriate property in the desired tag.
i.e. <P CLASS="TITLE">

Bye, Magma

June 2nd, 2003, 11:28 AM

icy_polecat

Senior Polecat

Join Date: Jun 2003

Location: Jersey (the original version)

Posts: 210

Time spent in forums: 59 m 57 sec
Reputation Power: 11

I'm not sure but i think Magma got the wrong end of the stick...

Anyway, in short there is no way using CSS alone to recreate this effect. You would have to use an image of some varieity although with carefull use of the CSS repeat options you can use a gif of no more than 100 odd bytes.

eg:

using the image attached (ripped from the referenced site - sorry guys) and the following CSS class you could apply the BG to a table cell / div or to a whole page:

.stripy {
background-image: url(stripy.gif);
background-repeat: repeat-y;
background-position: left top;
}

then simply add the class="stript" parameter to the relevent HTML tag ...

Sorted

Icy

Attached Images

stripy.gif (74 Bytes, 365 views)

June 2nd, 2003, 11:41 AM

magma

Contributing User

Join Date: Apr 2003

Location: Italy, EU

Posts: 517

Time spent in forums: 11 h 45 m 8 sec
Reputation Power: 11

Aaaaagh, you're right!!
...the left side...
Midway upon the journey of my life... and I can't distiguish between left, right or just the middle...

Perfectly agree with icy_polecat... you need to use an image!

Cheers, Magma

How to do this with CSS: see linked site

Developer Shed Advertisers and Affiliates