Anyone like a challenge?

bob_visualefx · 03-28-2006, 11:03 AM

Hi Everyone,
I've got one heck of a mess on my hands. This is my first big site and I could really use some help from the more experienced out there. Basically what I am trying to do is replicate this layout using CSS:
LINK
I'd like it to resize with the browser to fit and not have a lot of extra space all around.

I've gotten this far:
LINK
LINK
And I seem to be stuck.

I'd like to use CSS and divs to try to break away from using tables. The real trick is that I need the Flash videos (represented by the big colored square) to resize with the browser and have the other elements fit around it like the original layout image. If I resize the window, some things adjust nicely, while others get all screwed up. Things come out of their divs, change lines, etc. It's really a mess. Is there anyone out there that can provide some advice or help? I could really use it. Someone suggested just paying someone to do it, but I'd really like to learn instead of just forking over the cash. Thanks again for any help.

nasaboy007 · 03-28-2006, 03:45 PM

erm... can u give an exact example of what gets messed up? because when i resize it, everything moves perfectly and the flash resizes, etc. I see nothing "leaving its divs" and such.

bob_visualefx · 03-29-2006, 05:52 AM

If you check it in both FF and IE you'll see some differences. Especially when you resize to something like 800x600 or 1024x768. Usually the footer spills out and blends in with the background.
Someone recommended I add this:

Code:

.container {
   display: table; /*causes the box to enclose its float descendents*/
   width: 90%;
   text-align: left;
   padding: 10px;
   margin: auto;
   background-image: url(images/parch.jpg);
}

And then remove all overflow:auto
That worked great, but then the Flash doesn't resize.

03-28-2006, 11:03 AM	#1 (permalink)
bob_visualefx New Member Join Date: Mar 2006 Posts: 22 0.00 NP$ (Donate)	Anyone like a challenge? Hi Everyone, I've got one heck of a mess on my hands. This is my first big site and I could really use some help from the more experienced out there. Basically what I am trying to do is replicate this layout using CSS: LINK I'd like it to resize with the browser to fit and not have a lot of extra space all around. I've gotten this far: LINK LINK And I seem to be stuck. I'd like to use CSS and divs to try to break away from using tables. The real trick is that I need the Flash videos (represented by the big colored square) to resize with the browser and have the other elements fit around it like the original layout image. If I resize the window, some things adjust nicely, while others get all screwed up. Things come out of their divs, change lines, etc. It's really a mess. Is there anyone out there that can provide some advice or help? I could really use it. Someone suggested just paying someone to do it, but I'd really like to learn instead of just forking over the cash. Thanks again for any help. __________________ -Bob Last edited by bob_visualefx; 04-21-2006 at 08:28 AM.

03-28-2006, 03:45 PM	#2 (permalink)
nasaboy007 Senior Member Join Date: Jul 2005 Location: NJ Posts: 1,112 1,454.30 NP$ (Donate)	erm... can u give an exact example of what gets messed up? because when i resize it, everything moves perfectly and the flash resizes, etc. I see nothing "leaving its divs" and such. __________________ Hacksar.com - Your source for random computer tips and tricks! MySiteMemberships.com - Keep track of your site registration information! Like my post? Rep is appreciated!

03-29-2006, 05:52 AM	#3 (permalink)
bob_visualefx New Member Join Date: Mar 2006 Posts: 22 0.00 NP$ (Donate)	If you check it in both FF and IE you'll see some differences. Especially when you resize to something like 800x600 or 1024x768. Usually the footer spills out and blends in with the background. Someone recommended I add this: Code: .container { display: table; /causes the box to enclose its float descendents/ width: 90%; text-align: left; padding: 10px; margin: auto; background-image: url(images/parch.jpg); } And then remove all overflow:auto That worked great, but then the Flash doesn't resize. __________________ -Bob

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)