Link to home
Start Free TrialLog in
Avatar of slegy
slegy

asked on

Element Positioning for Fluid Grid Layout

I'm using Dreamweaver CS6. Customer wants a fluid grid site. Dreamweaver generated the CSS. Homepage almost works, but I'm missing something. Yesterday I couldn't get the "Best of Both Worlds" to maintain it's position. Fixed that by including it in the slideshow container. Now the body of the page is sliding up behind the slideshow on resize. Need help fixing this.

Homepage: http://www.lightningclass.org/test1.asp
It should maintain the proportions that display in full page view.
ilcaLayout.css

PS - still working on correct resolution for the slideshow.
Avatar of David S.
David S.
Flag of United States of America image

Do you never look at web pages on a laptop, tablet, or smartphone? The whole point of a fluid layout is to be able to adapt to different screen sizes (really viewport size, since windows often aren't full screen). These days, due to the wide use of mobile devices, fluid isn't sufficient. "Responsive" is the new way. It builds on top of fluid layout principles to be able to support a wider variety of screen sizes, e.g. from 320px wide to wider than 1920px.

The slideshow is overlapping other content because it effectively has a fixed height and yet it's absolutely positioned and the other elements are being pushed down with a percentage-based top margin. I would suggest giving the slideshow "position:relative" instead of "position:absolute". Then move the "#menu" element inside of "#header" and give "#header" "position:absolute" and "#menu" a top margin. You'd also need to remove the background colors from "#menu" and ".navigation".

One thing that frameworks like Bootstrap and Foundation provide is container elements that have a max-width and within that a 12 column grid. For example you could have a main column that's 6 columns wide and two sidebars which are each 3 columns wide. What's more you can easily make the main content full width for narrower viewports and have the  sidebars drop below.
Avatar of slegy
slegy

ASKER

As I'm sure is apparent, I'm very new to this. I started this several months ago and am just now getting back to it. Was just introduced to bootstrap and will be looking into that. I have made the changes to relative, mostly with success. Why are you saying the background colors need to be removed? That is the look the customer wants.
I'm glad to hear that you're still new to this. Unfortunately there are some people who've been making websites for years and yet haven't developed their skills much beyond yours.

I was saying you'd want to remove the background colors from the nav bar after you moved it to within the "#header" element, since "#header" already has the background color.
Avatar of slegy

ASKER

A couple things. I built the original website for this organization several years ago.  They are now ready to modernize it. May be a bit beyond me. The current site is an .asp site and uses an Access database (I know, really outdated!). It was built with Dreamweaver. The Class secretary does a great deal of the maintenance, though I do all the more difficult stuff. This would be an ideal time to really modernize, but they can't afford a great deal. How does/would Bootstrap correlate with using Dreamweaver and Access? Would we need to start from scratch?

Still working on the sample page. For some reason, the menu doesn't work when moved into the header <div>. Will see how today goes. Thank you for your valuable input.
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of slegy

ASKER

I'm going to have to set this aside for a couple of days, so I'm going to close this. Thank you for all your valuable input. You've been very helpful. I may have another related question I'll submit later.