Thread

Hello,
I am new to EE and a relative novice with css and was hoping someone could point me to the obvious thing I am missing for formatting the top graphic on this page:
http://www.leathermansloop.org

The problem on the page is with the “Leathermans Loop” graphic.  When you resize the page, the image is “submerged” under the right side navigation.  How can I get the image to stay on top?

Thanks for your help and Seasons Greetings!

-Rob

I didn’t study your markup inside and out, just a brief glance, but you have a few options depending on the effect you’re after…

- The fastest and easiest solution would be to provide your main content with either a fixed width or a min-width with your CSS.  Assuming you would like to maintain the fluidity of the page, go with a min-width.  This will allow the page to be fluid up to a certain point and then it won’t allow your “image submerged issue” to even take effect.

- Wrap your header in a div that precedes the main content and side content.  This is a more conventional approach.  The flow of your page layout divs would go something like this…  Open wrapper div, open header div, close header div, open main content div, close main content div, open side div, close side div, close wrapper.  This allows your header to take up the entire top portion on the x axis and main and side content start below it.  Just like a newspaper spread.

- If you want to leave things the way they are and try to use CSS positioning to bring your logo forward on the z axis and your side content back on the z axis, you can try setting the position to relative and z-index to some number that is higher than side content.  Something like this:

position: relative;
z-index: 99;

Hope this points you in the direction you desire.

Stephen -
Thanks for your reply.  I will try the different methods to see which works best and hopefully learn a bit about the markup.
Take care,
Rob

min-width would be the obvious solution; however, you that is not supported by ie6.  Check out this: http://www.webreference.com/programming/min-width/. It might be useful.