Finishing up my first CSS template but one flaw. (Full Version)

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



Message


Valaire -> Finishing up my first CSS template but one flaw. (8/18/2004 16:04:36)

I have a container div that makes the page load centered onto the browser with whitespace margins on the left and right similiar to Yahoo, so that it is more resolution friendly. Within that container div I have two column divs: a linksmenu (left "frame") and a content window (right "frame").

My problem has to do with the fact that my parent div contains the background color for my page. What I basically want to do is assure that the parentframe will draw that background at least to the bottom of a browser's viewport, but ALSO be expandable past it when content in the contentframe is larger then the viewport.

Right now I have it forced to a static height of about 800 pixels to at least give it some dimension while I am still developing the content. However, I know that for a few pages, I will have content that will run right by that 800 pixels and bleed out onto the whitespace below my red background.

Is there an easy way to go about this?

I don't have the example available online at the moment, but if necessary I will post one shortly.

I am, of course, new to CSS design. With a table, the table would grow with the data inside, but I'm not sure how to accomplish this with a table-less design.

Thanks in advance,
Chad




Valaire -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 16:07:10)

This is my CSS code for the three divisions of the page.


<style type="text/css">
#ParentFrame {
	text-align: center;
	padding: 0px;
	margin-top: 15px;
	margin-right: auto;
	margin-left: auto;
	width: 800px;
	background-color: #B60E27;
	height: 850px;
	border: thin solid #000000;
	margin-bottom: auto;
	float: none;
	vertical-align: bottom;
	position: static;
	clip: rect(auto,auto,auto,auto);
	bottom: auto;
}
#LinksFrame {
	width: 180px;
	height: auto;
	padding: 25px 0px 0px;
	float: left;
	text-align: center;
}
#ContentFrame {
	width: 580px;
	height: 620px;
	padding: 0px 0px 0px 12px;
	float: left;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}




c1sissy -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 16:22:29)

Hi Valaire

I'm not familar with frames at this point in my learning with css. I just wanted to jump in here to let you know that someone will come along that will have the information for you and to just hang in. It will be a help to see this online when you get a chance to post it for everyone to see.

Have you tried a google search on this? Sometimes I find that you get a good bit of information through google.

Sorry I'm not able to help, but hang on, I know that someone will be here to help you on this one!




Valaire -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 16:29:59)

I was just using frames liberally, they are just 2 columns that breakdown the layout within a container div. And thanks for the response, and I am of course doing a rabid amount of research. :)

Here is a broken copy of the CSS template. It might be a little hard to follow, but to post the content would require a database connection I don't have setup live right now.

http://www.apxonline.com/test/standard.dwt.asp

Thanks,
Chad




Valaire -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 16:34:10)

The min-height property on the onset looks promising, but I'm not sure if it's applicable and I don't think it's compatable with IE for non-table elements...




Valaire -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 16:49:14)

Hmm... I swear I tried this already but I may have figured it out by setting both the parent and content frames to 100% height. Even the footer seems to be behaving right now, although I'm sure I'll have a few problems with that later on because that seems common.




c1sissy -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 18:18:53)

quote:

ORIGINAL: Valaire

Hmm... I swear I tried this already but I may have figured it out by setting both the parent and content frames to 100% height. Even the footer seems to be behaving right now, although I'm sure I'll have a few problems with that later on because that seems common.


I was going to suggest that to you, but as I stated I"m not familar with the frames and css, so I wasn't sure if it would work the same for frames as it would for non-frames. Thanks for posting the answer though as it will help someone else




Donkey -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 20:00:27)

It could be a bit misleading to describe your layout divs as "frames".
I'm not an expert by any means but I think you should consider the following points,
1) I'm not sure {bottom:auto;} does anything when you have a height of 100% specified.
2) I thought the clip property was for deciding which part of an image shows when it is inside an element that is smaller than itself. You don't appear to be using it with an image. If you were the correct code would be {clip:auto;}.
3) When you are floating divs left inside a container div you need to float the container div left also to make sure that it will stretch to include the inner divs. Also the container div and the inner floating divs need to be {position:relative;}. It might also be worth adding {margin: 0;} (not 0px - the px is redundant because zero is zero whatever measure you use) to the two inner divs.

I hope that helps in a small way.




Valaire -> RE: Finishing up my first CSS template but one flaw. (8/18/2004 21:38:15)

Hmm, actually I have no idea how that clip got set. Think it was magic. I'll check that. All those suggestions I will tweak around. I -think- I have it working right now but I must confess I don't have much CSS knowledge so this will be good to learn.

Yeah and I regretted saying frames, old habits... ;p

Thanks for the suggestions.




Donkey -> RE: Finishing up my first CSS template but one flaw. (8/19/2004 3:12:35)

quote:

Think it was magic.
[:D]You wizards...
Do you have any spells for winning the lottery?




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625