[HTML+CSS] Vertical borders extending off page? - Tilted Forum Project Discussion Community

exizldelfuego · 03-02-2005, 09:14 PM

Hey guys, I'm pretty green to web design/development and am taking an independent study in college for it. My project is an online restaurant review site called Check Please! . As of now, I'm familiar with straight HTML and have gotten my feet wet with CSS and Javascript.

Anyways, I want my borders for the page content to extend off the page itself, so as the keep my "shadow frame" concept intact. I accomplished this at the top by setting the margin-top for <body> at -5px, but this doesn't address the bottom. So right now I just have this silly gap. Is there a better way for me to be doing this? Or am I on the right track with my -5px method and just need to figure out how to set my margin-bottom to... say... 105% without having the window being resized?

I'm actually sort of embarrassed asking you guys to check out my code after just reading about xhtml and proper coding techniques and such. My site is rampant with tables-as-design-tools and iframes. The directory structure to accommodate this is slightly obscene. It feels dirty now. But oh well, I'm still playing catch-up. I just bought a book about PHP and MySQL and it's funny because it's looking like everywhere that I'm using iframes will simply be replaced by PHP-MySQL dynamically generated content. It's almost as if I planned it that way, using the iframes as place-holders until I learned better ways of doing it. Here's to a clean-code rewrite in my site's future!

shAzb0t · 03-02-2005, 09:27 PM

why not just make

body
{
margin: 0
}

?

slimsam1 · 03-02-2005, 09:37 PM

It should have worked with margin-top set to 0px.

margin-bottom would also ideally be set to 0px, as these distances (along with left and right) are measured from the corresponding edge.

There is another possibility for creating this effect, though. You can set a background image with css, center it horizontally and tile it only vertically.

Code:

body {background-position: center top; background-repeat: repeat-y; }

This would work assuming your site is a fixed width, and your background image would need to be as follows:

Code:

(shadow) | inside of page area, width the same as the site | (shadow)

Get my drift?

exizldelfuego · 03-02-2005, 10:28 PM

Okay. I guess my problem then is that I structured the page in a way that I used a gigantic table with a single row and three columns consisting of the leftBorder, Content (center), and rightBorder, and the reason why margin: 0px isnt working for me is due to this table being offset slightly at both the top and bottom, despite setting all applicable margins to 0px. Perhaps if I tried abolishing that table, and trying to induce the same structure in the <body> with a combined left+right border with a large empty gap in the middle as a background picture and tile it vertically, I can solve the problem.

exizldelfuego · 03-02-2005, 10:56 PM

Aha! Got it! Awesome. Thanks guys. It was so simple. It's funny how it can be so difficult to see a problem's solution from a slightly different perspective when you're so entrenched in what you've been working on. Like in this case: Why not combine the left border and right border as a means of getting away from the table layout?

Didn't even occur to me. Once again, thanks!

03-02-2005, 09:14 PM	#1 (permalink)
exizldelfuego Crazy Location: Seattle, WA	[HTML+CSS] Vertical borders extending off page? Hey guys, I'm pretty green to web design/development and am taking an independent study in college for it. My project is an online restaurant review site called Check Please! . As of now, I'm familiar with straight HTML and have gotten my feet wet with CSS and Javascript. Anyways, I want my borders for the page content to extend off the page itself, so as the keep my "shadow frame" concept intact. I accomplished this at the top by setting the margin-top for <body> at -5px, but this doesn't address the bottom. So right now I just have this silly gap. Is there a better way for me to be doing this? Or am I on the right track with my -5px method and just need to figure out how to set my margin-bottom to... say... 105% without having the window being resized? I'm actually sort of embarrassed asking you guys to check out my code after just reading about xhtml and proper coding techniques and such. My site is rampant with tables-as-design-tools and iframes. The directory structure to accommodate this is slightly obscene. It feels dirty now. But oh well, I'm still playing catch-up. I just bought a book about PHP and MySQL and it's funny because it's looking like everywhere that I'm using iframes will simply be replaced by PHP-MySQL dynamically generated content. It's almost as if I planned it that way, using the iframes as place-holders until I learned better ways of doing it. Here's to a clean-code rewrite in my site's future!

03-02-2005, 09:37 PM	#3 (permalink)
slimsam1 Crazy	It should have worked with margin-top set to 0px. margin-bottom would also ideally be set to 0px, as these distances (along with left and right) are measured from the corresponding edge. There is another possibility for creating this effect, though. You can set a background image with css, center it horizontally and tile it only vertically. Code: body {background-position: center top; background-repeat: repeat-y; } This would work assuming your site is a fixed width, and your background image would need to be as follows: Code: (shadow) \| inside of page area, width the same as the site \| (shadow) Get my drift?

03-02-2005, 09:27 PM	#2 (permalink)
shAzb0t Psycho Location: whereever my portable hard drive takes me	why not just make body { margin: 0 } ?

03-02-2005, 10:28 PM	#4 (permalink)
exizldelfuego Crazy Location: Seattle, WA	Okay. I guess my problem then is that I structured the page in a way that I used a gigantic table with a single row and three columns consisting of the leftBorder, Content (center), and rightBorder, and the reason why margin: 0px isnt working for me is due to this table being offset slightly at both the top and bottom, despite setting all applicable margins to 0px. Perhaps if I tried abolishing that table, and trying to induce the same structure in the <body> with a combined left+right border with a large empty gap in the middle as a background picture and tile it vertically, I can solve the problem.

03-02-2005, 10:56 PM	#5 (permalink)
exizldelfuego Crazy Location: Seattle, WA	Aha! Got it! Awesome. Thanks guys. It was so simple. It's funny how it can be so difficult to see a problem's solution from a slightly different perspective when you're so entrenched in what you've been working on. Like in this case: Why not combine the left border and right border as a means of getting away from the table layout? Didn't even occur to me. Once again, thanks!