Overlapping footer in Dreamweaver?

[Philalbe]

Hi. I'm having an issue with my portfolio site. I created a site a year or so ago as a final assignment in a web design class, but I now continue to use it as a way to show people my work. Originally I used CSS and div tags to create the majority of the site, but I was having an issue with my footer. I assigned a footer by making it a background image with the instruction to allows position at the bottom of the page. Everything was great until a friend told me that my footer was overlapping my thumbnails on the screen of his small macbook. So I went back to the drawing board and recreated the site, using mostly tables and importing slices. So now it looks like a static design with a gray background. I think I would prefer the more fluid CSS design; a full brown background with a footer that adjusts to the screen size. Is there a way I could do this without the footer overlapping the thumbnails or other elements on smaller screens? Thanks in advance for any advice. I apologize if my explanation seems confused or long winded. I'll try to attach a pic of my site so hopefully it makes more sense.

 

[manueld]

Hi. I'm having an issue with my portfolio site. I created a site a year or so ago as a final assignment in a web design class, but I now continue to use it as a way to show people my work. Originally I used CSS and div tags to create the majority of the site, but I was having an issue with my footer. I assigned a footer by making it a background image with the instruction to allows position at the bottom of the page. Everything was great until a friend told me that my footer was overlapping my thumbnails on the screen of his small macbook. So I went back to the drawing board and recreated the site, using mostly tables and importing slices. So now it looks like a static design with a gray background. I think I would prefer the more fluid CSS design; a full brown background with a footer that adjusts to the screen size. Is there a way I could do this without the footer overlapping the thumbnails or other elements on smaller screens? Thanks in advance for any advice. I apologize if my explanation seems confused or long winded. I'll try to attach a pic of my site so hopefully it makes more sense.

Sounds like you were doing a sticky footer that is always at the bottom of the browser window originally. Why not just have the footer be always at the bottom of the content so that no overlap happens?

 

[Philalbe]

Sounds like you were doing a sticky footer that is always at the bottom of the browser window originally. Why not just have the footer be always at the bottom of the content so that no overlap happens?

Hi. Thanks for the quick response. Yes, exactly, the footer was always at the bottom of the window, so on smaller screens overlapping occurred. Is there a specific way to opt for having the footer at the bottom of the content in Dreamweaver (I'm currently using CS4 if that matters)? thanks!

Sincerely,

Phil

 

[manueld]

With your layout, which i assume is left justified, I'd create a two column layout. The html would look something like this:

<div id="container">
<div id="left-column">
content of your left column (logo and navigation)
</div>
<div id="right-column">
your main content
</div>
<div id="footer">
footer information
</div>
</div>

Your CSS would look something like:

#container{
background: (insert the triangle thing on the bottom left corner positioned to the bottom and left)
width:960px;
overflow: hidden;
}
#left-column{
float: left;
width: 300px;
}
#right-column{
float: right;
width: 600px;
}
#footer{
clear: both;
}

This is just the bare minimum..for your layout to work. Hope this helps.

Here's an article on creating a 2 column layout for more info: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

 

[Philalbe]

Wow! Thanks for taking the time to help me. I appreciate the instructions. The way you've laid it out definitely makes sense.

Thanks again.
Sincerely,

Phil

With your layout, which i assume is left justified, I'd create a two column layout. The html would look something like this:

<div id="container">
<div id="left-column">
content of your left column (logo and navigation)
</div>
<div id="right-column">
your main content
</div>
<div id="footer">
footer information
</div>
</div>

e

Your CSS would look something like:



This is just the bare minimum..for your layout to work. Hope this helps.

Here's an article on creating a 2 column layout for more info: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

 

[manueld]

one other thing i would suggest thinking about is for the background to span the full width of the browser rather than being boxed in. I think that would be more improves the aesthetics of the site.

 

[Philalbe]

one other thing i would suggest thinking about is for the background to span the full width of the browser rather than being boxed in. I think that would be more improves the aesthetics of the site.

Hi. Thanks. I agree. That's why I wanted to reinstate the sticky footer; so the brown background could span the browser window, with the footer allows at the bottom.