Needing help with CSS

obelix · Dec 21, 2005, 08:05 PM

http://www.obelix.ca/zeroone/beauty/index4.html

The link above shows what I'm trying to do. Basically I need 2 headers at the top of the page, a main content area that contains 3 boxes that need to be able to expand dynamically, and 2 footer elements.

I can't seem to get the boxes in the middle to fit inside the enclosing container. The enclosing container is "supportingText" and it won't even appear unless I hardset the height... I would like this section to expand dynamically as the boxes expand. Any ways this is possible?

Your help is much appreciated!

bobber205 · Dec 21, 2005, 08:26 PM

Good for you! All of your coding seems to be done in hand.
I'm always happy to see that.

As for growing a box dynamically, I would access the <div>'s style.width and height properties with Javascript.

Make sure and don't forget to use document.getElementById.

But all and all, a well done page.
Good luck.

obelix · Dec 21, 2005, 08:32 PM

I'd really rather stay away from JS is there any other way this can be done? It always seems like doing a straight CSS design is infinitely harder than doing it with tables... (sigh)

bobber205 · Dec 21, 2005, 08:37 PM

I don't know why you don't want to use JS.
Super easy. And this will take about 1 minute to code.

And table designs are BAD!

And how did you dynamically change the table's values?

obelix · Dec 21, 2005, 08:43 PM

I don't want to use JS because its not always enabled on all browsers and in the case that it is disabled I'd still like the site to be viewable. Also I'm not sure how JS could be used to correct this problem (any code samples?)

Right now the tables values do not dynamically change... that is the problem. The gray area with the background is a hard-set value at 200px and although it sort of work in IE in Firefox and Safari the result is terrible. The box that says "content left" should not be extending past the bottom of the gray background.

bobber205 · Dec 21, 2005, 08:50 PM

Code:

var cssBox = document.getElementById("mybox");

cssBox.style.width = "100px";

That should get you started. And mybox should be whatever the "id" attribute in your <div> tags are.

Good luck.

Dec 21, 2005, 08:05 PM	#1
obelix macrumors member Join Date: Oct 2004	Needing help with CSS http://www.obelix.ca/zeroone/beauty/index4.html The link above shows what I'm trying to do. Basically I need 2 headers at the top of the page, a main content area that contains 3 boxes that need to be able to expand dynamically, and 2 footer elements. I can't seem to get the boxes in the middle to fit inside the enclosing container. The enclosing container is "supportingText" and it won't even appear unless I hardset the height... I would like this section to expand dynamically as the boxes expand. Any ways this is possible? Your help is much appreciated!

Dec 21, 2005, 08:26 PM	#2
bobber205 macrumors 68020 Join Date: Nov 2005 Location: Oregon	Nice Good for you! All of your coding seems to be done in hand. I'm always happy to see that. As for growing a box dynamically, I would access the <div>'s style.width and height properties with Javascript. Make sure and don't forget to use document.getElementById. But all and all, a well done page. Good luck.

Dec 21, 2005, 08:50 PM	#6
bobber205 macrumors 68020 Join Date: Nov 2005 Location: Oregon	Code: var cssBox = document.getElementById("mybox"); cssBox.style.width = "100px"; That should get you started. And mybox should be whatever the "id" attribute in your <div> tags are. Good luck.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Dec 21, 2005, 08:32 PM	#3
obelix Thread Starter macrumors member Join Date: Oct 2004	I'd really rather stay away from JS is there any other way this can be done? It always seems like doing a straight CSS design is infinitely harder than doing it with tables... (sigh)

Dec 21, 2005, 08:37 PM	#4
bobber205 macrumors 68020 Join Date: Nov 2005 Location: Oregon	I don't know why you don't want to use JS. Super easy. And this will take about 1 minute to code. And table designs are BAD! And how did you dynamically change the table's values?

Dec 21, 2005, 08:43 PM	#5
obelix Thread Starter macrumors member Join Date: Oct 2004	I don't want to use JS because its not always enabled on all browsers and in the case that it is disabled I'd still like the site to be viewable. Also I'm not sure how JS could be used to correct this problem (any code samples?) Right now the tables values do not dynamically change... that is the problem. The gray area with the background is a hard-set value at 200px and although it sort of work in IE in Firefox and Safari the result is terrible. The box that says "content left" should not be extending past the bottom of the gray background.