Solved

vertical line

Posted on 2002-03-14
28
551 Views
Last Modified: 2006-11-17
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
0
Comment
Question by:ellewood22
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 4
  • 3
  • +3
28 Comments
 
LVL 18

Expert Comment

by:bruno
ID: 6866083
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
 

Expert Comment

by:meiwu_chi
ID: 6866826
You can Split your page using frames (<FRAMES SRC="20%,*>)
Or use an image of a vertical line.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867342
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:lexxwern
ID: 6867344
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867348
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867354
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867361
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867400
Also can be used VML. which is an xml appliction by microsoft.

lexxwern.
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6867506
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
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6867511
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
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6867522
mean = mind by the way...

Max.
0
 
LVL 12

Accepted Solution

by:
lexxwern earned 20 total points
ID: 6867753
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867757
okay. and dreammaster.

creating a frameset for a vertical line. how is that not rubbish?
lexxwern.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867760
remember close the style

add </style> after }

lexxwern.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867766
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
 
LVL 19

Expert Comment

by:webwoman
ID: 6867773
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6867803
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
 

Author Comment

by:ellewood22
ID: 6867984
LEXXWERN,
You fight a good argument so i'll try your suggestion and let you know what I think of it.
ellewood22
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6868546
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
 
LVL 19

Expert Comment

by:webwoman
ID: 6869162
"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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6870435
"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
 
LVL 18

Expert Comment

by:bruno
ID: 6870450
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6870457
(CAPS==SHOUTING)==1;

lhn
0
 

Author Comment

by:ellewood22
ID: 6870718
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
 
LVL 18

Expert Comment

by:bruno
ID: 6871194
>>CAPS==SHOUTING


exactly.

pretty damn rude to be shouting.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6873443
As long as it works for you and your audience, it's right. ;-)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6873540
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
 
LVL 19

Expert Comment

by:webwoman
ID: 6874158
Nice that you can control what browsers and systems your audience can you. I can't.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: blockā€¦
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question