working with columns and a footer in css

January 6, 200917 yr

Hello I bet this is a simple question but I have looked around google and have been unable to find a solution to my template that I am designing. The page looks the way it should at 1024x768 on my thinkpad but when I go to a computer with a larger resolution the footer stays at the bottom of the window like it should but the left navigation column will not repeat and fill the the page to the bottom like it should even though I have the command repeat-y added in the div tag in the html. I have also noted that in IE the overflow command works but in Firefox it does not and adds scroll bars on the page. and extends below the footer.

Here is my CSS:

 /* CSS layout */
body {
margin: 0;
padding: 0;
}

#masthead {
max-width: 600px;
min-height:143px;
margin-left: 105px;
overflow:hidden;
}

#container {
min-width: 600px;
min-height:100%;

}

#left_col {

width: 100px;
float: left;
overflow:hidden;
min-height:600px;


}

#page_content {
margin-left: 110px;
position: relative;


}

#footer {
clear: both;
position: absolute;
min-width: 100%;
bottom: 0;
overflow:hidden;
}

}

Html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<!-- #BeginEditable "doctitle" -->
<title>Phantasm DJ's</title>
<!-- #EndEditable -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<style type="text/css">
<!--
@import url("Untitled_1.css");
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #FFFFFF;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
h1 {
font-size: x-large;
color: #9384AD;
}
.style1 {color: #9384AD}
h2 {
font-size: x-large;
color: #9E80FF;
}
a:link {
color: #9E80FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #9E80FF;
}
a:hover {
text-decoration: underline;
color: #9384AD;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>

<body style="color: #FFFFFF; background-color: #000000">

<div id="left_col" style="background-image: url('leftnavi.jpg'); background-repeat: repeat-y; background-color: #000000; font-family: Arial, Helvetica, sans-serif; color: #FF00FF; ">
<!-- #BeginEditable "Left" -->
<p><a href="index.html">Link 1</a></p>
<!-- #EndEditable -->	</div>

<div id="masthead" style="background-image: url('mastlogo.jpg'); background-color: #000000; background-repeat: no-repeat">
</div>
<div id="container">
<!-- #BeginEditable "PageContent" -->
<div id="page_content">
  <h1><strong>lorem ipsum</strong></h1>
  <blockquote>
    <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa qui officia  deserunt mollit anim id est laborum.<br />
       </p>
     </blockquote>
 </div>
<!-- #EndEditable -->
</div>
<div id="footer" style="color: #000000; background-color: #AFA3BB; font-family: Arial, Helvetica, sans-serif; font-size: larger; font-weight: 400; font-style: normal; text-indent: inherit; vertical-align: middle; text-align: center;">
<div align="center">Book your show today by phone or online. xxx-xxx-xxxx</div>
</div>

</body>

</html>

The website can be found here if you want to see what I am talking about as long as your resoultion is greater than 1024x768.

http://dev.hawknetsolutions.net/template/

I know the html code is messy because it was created in expressions web 2 and dreamweaver cs3 so the style section is messed up. Any help would be appreciated.

Thanks

Brian

January 6, 200917 yr

Hi

To honest I have had a quick look and your site stressed me out...the css in everywhere. I would think it would make much more sense to put the css all in a the separate file.

Anyway, I had a quick look at it's validation; http://validator.w3.org/check?uri=http%3A%...ine&group=0

Although the site does valdate, it gives you a warning.It says this may cause a problem with older browsers etc. Could be the problem?

I'm afraid I don't understand what you need to do about the byte-order-mark :/ but maybe someone else will.....

I will go back and look more closely at your code and see what I can come up with.

Good luck

January 6, 200917 yr

Your left col div has a background colour and image.

Your masthead has too.

You have properties for the same elements both inline (in html) and externally.

I have played around to get all your css in one place and here are the results;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<!-- #BeginEditable "doctitle" -->
<title>Phantasm DJ's</title>
<!-- #EndEditable -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<link rel="stylesheet" type="text/css" href="bh.css" />
</head>



<body >

<div id="left_col" >
<!-- #BeginEditable "Left" -->
<p><a href="index.html">Link 1</a></p>
<!-- #EndEditable --> </div>

<div id="masthead" >
</div>
<div id="container">
<!-- #BeginEditable "PageContent" -->
<div id="page_content">
<h1><strong>lorem ipsum</strong></h1>
<blockquote>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</p>
</blockquote>
</div>
<!-- #EndEditable -->
</div>
<div id="footer" >
<div align="center">Book your show today by phone or online. xxx-xxx-xxxx</div>
</div>

</body>

</html>

and css

/* CSS layout */
body {
margin: 0;
padding: 0;
color: #FFFFFF; 
background-color: #000000
}

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #FFFFFF;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
h1 {
font-size: x-large;
color: #9384AD;
}
.style1 {color: #9384AD}
h2 {
font-size: x-large;
color: #9E80FF;
}
a:link {
color: #9E80FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #9E80FF;
}
a:hover {
text-decoration: underline;
color: #9384AD;
}
a:active {
text-decoration: none;
}
#left_col {
background: url('leftnavi.jpg') repeat-y;
background-color: #000000;
 font-family: Arial, Helvetica, sans-serif; 
 color: #FF00FF; 	
}


#masthead {
background: url('mastlogo.jpg') no-repeat; 
background-color: #000000;
max-width: 600px;
min-height:143px;
margin-left: 105px;
overflow:hidden;
}

#container {
min-width: 600px;
min-height:100%;

}

#left_col {

width: 100px;
float: left;
overflow:hidden;
min-height:600px;


}

#page_content {
margin-left: 110px;
position: relative;


}

#footer {
clear: both;
position: absolute;
min-width: 100%;
bottom: 0;
overflow:hidden;
color: #000000;
background-color: #AFA3BB;
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
font-weight: 400; 
font-style: normal; 
text-indent: inherit; 
vertical-align: middle; 
text-align: center;
}

The html validates now as does the css.

I have taken a screen shot of how it looks with me; is that how you want it?

January 6, 200917 yr

Author

Thanks for helping clean up the code but what I need is the left hand navigation column to repeat down to the footer no matter what size resolution there is on the users computer. So the little black spot between the image and footer is replaced with the image starting over again. I have tried min-height 100% but that doesn't seem to help make it fill the screen.

Thanks

Brian

January 6, 200917 yr

Ok.

If you add to your left col - margin-bottom: 0;

Take out the position: absolute from your footer and add height: 20px; (or bigger if u want) and margin-top: 0;

This gets the two elements butting up together.

Is that any better?

Scrap that; it doesn't work with more text in...they split up again. Sorry.

Is there a reason you chose absolute positioning for the footer? It tends to make elements have minds of their own....

January 6, 200917 yr

Author

Ok.

If you add to your left col - margin-bottom: 0;

Take out the position: absolute from your footer and add height: 20px; (or bigger if u want) and margin-top: 0;

This gets the two elements butting up together.

Is that any better?

Scrap that; it doesn't work with more text in...they split up again. Sorry.

Is there a reason you chose absolute positioning for the footer? It tends to make elements have minds of their own....

the reason I chose absolute positioning was something I found on google for creating footers, like I said before the only CSS I have ever used was for fonts never page layout; but now I need to use CSS since this will be used in Visual Studio for a web application.

EDIT:

The second reason is the website design comes from our paperwork we hand out to clients and the design has a purple footer on each page with that border running down the side. So the idea was to make the page look like the pamphlets and any resolution. So absolute positioning pulled it to the bottom of the window.

January 6, 200917 yr

Hey i think I've got it!

Put the background image of the side bar in the body css instead! It works for me.

My poor brain is slow - sorry.

January 7, 200917 yr

Author

Hey i think I've got it!

Put the background image of the side bar in the body css instead! It works for me.

My poor brain is slow - sorry.

thank you thank you thank you!

I cant believe i didn't think of that too, I was so hung up thinking it needed to be in the column and not the background. Now to just finish photoshopping the images to make them transform to each other. Works great!

Thanks Again

Brian

working with columns and a footer in css

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)