vertical line

hi,
Is there any way to put in a vertical line to divide a html page or can you only do it by editing your background in photoshop or paint??
ellewood22
ellewood22Asked:
Who is Participating?
 
lexxwernConnect With a Mentor Commented:
Okay the easiest way.
this goes in your head
<style>
div#vertline{
               position:absolute;
               height:100px;
               width:1px;
               background-color:#000000;
             }

And In your body

<div id="vertline" style="left:x;top:y;"></div>

x and y is the coordinatesthats all.

lexxwern.
0
 
brunoCommented:
can you show an example of what you want??

you could easily just make an image of a verticle line and include it on your page...
0
 
meiwu_chiCommented:
You can Split your page using frames (<FRAMES SRC="20%,*>)
Or use an image of a vertical line.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
lexxwernCommented:
rubbish.......
vertical lines are supported by all ver 5 and ver6 browsers thro the use of svg's.
do some self research on these Scalable Vector Graphics.
U'll get exactly a vertical line without images or frames.

FRAMES is a stupdi idea tho. first of all they're not preffered and then get them in just for a vertical line..?
meiwu_chi????

lexxwern.
0
 
lexxwernCommented:
first you will have to create a svg document and then embed it into your html page.

ill be posting the code here on.

lexxwern.
0
 
lexxwernCommented:
this is the code you'll have to ad into your html page.

<EMBED WIDTH="x" HEIGHT="y" SRC="vertline.svg" Alt="Vertical Line" ALIGN="decide" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/">

Next will be the svg document.

lexxwern.
0
 
lexxwernCommented:
The vertline.svg document starts

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="x px" height="y px">
<title>Vertical Line</title>
<line x1="10" y1="10" x2="10" y2="100" stroke-width="1 px" stroke="black"/>
</svg>

save this as vertline.svg in the same dir as your html file which needs the vertical lines...

lexxwern.
0
 
lexxwernCommented:
now a line is drawn from x1,y1 to x2,y2.

this code can be used to draw as many lines as possible
just ad another <line> tag in the svg file.
there also is a <circle> <rect><ellipse> <poly> tags in the present svg definition.
please check the latest w3c recommendation for svg http://www.w3.org/ .
perhaps this is what ur looking for.

lexxwern.
0
 
lexxwernCommented:
Also can be used VML. which is an xml appliction by microsoft.

lexxwern.
0
 
DreamMasterCommented:
Much easier way....

Devide the page into table columns, make a 1x1 pixel image that is transparant...

In the place where you need the vertical line, make a cell, 1 pixel wide or more depending on how wide you want it...give the cell the background color you need for your line, and make the cell as wide as you need and as high as you want...

For example:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td valign="top"><!-- cell contents goes here //--></td>
   <td width="1" height="700"><img src="images/spacer.gif" border="0" width="1" height="1"></td>
   <td valign="top"><!-- cell contents goes here //--></td>
  </tr>
</table>

In this example a line is drawn that is 700 pixels high and 1 pixel wide....all contents on the sides you can place as you see fit..

Max.
0
 
DreamMasterCommented:
Oh lexxwern, would you mean showing a little more respect for meiwu_chi? We all try to give ideas, and the fact that the idea of meiwu_chi is not your preferred idea doesn't mean its rubbish...

Max.
0
 
DreamMasterCommented:
mean = mind by the way...

Max.
0
 
lexxwernCommented:
okay. and dreammaster.

creating a frameset for a vertical line. how is that not rubbish?
lexxwern.
0
 
lexxwernCommented:
remember close the style

add </style> after }

lexxwern.
0
 
lexxwernCommented:
okay and my second suggestion doesn't ask you to change the structure of your page. u just ad the code. thats why id think thats the best solution.

lexxwern.
0
 
webwomanCommented:
And what if you want more than one line? Or want it different lengths? Or want it to be a side border on a table?

All of the ideas presented will WORK, they just won't all work for EVERYTHING.

I wouldn't use the div or the svg options, because they're not supported by the browsers/platforms/systems that some of my audience has. Nor will they give me the effect that I want.

I haven't seen any sites that use svgs, do you have any examples? Or one that uses a div in the way you suggest to make a line?

Theory is wonderful, but it don't pay the bills... ;-)
0
 
lexxwernCommented:
WEBWOMAN SAYS
And what if you want more than one line? Or want it different lengths? Or want it to be a side border
on a table?
LEXXWERN SAYS
Read the W3C Recommendations for SVG, even tho all you asked is self explanatory in the tag syntax itself.

WEBWOMAN SAYS
I wouldn't use the div or the svg options, because they're not supported by the browsers/platforms/systems
that some of my audience has. Nor will they give me the effect that I want.

LEXXWERN SAYS
so for a single vertical line u ask me to change the structure of site?

WEBWOMAN SAYSI haven't seen any sites that use svgs, do you have any examples? Or one that uses a div in the way
you suggest to make a line?
LEXXWERN SAYS
Well its a new technology and i agree has a lot of scope for improvement, but ya u wanted a vert. line right, SVG Gives that to you.
WEBWOMAN SAYS
Theory is wonderful, but it don't pay the bills... ;-)

LEXXWERN SAYS
okay create all the tables and framesets you want, change your site structure completely, invest hours for the new structure, implement changes on all your pages of the site. and be happy that you didn't create one document and embed it.

I guess i have been rude. but somebody suggested to create a frameset!!!
meiwu_chi
Your suggestion will work perfect, but just think about ellewood22. he has a site ready and just wants a vertical line, would you being in his position change the whole damn structure and have a frameset?

lexxwern
LHN Interactive
0
 
ellewood22Author Commented:
LEXXWERN,
You fight a good argument so i'll try your suggestion and let you know what I think of it.
ellewood22
0
 
lexxwernCommented:
Just Wondering...
1x1 Black Gif Image..!$##%...
yeah.

Create a gif image which is completely black and then the following line:
<img src="black1x1.gif" height="YOURCHOICE" width="1" alt="Vertical Line" style="position:absolute;left:x;height:y;"/>

lexxwern
LHN Interactive
0
 
webwomanCommented:
"WEBWOMAN SAYSI haven't seen any sites that use svgs, do you have any examples? Or one that uses a div
in the way
you suggest to make a line?
LEXXWERN SAYS
Well its a new technology and i agree has a lot of scope for improvement, but ya u wanted a vert. line
right, SVG Gives that to you."

Which doesn't help a whole lot if nobody can see it. That was my point.

Also, if the line is that important, and needs to be on everything, you make sure it gets there. If that means redesigning the site, so be it. If it's just something you would LIKE, but is too much hassle, you probably wouldn't bother.

Sites get redesigned all the time, often for no other reason than to make them look newer. It's not always a huge hassle. I find it an opportunity to fix the things that have been annoying either me or my users.

And sometimes, to add new bells & whistles... ;-)
0
 
lexxwernCommented:
"Which doesn't help a whole lot if nobody can see it. That was my point. "
CSS and Div's are almost close to being the standard today. So there is no question of them not being visible, except perhaps to a microscopic minority still stuck with older browsers.
SVG you need the plugin but newer browsers already come with it. Its pretty much like flash.

"Sites get redesigned all the time, often for no other reason than to make them look newer. It's not
always a huge hassle. I find it an opportunity to fix the things that have been annoying either me or
my users."
But for just a vertical line would you be ready to completely abandon your current design, and create a new one???
I wouldn't.

lexxwern.
0
 
brunoCommented:
ok, i'm going to go back to what i said in the VERY FIRST COMMENT.

(i can type in caps too....dunno why though)



"you could easily just make an image of a verticle line and include it on your page... "




BRUNO
0
 
lexxwernCommented:
(CAPS==SHOUTING)==1;

lhn
0
 
ellewood22Author Commented:
Thanks for all suggestions, whether or not lexxwern's solution is the right or wrong way to draw a vertical line is a matter of opinion I suppose but it did what i needed it to do so thank you lexxwern.
0
 
brunoCommented:
>>CAPS==SHOUTING


exactly.

pretty damn rude to be shouting.
0
 
webwomanCommented:
As long as it works for you and your audience, it's right. ;-)
0
 
lexxwernCommented:
well it works for me and i make it WORK FOR MY AUDIENCE

but ya. nice arguments in this one.
lexxwern is hungry for more.
0
 
webwomanCommented:
Nice that you can control what browsers and systems your audience can you. I can't.
0
All Courses

From novice to tech pro — start learning today.