Welcome to WebmasterWorld Guest from 3.80.60.248

Forum Moderators: open

Message Too Old, No Replies

vertical line

code for vertical line

     
8:35 pm on Jan 26, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 26, 2004
posts:2
votes: 0


Is there any html code to create a vertical line?
10:05 pm on Jan 26, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member txbakers is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 1, 2001
posts:4392
votes: 0


nope, but you can create one with images.
10:07 pm on Jan 26, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 17, 2001
posts:1262
votes: 0


Depending on the structure of your document, you may be able to use CSS border properties as well.
11:25 pm on Jan 26, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


CSS seems the obvious approach. For instance if you wanted a vertical red line down the left hand side of your menu then the CSS might look something like:


#navmenu {
border-left: 1px solid #f00;
}

where #navmenu is the id of the div that encloses your menu.

11:30 pm on Jan 26, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 8, 2003
posts:659
votes: 0


you can create one with images

Right. Just use a 1x1 image(spacer.gif) of any color, and modify the following dimensions.

<img src="images/spacer.gif" width="1" height="1000" border="0">

12:02 am on Jan 27, 2004 (gmt 0)

Full Member from GB 

10+ Year Member

joined:May 20, 2003
posts:274
votes: 0


I do what Slowmove said but I use a 2x1px (HxW) and have the bottom pixel the same as your background colour. This gives you a dotted line.
12:13 am on Jan 27, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


The CSS approach works nicely when the entire div gets a line. Sometimes I need a line that does not extend the entire length of the border and that's when I use a gif.

I usually create at least one solid color gif for every site, handy whenever I need a little ornamentation or visual break. I use it instead of HR as well, because I don't trust browsers to get a styled HR tag right.

Also nice for a tiled solid color background that will exactly match a foreground gif no matter what the color depth of the monitor is.

smokeyb -- nice approach to the dotted line. Using css gives different results cross-browser but you've got the fix.

1:56 am on Jan 27, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 8, 2004
posts:865
votes: 0


Is there any html code to create a vertical line?

*edit* sort-of ;)

Cut and paste this code and give it a try,


<html>
<head>
<style type="text/css">
p.thin_blue_line { font-size: 10px; line-height: 8px; color: #0000FF; }
p.thin_red_line { font-size: 20px; line-height: 15px; margin: 0px; color: #FF0000; }
p.thick_black_line { font-size: 50px; line-height: 40px; margin: 0px; color: #000000; }
</style>
</head>
<body>
<p class="thin_blue_line">&#124;<br />&#124;<br />&#124;<br />&#124;<br /></p>
<br />
<p class="thin_red_line">&#124;</p>
<p class="thin_red_line">&#124;</p>
<p class="thin_red_line">&#124;</p>
<p class="thin_red_line">&#124;</p>
<p class="thin_red_line">&#124;</p>
<p class="thin_red_line">&#124;</p>
<br /><br />
<p class="thick_black_line">&#124;<br />&#124;</p>
</body>
</html>

I checked it in Moz 1.6, IE6, and Opera 7.23. It worked for me, let me know if anyone has any problems. I personally would still just use a border, hehe.

BTW, I just thought this up well seeing if I could come up with a solution to this problem. I don't know if anyone else has ever tried this method but if they haven't can we call it the twisted method, lol :)

[edited by: twist at 4:16 am (utc) on Jan. 27, 2004]

2:44 am on Jan 27, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts:1676
votes: 0


twist

Pretty slick. I like it.

2:45 am on Jan 27, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member txbakers is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 1, 2001
posts:4392
votes: 0


Absolutely

Sorry, that's not HTML. That's the CSS method.

3:24 am on Jan 27, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 26, 2004
posts:2
votes: 0


Thanks loads for the great ideas! I'm going to try them all.
3:48 am on Jan 27, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 8, 2004
posts:865
votes: 0


You are correct txbakers, my bad. I edited it.

Would this this qualify as html?

<p style="font-size:50px;line-height:40px;">&#124;<br />&#124;</p>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members