Vertical lines using HTML: {Boomer's wiki :) }

  • Idea
  • Updated 3 years ago
  • Implemented
Tip by Boomer :

"Don't let them tell you there is no "vertical line" tag in HTML.
This has got to be the coolest trick for a vertical line...

Use the "horisontal rule" tag as follows:
<!--

<HR width=1, size=500>

-->
This will give you a vertical line 1px wide and 500px long.
Leave out the <!-- and the --> of course."
Photo of PeterP

Peter

  • 2569 Posts
  • 113 Reply Likes
  • confident

Posted 6 years ago

  • 5
Photo of Boomer

Boomer, Champion

  • 2041 Posts
  • 81 Reply Likes
So you thought it needed it's own post hey Peter?..... OK

@ M. Of course the HR tag won't work in Tastelessly now will it.
For now anyway. Just teasing you. Ha, Ha.
Photo of PeterP

Peter

  • 2569 Posts
  • 113 Reply Likes
It's worth it's own post for sure and it allows Get satisfaction to index the title
Photo of Boomer

Boomer, Champion

  • 2041 Posts
  • 81 Reply Likes
Good thinking Batman!!

And Googlebot also "eavesdrops" a lot here in GS.
You should have put a link to your site man.
Photo of PeterP

Peter

  • 2569 Posts
  • 113 Reply Likes
I should have put your page in the link. Sorry!

My site is a SIG and it's saturated. It's purely a not for profit site and the people who would be interested already know it. Others wouldn't be interested. I think a relatively unique situation.

People come to the site while they are studying for specialist type exam.

Once they're finished I wouldn't expect them to return other than to make the recommendation for a follow up cohort.

The analytics show a saw tooth pattern of visits and the peaks correspond exactly to he examinations being prepared for. Then down, down, down ,waiting for the next cycle
Photo of Boomer

Boomer, Champion

  • 2041 Posts
  • 81 Reply Likes
No worries Peter,
Myself and GB go back a long way.

After a bit of digging around, I found this
old photograph of the two us back in the day.



I was pretty good looking back then, don't you think?
Photo of CaseyC

Casey

  • 4 Posts
  • 0 Reply Likes
could I have a full code?
Photo of michealyoungM

michealyoung

  • 1 Post
  • 0 Reply Likes
i wish to align it on the left with a space left for brief introduction how i will do it
Photo of Stefan

Stefan, Official Rep

  • 4397 Posts
  • 176 Reply Likes
Hello michealyoung

You can do this as follows:
  1. Drag and drop a Coloumn Divider Widget onto your page.

  2. Drag and drop a Text Widget into the left coloumn of the Coloumn Divider Widget.

  3. Add your instructions into the Text Widget.

  4. Drag and drop an HTML Widget onto your page and place it on the right-hand side next to the Text Widget into the same coloumn.

  5. Add the code provided in the head post of this thread and click on "OK".

  6. Adapt the width of your left coloumn by moving the middle line of the Coloum Divider Widget.
Photo of micky

micky

  • 1 Post
  • 0 Reply Likes
another way is to use images......!
Photo of Kate Bro

Kate Bro

  • 2 Posts
  • 0 Reply Likes
is there a way to change the color of the line?
Photo of Stefan

Stefan, Official Rep

  • 4397 Posts
  • 176 Reply Likes
Hello Kate Bro

Absolutely. Add a color attribute to your code, and edit the colour code for the desired colour. This code produces a red line:

<hr width="1px"; size="500px"; color="#ff0000";>
Photo of Kate Bro

Kate Bro

  • 2 Posts
  • 0 Reply Likes
thanks for your response... but for some reason once I add the color element it makes the line into a giant circle lol... any other ideas?
Photo of Sanja

Sanja, Official Rep

  • 10632 Posts
  • 482 Reply Likes
Hello Kate,

That particular code may have deprecated on some browsers. Please try this one:

<div style="width:1px; height:500px; background-color: #ffffff">
Photo of Suneel Sirohi

Suneel Sirohi

  • 1 Post
  • 0 Reply Likes
thatz a great option ..... REALLY Buddies TRY THIS one only .... :)