Click to See Complete Forum and Search --> : How would you fix my CSS?


Photo GeekMan
09-05-2006, 10:32 AM
Hello everyone,

I’m a web designer, not programmer, and in the past I've always sent my designs to a web programmer for actual implementation. But now I’m trying to learn how to do it myself for those times when the client can’t afford both a designer and a programmer. Of course, now I'm finally beginning to understand why my “simple” designs have always taken so long to actually deploy!

Shocking, I know. :)

So, I’ve designed what I thought was a simple site for a photography blog and even though I’m a rank amateur with HTML and CSS, I’ve managed to make it valid and look almost exactly the way I wanted… at least in Firefox. There are however, three areas where I need help and after reading through these boards I thought some of you might be able to help me.

You can find the test page here (http://www.dotsonscreen.com/testing/page.html) and the image of what I want it to look like in all browsers (including IE) here (http://www.dotsonscreen.com/testing/photos/Layout-01.jpg) .

1) The Menu – In Firefox the menu is correct but in IE (on PC) it is off the page to the right. How can I fix that?

2) The Main Content Area – Since photographs can be both horizontally and vertically aligned I would love to find a way for the center area to be “elastic” enough to fit both (photos will never be wider than 720px) yet always retain the 10 pixel black border around the content. That includes the text area beneath the photo.

3) The Footer – How can I create a footer, which is supposed to be a black bar 25 pixels tall, which will always be at least 50 pixels beneath the main content area AND/OR at the bottom of the window? So that no matter the viewers screen resolution, whether they have to scroll down or not, there will always be a 25 pixel black bar at the bottom of the screen below the content.

Any and all help would be greatly appreciated. Especially since I’m new to the whole coding process and am having great, though sometimes frustrating, time learning!

Photo GeekMan

Kravvitz
09-05-2006, 10:17 PM
1) Which version(s)?

2) So you want #mainContainer to grow in width depending on the image?

3) This technique is complicated, but it works well: How do you put a footer at the bottom of the window? (http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3)

4) Why are you using XHTML 1.0 Transitional?

Photo GeekMan
09-05-2006, 11:22 PM
Kravvitz --

1) I've actually managed to solve this for IE6 on the PC by adding "right: 0px" to #mainNav. I missed that earlier, my bad! I don't know what it looks like in IE5x or on the Mac yet, but I think it should now be ok.

2) Yes, but with the caveat of always having a 10 pixel black border, just like in the picture.

3) Thanks for the technique, I had actually already tried it but couldn't really get it to work properly. I've put it back in (to the best of my ability) so you can now see it in action here (http://www.dotsonscreen.com/testing/page.html). It looks ALMOST correct in FF (my paragraphs have lost their spacing and you can now scroll down a few pixels to nothing) but looks completely wrong in IE6 on PC. Any assistance would be great.

4) I don't know. It's what was written in on the pages some of my programmers had made for me in the past so I thought that was what I was supposed to use. Is it bad or wrong? If so, what should I be using?