6 replies to this topic

[Silwolffe]

I’m going to try and explain my issue as succinct as I possibly can. Basically, I want to try and make my webpage’s height conform to that of the user’s screen resolution by default. My web-site is comprised of seven key areas. The logo, navbar, header, content area, two side bars, and footer (Image of layout is displayed below). I would like to have the content area and side bars stretch down and meet the footer at the bottom of the page. That way, no unsightly ‘white-space’ is compromising the website’s layout. I tried messing around with CSS but I have yet to figure out a way in which for me to meet my expectation.

This picture below is the layout loaded up in a browser. I use Macromedia’s Dreamweaver program to assist me in my website endeavors. But that doesn’t mean I’m completely illiterate in HTML and CSS design, I’m just not fluent with it yet as the entire web-scene is new to me.

If anyone can simply tell me the concepts in which I need to understand in order to meet my expectation, please state them. Any help on this subject is appreciated, and if I haven’t fully explained myself then please lay one on me.

Edited by Silwolffe, 07 July 2005 - 06:41 PM.

[coolaid]

unfortunatly, you cant make anything strech in height using perctangages. the way around this would be to create a background image that has the two side bars and the middle conent bar. use css to align the background in the center and to only repeat verically.
im not exactly shure on how the code to this is so using w3schools.com will help.

also, the easiest way to ge past this is just to add a bar for a footer and place it below the menus' & content to clear everything and so it looks like your layout doesnt just cut off.

[greg]

To center a backgrond image and repeat it vertically, write this in your CSS:

body {
background: url(directory) repeat-y center;
}

Replace "directory" with your image's directory, such as "/images/bg.gif."

Edited by greg, 07 July 2005 - 07:25 PM.

[Jaymz]

coolaid, on Jul 7 2005, 09:13 PM, said:

unfortunatly, you cant make anything strech in height using perctangages.

I'm sorry, but yeah you can assign % values for height

<table width="750" height="100%">

Makes it go right to the bottom of the browser

[Silwolffe]

That's what I'm trying to do; I'm trying to make it so an image, in this case footer.jpg, is the image at the bottom of the webpage (diminishing the cut-off point).

I'll upload a bare-structure of my website as I don't think I'm explaining myself all too well, and have you look at the entire orientation as well as the small code I've put behind it so far.

http://www.massdivis...com/layout.html



This is the footer that I wish to be at the bottom position accompanied by the left and right navmenu_footer.jpg images.

And, come to think if it, I will probably re-slice my layout once I finish adding in the context menu for the links.

Sorry if I'm confusing, I'm trying to explain this in the best possible way as far as my literacy goes.

EDIT: There's already a background image in place in my CSS Style file.
body {
background-image: url(images/background.jpg);
background-repeat: repeat;
}

Edited by Silwolffe, 07 July 2005 - 07:34 PM.

[Jaymz]

Set the main table's height to 100%, then give every cell a fixed height except the one that you want to expand, and that cell will fill in the missing height

[Silwolffe]

Thank you very much for all your help. The design works flawlessly now.

*bounces around happily*