I am having some trouble with a template I am working on, I am a little rusty from not having done this much in two years so hopefully I can find a little help here. Deathshadow helped me with the initial header and sent me this link for what I am trying to do with the footer: http://battletech.hopto.org/html_tutorials/minHeight/template.html
I need the header to stay like it is, and the footer to stretch 100% across the screen, while staying at the very bottom of however large the content area is. I have tried mixing in parts of the template from the link mentioned above. Through messing around with it I have gotten the footer at the bottom but not got it to stretch 100% without messing up the header.
The problem you’re having is you’re sizing the footer according to the image(900px) instead of according to your page width(100%). You deleted the whole section when all you should be deleting is the word #footer.
Would you mind checking out http://thesitemonkey.com/geotrac/ again, I now have an animation on there in the content area. For some reason it is not centered with the footer and header/navbar text, the content is slightly off to the right (at least on my screen). Why might it be doing that?
I was wrong, still having issues. I am trying to create a main content div that is 900px wide with 50px of padding on the left and right, but when I assign such properties it is no longer centered and aligned with my header. Text-align center does not work either. How could I accomplish this? I need the padding for the animation you see, says it requires 100px extra of space. Also, is anyone having any issues with the move/slider, I was told by the client that in some of the slides the words are being cut off but I cannot seem to mimic this problem on any of my machines.
sorry, yes, here is the link http://farrowtechnologyconsulting.com/temp/index.html ; the only difference here is what I have added for the content div in screen.css,
also open to any additional advice or input on things I might be missing to keep the content area clean and in place no matter how much content I put in it. I am going to use this as a template when done, including the header and footer as php includes or something similar.
the reason I had #footer taking that rule was I figured you’d have a wrapper around it for that style, just like the header – since the content INSIDE #footer looked to be constrained the same way as the header and the content…
So just as there’s
<div id=“headerWrapper”><div id=“header”></div></div>
I was thinking
<div id=“footerWrapper”><div id=“footer”></div></div>
So that you have your 100% width for the background, while retaining your fixed width for the inner area… though as we discussed, I’d throw out the fixed width for semi-fluid, though that invalidated a lot of the design concepts for the example pages you showed me.
Though since your just centering that content instead of having left/right stuff, that extra div isn’t needed. (I think the picture you showed me had stuff floated left and right inside the footer…)
Are you able to view the slideshow without anything being clipped off? It looks aligned perfectly for me now but with this particular script, for some reason it said to use 100px to give it room, but after setting to 900px it looks fine for me.
Also, since I have to use a fixed width on the content area, would it matter if I used tables within that div for the different portions of content?
Ok, also, forgot to ask, I have used Helvetica Neue Lt STd for the headings in the different sections on each page, would you suggest using webfonts (webkit) , creating an image for those headings, or not using a font other than basic fonts which obviously are not that appealing when we’re talking about headings?
Crap, back to the earlier issues (should have tried this before asking about the footer moving down with the content), I added a div underneath the animation, but the text for that section gets cut off and the footer is not pushed down to the bottom to make room for the content like it’s supposed to, any idea what might need to be changed? http://thesitemonkey.com/geotrac/
Seemed to have somewhat solved the content moving footer issue, (not sure if it was a missing /div> or float issue), now I am having trouble getting two divs underneath the slider to be on the same line, have been playing with this for an hour now, stuck. http://thesitemonkey.com/geotrac/