PDA

View Full Version : drawing virtcal and horizonta lines

jeddi
06-01-2006, 09:51 AM
Hi all,

I would like to draw a simple horizontal line and a simple virtical line on my page - both about 3px wide.

What is the easiest way to do this ?

Thanks :)
ronaldb66
06-01-2006, 10:17 AM
"My car won't start; can you tell me what's wrong? It's a blue one."

You'll have to give us more info to go on; we're not clairvoyant.
CSS, images, JavaScript, Java applet, SVG: there are many options, but it all depends on what you want to accomplish.
jeddi
06-01-2006, 10:24 AM
I thought it was a pretty clear question -

what is the simplest way to draw a 3px horizontal line

and

a

3px virtical line

on my HTML page ?

ps - put some fuel in the tank ;)
ronaldb66
06-01-2006, 10:46 AM
I thought it was a pretty clear question No, it is not.
HTML is not a graphic application, it's a markup language: you cannot draw lines with HTML, you'll need another technology for that.

A--fairly--simple way would be to create an image of an horizontal and a vertical line using a graphics editor, and include this image via the img element on a HTML page.

Another way would be to give--arbitrary, empty--block level elements a horizontal resp. vertical border of 3px, but whether that is an option all depends on where these lines would need to appear, and in what relation to eachother they would be.
coothead
06-01-2006, 10:53 AM
Hi there jeddi,

I'm guessing that you don't want to 'draw' a line but rather just want to 'make' a line. :)
If so try this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container {
width:313px;
height:300px;
padding:10px;
border:1px solid #000;
margin:auto;
}
#vertical {
height:300px;
width:3px;
background-color:#f00;
float:left;
}
#horizontal {
height:3px;
width:300px;
background-color:#00f;
font-size:0;
float:left;
margin-top:148px;
margin-left:10px;
}
-->
</style>

</head>
<body>
<div id="container">

<div id="vertical"></div>
<div id="horizontal"></div>

</div>

</body>
</html>
coothead
jeddi
06-02-2006, 07:06 AM
Thank you coothead for your reasonableness and ability to understand the question.

As you noticed after the initial responce from here I posted on another forum to get find the answer.

I'll use your suggestion as enables me to make/draw the lines.

Thanks again.
coothead
06-02-2006, 07:42 AM
No problem, you're welcome. :)