Hello,

For my site http://www.ivancash.com, I am having some trouble with the wrapper, the footer, and some other things. My CSS page is available here: http://www.ivancash.com/css/homepage.css

On the About page, (http://www.ivancash.com/about.html) since I used relative postioning, there is a large gap at the bottom

On the http://www.ivancash.com/contact.html Contact Page and the http://www.ivancash.com/links.html Links Page, I am having trouble bringing the footer and the wrapper all the way to the bottom.

Also, there is always a bottom scroll bar present... how can I get rid of that?

I realize these are a lot of questions, but I'd appreciate any help.
Thanks,
Ivan

So, take off the position:relative on #footer - you don't need it anyway. You also need to take off the "height: 100%", again, not needed, not for a footer.

Since you've told it to make the wrapper 100% height, where do you expect the footer to go when it's below the wrapper ??

Put all your content in a single div (inside the #wrapper), follow IT with the footer, then close the #wrapper - which will be 100% of the viewport.

I would also suggest you use an unordered list for your menu and put your text inside proper paragraph tags !

Hi, thanks for your feedback. I took your advice and took the height and positioning commands out of the #footer stylesheet. I checked, and the #footer is within the #wrapper div for all of my HTML pages. Additionally, I made all of the text <p>. I'm curious... what is the benefit of that?

Anyhow, my main problems are still not fixed. If you look at the links listed in my original post, I am still having trouble with the scroll bars, the #wrapper height (getting it to fit in the entire viewpoint). Also, the footer is stil not where I'd like it to be for some of the pages. I'd appreciate any further help, if time promits.

Ivan for the contact and links pages I think the problem is that you used positioning on the links_text div.

Instead of using positioning you can use margins to place the links where you want. By using css positioning you take the div out of the normal flow of the document. As far as the other page elements are concerned the div isn't really there.

Instead of:

#links_text {
position:relative;
text-align:left;
clear: both;
top: 30px;
left: 350px;
}

try:

#links_text {
margin:30px 0 0 350px
text-align:left;
clear: both;
}

The real trick with css layouts is knowing when not to use positioning or floats. Usually it's only necessary in limited amounts.

<hijack>
Congrats on the 5k posts Steve.
</hijack>

Additionally, I made all of the text <p>. I'm curious... what is the benefit of that?

Because it is SEMANTICALLY CORRECT. Would you create any written document w/o proper paragraphs ?? No.. so don't do it on the web either.

<hijack>
Thanks Chris. I hadn't even noticed.

And now back to your regularly scheduled thread
</hijack>

Ivan, have you gotten the footer displaying where you want?

Hi; the footer is actually still rather haphazardous, and also very inconsistant. (all pages proceed http://www.ivancash.com and end in a .html)

On the "about" page, it extends past the wrapper and lies at the very bottom of the page.

On the "links" page, it's in the middle of the wrapper, where's I 'd it to be at the bottom.

On the "contact" page, it's right smack in the middle of my content.

On the "resume" page, I can't see the footer at all.

What I'd like to do...
-get rid of the bottom scroller.

-simply get the wrapper (the white block) to fit the height of the viewpoint (window size), no more or no less (unless, of course, the content needs additional room).

-get the footer to stay at the bottom of the page (whether it's in the wrapper or not does not matter)

THANKS!

PS: in your advice, please reference to which page you're talking about.

You might want to peruse this tutorial:
http://www.communitymx.com/abstract.cfm?cid=BAD95

In order to get rid of the horizontal scrolling you'll have to reduce the width to less than 800px (for 800x600) and less than 100%.

On your Contact page, you have not properly cleared your float. The clearing element (and I would not use a <div>) has to come BEFORE the #footer and AFTER #contact_text's closing </div>

This is a much cleaner solution to the clearing element:
.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
then put in <br class="brclear> before #footer.

Thanks for your reply.

Unfortunately, I still have a couple more questions.
a) I don't understand why I can't have 800 px and still get rid of horizontal scrolling. I've used huge moniters, and I stretch the page out all the way, and it still has the horizontal scroll.

b) I was unable to fix my contact page, despite doing what you advised.

c) On the "about" page, the horizontal white space goes unneccessarily far past the content. I'd like to change that. I think it's due to relative positioning. Do I need to somehow clear it?

thanks!

Ivan for a) I think you just need to take the 100% width off the body.

For b) the problem is with #contact_text. You don't need the relative positioning on this. When you use css positioning on an element you take that element out of the normal document flow.

What that means is that #links_text responds as though #contact_text isn't part of the document. That's what it ends up displaying too high on the page and in the middle the content inside of #contact_text.

Take the relative positioning off of #contact_text and replace top and left with margins instead.

You generally want to keep most elements in the normal document flow. The trick really is knowing the one or two elements on the page you may want to use positioning on, but the majority of elements won't need it at all.

I'm not quite sure what's causing c). I suspect it's either the 100% height you're trying to achieve or all the positioning and clearing that's going on. Looking at the code you're using a lot more positioning and floating than you need. In fact you often have both on the same element. It's one or the other. You can't position and float the same element.

By the way though I didn't go to school at Geneseo I did spend quite a few years in the SUNY system. I have degrees from both Oneonta and Buffalo and spent time at a few other SUNY schools on the occasional weekend.

thanks vangogh!

I took and applied all of your advice. Thanks! I appreciate you taking the time to help me out.

2 very quick unsolved problems:

-on the "about" page, I realized that the relative positioning was causing the extra white space problem. Unfortunately, using absolute positioning—while it did cure the white space problem—left me unable to move the text where I want it. When I preview it using "CSSEdit" it looks fine, but on the browser, it's waayyy below where it should be. How can I raise it up?

-The footer on the Links And Contact page should be at the very bottom of the wrapper. How can I achieve this?

THANKS!

This isn't necessarily the best fix for the 'about' page, but it worked for me in Firefox.

#aboutimage {
margin-top: 10px;
margin-left:-100px;
padding: 0px;
float: left;
}

#about_text {
font-size:small;
width: 350px;
margin-left: 370px;
padding-top:45px;
}


Floating the image took it out of the document flow which works in this case. Sometimes you do want to take things out of the flow. The margins and paddings I added were just to line things up where I think you want, but you shouldn't need the negative margin in this layout.

With the links and contact page there are probably better ways to do this, but I took off the clear: both and added

position:absolute;
bottom:0

to the footer and again it worked in Firefox. I didn't test in IE though so it might not look quite the same in either.

Hey Steve,

I positioned the image on the About page, and that works just dandy! THANKS!

As for the footer, I tried what you suggested as well as tried this: http://www.themaninblue.com/writing/...ve/2005/08/29/

Unfortunately, neither of these approaches worked. Any other suggestions?

Thanks again,

Ivan

also, I'm trying to get rid of the white space below my javascript on the index page. So that the grey starts immediately below the image (javascript). Any ideas?

Cheers

The whitespace below the javascript is because of the min-height:95% on the wrapper. If you remove it the footer will jump up just below the images.

It's part of the reason why I don't like trying to go after a 100% height kind of thing. It usually only works the way you want in certain circumstances.

Keep in mind if you move that min-height on the wrapper then the extra space will go away on all your pages. To me that works well and it will help solve the footer issue since you won't need to push it further down the page, but it's obviously your choice since it's your site.

You could always set the wrapper css differently for the home page if you want too.