CSS background positioning (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

mshin -> CSS background positioning (8/22/2005 13:37:59)

I would like a left side nagivation div which expands with the height of the page-- meaning the height of the page is determined by the content div to the right of the navigation.

What I would like to have is two background images. One positioned at the very top of the navigation div for which use the following CSS: 

ackground: transparent url('images/nav-top.gif') no-repeat top left;


My problem is that I have another background image which I would like to position at the very bottom: 

background: transparent url('images/nav-bottom.gif') no-repeat bottom left;


Can someone give me a suggestion as to how to accomplish this?

I also have another problem, how do you specify that a div should expand the full height of the generated page?

I'm using: 

width: 200px; height: 100%;


but that doesn't seem to expand to the entire height of the page.

[image]local://upfiles/13215/19B59E9C48A44399B203F3D391DA125D.jpg[/image]

One note: The background image nav-bottom.gif is not visible at this quality but notice it is positioned only at 100% the height of the original page before I expand the tree selections.



Tailslide -> RE: CSS background positioning (8/22/2005 14:05:48)

The only way to have a background image expand in a div when there's no content in it is to use the "faux-columns" technique. Have a google - there's lots of explanations on the method.

What you do depends on the structure of your page. If you have two floating divs (main right, smaller left) then I'd put another div around them and attach a background image to that so that it goes all the way down. You'll need to be sure you sort your "clearing" out otherwise the containing div won't expand to encompass the floating ones. Again, Google is your friend on that one!!

If you have a main div with the nav floating left in it then you can put the full width background image in that and it will be as long as its own content and will look like both columns are the same length.



c1sissy -> RE: CSS background positioning (8/23/2005 9:37:22)

Hi if you go to A list aparts site via the following link, there is an excellent article on this that you can read. I suggest printing it so that you can study it better. Hope this helps you out a bit. [;)]
http://alistapart.com/articles/fauxcolumns



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625