How to add a vertical rule?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
As for horizontal rule we add < hr >, wat about vertical lines? any idea?
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Reply Likes
  • confused

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Monica

To add a vertical rule, use this code:

<!--<div style="width:1px; height:500px; background-color: white">-->

You can change the width, height and color to your specification. Be sure to take out the <!-- and -->
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Reply Likes
Thanks alot littleus :)
Photo of sumegha

sumegha

  • 2 Posts
  • 0 Reply Likes
Hi Sanja,

I am trying hard to place a vertical line on my website...just not able to crack it.
This is wat i am doing:-
1. Selecting the HTML widget
2. Placing the vertical code u have mentioned above with a change in the colour of line to black.
3. saying 'ok'
4. no vertical line appears infact only the code appears on my preview page.

Please help!
regards
sumegha
Photo of Bryan

Bryan

  • 2 Posts
  • 0 Reply Likes
Worked great, thanks.
Photo of Bryan

Bryan

  • 2 Posts
  • 0 Reply Likes
Worked great, thanks.
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Sumegha,

Can you just double check that you are using an HTML widget? The HTML widget has the blue sphere icon.

Photo of nashma4

nashma4

  • 9 Posts
  • 1 Reply Like

Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Hello everyone. OK, the line is fine, as have used prior, however, this time I wish it to 'butt' up against the edges of the html code it is , ie next door to the text box either side. Without a big 'gap' between. Can you advise how to do this??
thks
jenC
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey JenC

Can you please share with us the code you're using or direct us to the page where you've set this up and we'll try to assist further.
Photo of nashma4

nashma4

  • 9 Posts
  • 1 Reply Like
margin or padding in your css. May I see your code?
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Not using any CSS, as per above just putting in the hr. eith putting into the html of a text box, or pulling over an html widget. (of course I change size etc to whatever I want). Using the following:
<!--<div style="width:1px; height:250px; background-color: black">-->
so no CSS.
Have no idea as to what to put if I have to do CSS??? Have only used this between columns/text, but always leaves a big 'gap'. ?????
If I have to put in coding, could anyone please assist?
thanks
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
try using the margins in the Properties tab on the right hand side. You can use negative as well as positive numbers. This only works with a text widget not an html widget.
Photo of nashma4

nashma4

  • 9 Posts
  • 1 Reply Like
The way she wrote it is one way but a better way to do it is
<hr style="width: 1px; height: 20px; display: inline;">
Sorry I thought you knew CSS. Do you know how to use margin? I would still like to see your code and if you do I can help you.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
nashma4, thanks for that,
I am pretty good at laying out pages and fiddling around and using coding (if I have it), but no do not know how to write it at all !
With the one above you have given me, just used it on page, but that only gives a small line, and when I make it 200 px or 160 it does not change at all.
Whereas the first one I can alter and change. I have placed in text boxes as better to 'fiddle' with , and margins I have made smaller, but still left with a gap between the line and the text on one side or the other.
You ask for my code, but have done it in a column divider, then another, and then text boxes in those,..... so unsure how to copy all that code for you to see. What I have done is uploaded on web for you to see what I am talking about - you will then see coding yourself at source. (your one is on the bottom of the two).
I get the lines fine, all I wish for is to be able to put vertical lines between text and have left and right text 'butt' up against the line.
your help appreciated !

oops. site is: newzealandartclasses.co.nz index page at bottom.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello JenC

I'm not sure what you mean by a big gap? I have used 2 HTML Widgets which contained the code. And when I preview my page, it looks like one continuous line.

I'm attaching screenshots of the Sitebuilder and the Preview page.



Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Sanja, hello. Have put quite a lot in a paragraph above for you to see also. thanks
Note, when I say big gap, this is between text and lines, not in lines.
JenC
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ahh.. thanks for the clarification! I believe Nashma is on the right track with the margin padding. Please let us know if you still have trouble with this.
Photo of nashma4

nashma4

  • 9 Posts
  • 1 Reply Like
OK I know what is wrong. Here try this:
left:
<hr style="width: 1px; height: 200px; float: left;" />

right
<hr style="width: 1px; height: 200px; float: right;" />
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
OK, now have copied the top one for the first one which is wide on the right by the text. but now it has moved the line over - fine . But ! now have the wide bit on the left between it and the text !!!
Then did again (the middle one) and put center instead of right, and centred it. but still the gaps either side. I just wish to have text closer to the line on either side. ??
Photo of nashma4

nashma4

  • 9 Posts
  • 1 Reply Like
inside the hr tag's style attribute of the first one enter:
margin-left: the-amount-you-want-px;
and inside the second enter:
margin-right: the-amount-you-want-px;

This well bring them closer to the content. Enter how much closer in pixels you want them to be.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Nashman, thank you. will do this. Had to send Craig an email, and now out. but will do this time tomorrow about this time. Can you plse keep an eye out for my reply.
thanks lots.
JenC
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Thanks for this. Will alter coding as I have done - as did do what you just said above, previously. I think everyone is thinking I want two rules. whereas I really only want one, as originally said. That one line down, I wished text on either side to get close to it, ie both sides butt up against the line - well almost. Anyway, found that even if I do alter margins, as I normally do, still will have a gap either side larger than I wish. Will have to put up with that I guess, otherwise will need to do a graphic for text/line/text.
thank you so much for your help.
JenC
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey JenC

I think I may have come up with something. It will need some tweaking depending on how you want to set up your text. If you can start with this, then let me know what you want to see, I can help you adjust accordingly.

<div id="left" style="width: 49%; float: left; "> your text goes here </div>

<div id="right" style="border-left: 1px solid black; height: 300px; margin-left: 50%; padding-left: 10px;"> your text goes here </div>
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Sanja, Sanja,Sanja, Huge thank you !!!! Excellent. Just right, Perfect.
This is what I was after....... I can rearrange as I wish.

Now, one thing..... am I asking too much? Is it possible to now have two vertical rules (as you have given me for one) with text on left, then line, text in middle, then line, and then text on right side again. ie... so three blocks of text like newspaper column with a line between (so 3 blocks text, 2 lines either side of the middle block?)
Hope you understand that?
thank you
JenC
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey JenC

Making me really exercise my brain and googling powers here :)

This code is a bit more involved. I hope this works for you!

Step 1: Drag over an HTML Widget and paste in the following code:

<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

div#left {
float: left;
width: 250px;
border-right: 1px solid black;
height: 300px;
padding-left: 10px;
}

div#right {
float: right;
width: 250px;
border-left:
1px solid black;
height: 300px;
padding-left: 10px;
}

div#middle {
padding: 0px 260px 5px 260px;
margin: 10px;
}

</style>

Step 2: Drag over another HTML Widget, and paste in the following code:

<div id="left">
Left side text...
</div>

<div id="right">
Right side text...
</div>

<div id="middle">
Middle column text...
</div>

Please let me know if you have any trouble with this.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Oh, did exactly as above, copied the style and put into html widget on page.
then dragged another over and put under and pasted the Step 2 into it.
ohhhhhhh, the whole page has gone all over the place, and columns not next door to one another.
Tried the 'style' in head/body and head again,in case I did something wrong. and also went through step 2 again. I then made a brand new page so I would not mess mine up, and repeated without anything else on the page (ie text boxes, and still not working). Then put text boxes into page and also not working.

I do seem to ask the most complex questions, don't I. I went looking on the web, but could not understand the complicated bits I saw on the geek sites, and that is why I thought I would ask. Normally no problem with styles etc for me. but does not seem to want to work.

Perhaps I should be content with your first answer and not give you too much 'hard work' at finding more for me? As I do appreciate, as you know, all the help you and others at Yola give. But it should work, should it not, as you would have tried it first, then why not for me? as all I am doing is exactly as above, ie 2 html widgets and copying and pasting???
thks J
PS. do not mind if you 'throw your arms up in the air' - I honestly did try as above!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
It should work. I've attached a screenshot of what it should look like.

Can you please post your page URL and I can take a look at what you've done so far?

Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
sanja, been out, and late now, so will try out tomorrow and get back. thanks heaps.
JenC