Adding vertical lines to the left and right of full length of website |
Adding vertical lines to the left and right of full length of website |
mferguson |
Sep 24 2020, 07:54 PM
Post
#1
|
Group: Members Posts: 7 Joined: 24-September 20 Member No.: 27,553 |
First website I've ever made, complete noob to HTML.
I've been working on a portfolio website where I can upload different things that I work on and employers can take a gander at it. It's almost complete, there is just one thing I haven't been able to get working: vertical lines. http://www.michaelblakeferguson.com I am simply trying to get a vertical line to span the full length of the website on the left and right sides, the idea is that it will make it more "enclosed". I currently have a wrapper for the entire <body>. I tried to create a table with 3 columns. C1 for the left vertical line, C2 for the body, C3 for the right vertical line. That seemed to work initially but it squished all of the elements together in C2. I have a feeling that it is a margin problem. But each time I try to adjust the values it completely messes up the positioning of all elements. I am pretty sure I've taken the path of least resistance and made this website the ghetto way, so I'm not sure if I've done something incorrectly... Can someone explain the correct way to go about putting vertical lines around what already exists? Any comments on the way I've gone about programming things so far? I'm assuming you can look at the HTML code using F12, but if needed I can upload the source code. This post has been edited by mferguson: Sep 24 2020, 07:55 PM |
Christian J |
Sep 25 2020, 07:10 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Note that on a short page the BODY border will not extend all the way to the bottom of the viewport. Another method might be to use two CSS background images that repeat vertically (on a short page such images will extend all the way, even if the BODY element doesn't):
CODE body { background-image: url(left.gif), url(right.gif); background-repeat: repeat-y; /* makes the images tile vertically */ background-position: top 0 left 100px, top 0 right 100px; } See also https://developer.mozilla.org/en-US/docs/We...ground-position |
Lo-Fi Version | Time is now: 25th April 2024 - 08:13 AM |