Comments on: Horizontal stripes

By: clo

clo — Sun, 01 Aug 2010 23:50:10 +0000

Thank you for replying and for your help Christina. I’m using a h1 tag instead of a p tag since the horizontal stripe also happens to be the heading required in a element on the html5 page I’m designing. This gives me the opportunity for to include some keywords in the heading, so the text is necessary. The span option you gave me is just what I was looking for. Thanks again.

By: Christina

Christina — Sun, 01 Aug 2010 22:40:54 +0000

Hi Clo!

There’s no need to hide the text. Just don’t include it in the markup so you’ll have an empty div tag. You’ll probably need to set a height on the div in the CSS – for example, height:20px.

The other option is to add span tags around the text and then add a line in your css:
.left span {display:none;}
This will hide your text but again you will need a height.
Christina

By: clo

clo — Fri, 30 Jul 2010 23:33:39 +0000

How would I go about hiding the text on a stripe that starts on the left? I tried the text-indent property but no dice. Thanx

By: 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Top Web Hosts Review Best Web Hosting 2010

Wed, 24 Mar 2010 22:51:49 +0000

[...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

By: Stacy

Stacy — Sat, 13 Mar 2010 13:20:08 +0000

Thanks for this great tip–just what I was looking for based on a specific request from a client. Saved me having to play around with settings for an hour to get the desired effect.

By: 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX

Thu, 04 Mar 2010 06:15:26 +0000

[...] [...]

By: 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | BestWebMagazine

Mon, 22 Feb 2010 14:49:17 +0000

[...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

By: Christina

Christina — Mon, 22 Feb 2010 12:03:48 +0000

Thanks Elliot for your comment! I will credit Ben Bodien in the post now.

Ben used a slightly different technique. He set the width of the stripes with px to a large number, which still works but I wanted to make sure that there was absolutely no screen size that would show the end of the line, so I used width:100%;. Ben also positioned things slightly differently.

By: Elliot Jay Stocks

Elliot Jay Stocks — Mon, 22 Feb 2010 11:49:45 +0000

Thanks for using the idea and for the exposure!

I should give credit to Ben Bodien (one half of Neutron Creations), though, because although I came up with the design, it was Ben who handled the CSS for that particular trick.

By: 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | TipTe.com

Sat, 20 Feb 2010 08:05:17 +0000

[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]