Border HTML?!

  • 1
  • Question
  • Updated 9 years ago
  • Answered
How do you enter a one line border? I'm NOT looking for a border around the whole page like google seems to think I'm asking for. I want a border to separate one content from another... view...

http://single-n-looking.info

I want a border to go from left side of the page to the right side under the login box to separate the login box from the rest of the page!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
  • http://dons-web-design.info

Posted 9 years ago

  • 1
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, managed to add an horizontal line using the

<!--

<hr />

-->

tag... but my background color fills the whole page... how can I make my background different on each side of the line? I'm thinking yellow on the top and canary or light yellow on the bottom!?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Donald

Do you have an example of what you're trying to do? I'm not sure if I'm understanding this clearly.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok... I'll draw it for you

LOGIN BOX - NAME OF SITE AND LOGO

-----------------------------------------------------------------------------BORDER LINE

REST OF SITE

--

I would also like two different colors on each side of the line, like a yellow and light yellow or blue and light blue - haven't decided yet on my colors!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
This is just an example of the homepage... this is for a non yola site, but it's going to be in use with a yola site. one site (non yola) will be a member's only area and same site (subdomain in use with yola) will be public (member or not).
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Donald

Perhaps what you're looking for is this type of code?

<div style="border: 2px solid red; width: 400px; height: 211px; background-color: pink;">This is where your text goes</div>

You can drag a text widget onto your page, click on the little HTML icon on the Edit Toolbar and paste in that code. Here is what the various pieces of the code do, each of which you can change to suite what you are trying to accomplish:

1. Width is how wide the area will be.
2. Height is how tall it will be.
3. Border is how thick it will be should you choose to have one, and after that you put the color of the border in this case solid red.
4. Background-color is the color of the background. If you want to be more precise about the color you can replace this with a hex value. For example, if you replace the word "pink" with the hex value:#63B8FF you will get a light blue color block. For a list of hex values see: http://cloford.com/resources/colours/...
5. You can put the text you wish to appear where you see: "This is where your text goes".
6. Click OK.

You can change the various pieces to make it the size and color that you prefer.

Note: Because this is in a text widget, you can also type directly into the text widget instead of putting the text you wish to appear in the HTML code. You can also highlight the text and use the Edit Toolbar to change its various attributes such as color and size.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
no, that goes around the section, I just want the bottom line
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Donald, hello there. I think this may be of use???
I did similar but I changed all my text boxes to the colour I wished, then did the horiz line and then another text box under and coloured that the colour I wanted. You can then 'fiddle' with the margins and then they all meet.
So you get a colour on top, line between, and colour below.
One thing..... sometimes a hassle in IE and takes a bit of a 'fiddle' as I said.