Forum Moderators: not2easy
1) It requires a background that runs the full height of a page.
2) It must also run down both the left and right sides of the page at roughly 50px wide.
#1 is no problem for me. It's quite basic.
#2 though has me thoroughly stumped. Is there a way to accomplish this via CSS?
TIA
The body will be centered using auto margins as you suggested. That's no problem cause I do that all the time.
My problem is I have two page borders, left and right, each 50 pixels wide, that need to run the full height of the page.
Getting a background image to run the full height of a page is no big deal. That's just a background image with repeat-y added to the body tag.
But having two page borders, left and right aligned, is causing me no end of grief. I can't find a way to make it happen. This is what I'm looking for help with.
Did that make any more sense? :)
because the easiest solution is to make the background and borders all in one image that is repeated vertically down the HTML element as Swa says.
If the distance between the two borders is flexible with the page width you can do it by making one image contain the background and say the left border, repeat that vertically down the HTML element, make another image for the right border and repeat that vertically down the right side of the body element - put padding on the body element to ensure the two side borders are never overlapped by the content or disappear on page resize. Then make a container div and center that for the content to sit between the 'borders' giving the container a min-width if you want that too
unless the border images are too complex to repeat?
method 1. is the same principle as 'faux columns' but you only actually want to use the center one
method 2. is the same principle as the sliding doors technique
are these 'borders' to have a flexible width in between them so that you can't make a fixed width image?
If the distance between the two borders is flexible with the page width you can do it by making one image contain the background and say the left border, repeat that vertically down the HTML element, make another image for the right border and repeat that vertically down the right side of the body element
html {
background: #ffffff url(/template/images/border_left.gif) repeat-y fixed top left;
}
body {
background: #ffffff url(/template/images/border_right.gif) repeat-y fixed top right;
}
What happens is the left image shows up just fine. However the right image doesn't show up at all unless I remove the left image.
Is there anything you can see that I'm doing wrong?
html {
margin: 0;
padding: 0;
background: #ffffff url('/template/images/border_left.gif') repeat-y top left;
}
body {
margin: 0;
padding: 0;
background: url('/template/images/border_right.gif') repeat-y top right;
font-family: tahoma, arial, sans-serif;
font-size: 12px;
}
What's happening now is I'm stilling seeing the left border. But on the right the border only extends as far down the page as my content goes.
are you just testing a short page? or are some of your pages likely to be very short? - to be sure they stretch add:
height: 100%; - to the HTML element
min-height: 100%; to the body element
IE6 will not accept the min-height value on the body element but use height: 100% for it .. hang just off to check on the IE6 solution.. or do you need it?
I'm not terribly concerned about IE6. But I know how to test for it and import a stylesheet for it so I'll do that.
I just took a hiccup there as I forgot whether it supported the two backgrounds, HTML & BODY - it does as long as there's a strict rendering Doctype in place, ..and yes the 100% height on the body (via an IE6 only hack or conditional) is the solution for it.
cheers
Suzy
it does as long as there's a strict rendering Doctype in place
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It seems to work fine using the above doctype. :) I need target attributes in many of the links for this project so I'm forced to use this instead of the strict type.
ADDED: Actually, it seems to work fine using height: 100%; for html and body. I've only tested it in Firefox 3.5.2 and IE versions 8, 7 and 6 so far.
100% height on both HTML and Body, while appearing to work initially, won't work if the content is longer than the page height. The right background will cutoff at the bottom of the window instead. Add more content or resize until you get a vertical scroll to see what it does.. only IE6 will incorrectly stretch the 100% height as opposed to overflowing it, acting the same as min-height does for the good browsers :)
