Solved

vertical line

Posted on 2002-03-14
28
547 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
  • 15
  • 4
  • 3
  • +3
28 Comments
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 12

Expert Comment

by:lexxwern
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Also can be used VML. which is an xml appliction by microsoft.

lexxwern.
0
 
LVL 19

Expert Comment

by:DreamMaster
Comment Utility
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
Comment Utility
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
Comment Utility
mean = mind by the way...

Max.
0
 
LVL 12

Accepted Solution

by:
lexxwern earned 20 total points
Comment Utility
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
Comment Utility
okay. and dreammaster.

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

Expert Comment

by:lexxwern
Comment Utility
remember close the style

add </style> after }

lexxwern.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 12

Expert Comment

by:lexxwern
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
"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
Comment Utility
"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
Comment Utility
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
Comment Utility
(CAPS==SHOUTING)==1;

lhn
0
 

Author Comment

by:ellewood22
Comment Utility
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
Comment Utility
>>CAPS==SHOUTING


exactly.

pretty damn rude to be shouting.
0
 
LVL 19

Expert Comment

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

Expert Comment

by:lexxwern
Comment Utility
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
Comment Utility
Nice that you can control what browsers and systems your audience can you. I can't.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now