...

View Full Version : Another variation of a common problem.



YaymeQ
03-12-2009, 06:14 AM
Hello guys! I've been trying to upgrade a site with tabular layout to css. It's only got two columns, a header and a footer. It SHOULD be easy. My navigation div is sometimes longer than my content div and sometimes not. I'm trying to get them both to go all the way down to the footer div so that you can resize the text without it breaking. I read the other topics about this but I guess I'm missing something. I think I understand how the "push" div works ... but when I add it to my code, my content div goes wacky. The background disappears but only partially.I wish I could provide a link but it's not up yet. If you need the html let me know, as you can see from looking at the image, it's not a complex site.

Uhm .... I was going to attach a photo but I can't figure out how ...


* {
margin:0;
padding:0;
}
html{
border: 0;
color: #000;
background: url("images/misc/background.jpg") no-repeat;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
}
#wrapper {
margin:0 auto;
width:922px;
min-height:100%;
height: auto !important;
height: 100%;
}
#header {
background:#c19200 url(images/misc/pwsologo.gif) no-repeat 10px 10px;
border:1px solid #CCCCCC;
color:#333333;
float:left;
min-height: 160px;
margin:10px 0 0 0;
padding:10px;
width:900px;
text-align:right;
}
#navigation {
background:#036 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
float:left;
margin:0;
height:100%;
padding:0px;
width:120px;
}
#content {
background:#F2F2E6 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
display:inline;
margin:0 0 0 0;
padding:10px;
width:778px;
}
#footer {
background:#c19200 none repeat scroll 0 0;
border:1px solid #CCCCCC;
clear:both;
color:#333333;
margin:0 0 10px 0;
padding:10px;
width:900px;
}

#push{
clear: both;
background:none; /* this I have added, and taken off, to no effect either way */
}

_Aerospace_Eng_
03-12-2009, 07:25 AM
CSS is pointless without HTML.

Fisher
03-12-2009, 08:03 AM
I've finally got this working on a regular basis now. I too struggled with it.

Give your #wrapper a repeating background of what you want it to look like.

In your example, it would be a gif of 1px x 900px wide where the first 120 pixels are the colour of your nav and the remaining 780px is the colour of your content.

Then add this property for example:

#wrapper {background:url(images/wholebackground.gif) repeat-y;}

YaymeQ
03-12-2009, 10:31 PM
So why can't you just use the color of the content as the color of the wrapper?

Excavator
03-12-2009, 11:02 PM
So why can't you just use the color of the content as the color of the wrapper?

You can, if that's your shortest column. When it's longer though, the nav column color will not reach the footer.
Have a look at faux columns example here - http://nopeople.com/CSS/faux_columns/index.html - that's the method Fisher is referring to.
You can easily adapt this to a full height layout like this - http://nopeople.com/CSS/full-height-3column/index.html -when you view the source of that, have a look at the background image that does it.

If you still have trouble, post back with current versions of both CSS and HTML.

YaymeQ
03-13-2009, 12:01 AM
http://fc47.deviantart.com/fs45/i/2009/071/2/8/not_really_a_deviation_sorry_by_YaymeQ.png
That's what happens when there is no background specified for wrapper. Obviously not what I want.

http://fc05.deviantart.com/fs43/i/2009/071/e/3/another_fake_deviation_by_YaymeQ.png

This is what happens when there is a background, although it seems better, you might notice the little blue lines behind the sponsors images and the little cream colored box in the lower left. Those are there with or without the background. I don't even know what it is.
EDIT: I actually got rid of the little square box, but the two long ones are still there. The little one was an empty image I hadn't placed yet.
the css

* {
margin:0;
padding:0;
}
html{
border: 0;
color: #000;
background: url("images/misc/background.jpg") no-repeat;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
}
#wrapper {
margin:0 auto;
width:922px;
min-height:100%;
height: auto !important;
height: 100%;
background: url(images/misc/wholebackground.jpg) repeat-y;
}
#header {
background:#c19200 url(images/misc/pwsologo.gif) no-repeat 10px 10px;
border:1px solid #CCCCCC;
color:#333333;
float:left;
min-height: 160px;
margin:10px 0 0 0;
padding:10px;
width:900px;
text-align:right;
}
#navigation {
background:#036 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
float:left;
margin:0;
height:100%;
padding:0px;
width:120px;
}
#content {
background:#F2F2E6 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
display:inline;
margin:0 0 0 0;
padding:10px;
width:778px;
}
#footer {
background:#c19200 none repeat scroll 0 0;
border:1px solid #CCCCCC;
clear:both;
color:#333333;
margin:0 0 10px;
padding:10px;
width:900px;
}

#push{
clear: both;
background:none;

}

and the html



<!Doctype HTML public "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">



<html>

<head>

<title>Prince William Symphony Orchestra</title>

<Link rel="stylesheet" type="text/css" href="trial.css">



</head>

<body>

<div id="wrapper">

<div id="header">

<h1>Prince William Symphony Orchestra<br> Prince William Baroque</h1><h2>David Montgomery, Music Director</h2> <h3>Celebrating 36 Years of service to Northern Virginia</h3>

</div>

<div id="navigation">



<ul>

<li><a href="index.html">Home</a></li>

<li><a href="aboutus.html">About Us</a></li>

<li><a href="concerts.html">Concerts</a></li>

<li><a href="tickets.html">Tickets</a></li>

<li><a href="maps.html">Maps</a></li>

<li><a href="education.html">Education</a></li>

<li><a href="youngartist.html">Young Artist <br> Competition</a></li>

<li><a href="sponsers.html">Sponsers</a></li>

<li><a href="advirtising.html">Advertising</a></li>

<li><a href="giving.html">Giving</a></li>

<li><a href="volunteers.html">Volunteers</a></li>

<li><a href="musicdirector.html">Music Director</a></li>

<li><a href="boardofdirectors.html">Board of Directors</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="audion.html">Audio</a></li>

</ul>

</div>

<div id="content">

<img src="images/content/indeximage.JPG" alt="A picture of the orchestra"> <br>

<img src="images/sponserlogos/manassaslogo.jpg" alt="">

<img src="images/sponserlogos/insightwealthlogo.jpg" alt="">

<img src="images/sponserlogos/lockheedlogo.gif" alt="">

<img src="images/sponserlogos/artscouncillogo.jpg" alt="">

<img src="images/sponserlogos/noveclogo.jpg" alt="">

<img src="images/sponserlogos/vcalogowithcolor.JPG" alt="">

<img src="images/sponserlogos/" alt="">

<img src="images/sponserlogos/" alt="">

<img src="images/sponserlogos/" alt="">

</div>



<div id="footer">

<p>

<a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="concerts.html">Concerts</a> | <a href="tickets.html">Tickets</a> | <a href="maps.html">Maps</a> | <a href="education.html">Education</a> | <a href="youngartist.html">Young Artist Competition</a> | <a href="sponsers.html">Sponsers</a> | <a href="advirtising.html">Advertising</a> | <a href="giving.html">Giving</a> | <a href="volunteers.html">Volunteers</a> | <a href="musicdirector.html">Music Director</a> | <a href="boardofdirectors.html">Board of Directors</a> | <a href="contact.html">Contact</a> | <a href="audion.html">Audio</a>

</p><p>

Copyright 2008 Prince William Symphony. All Rights Reserved.</P>

</div>

<div id="push">

<!-- I'm using this div to push the navigation all the way down to the footer. -->

</div>

</div>

</body>

</html>

I tried to keep it simple...

Fisher
03-13-2009, 02:43 AM
Without an actual link to your site, or at least including width and height attributes in your image tags, I can't replicate your site completely.

However, there are a couple of things I noticed. Firstly, your footer is before the push in your code. It should be completely outside your wrapper.

Secondly, I don't understand why you're making the wrapper 922px wide, then padding everything by 10px. Make everything either 922px or 900px wide. You can add internal margins to the divs if you want to move the content over.

Here's a touchup of your code:
CSS:

* {
margin:0;
padding:0;
}
html {
color: #000;
background: url("images/misc/background.jpg") no-repeat;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
#wrapper {
margin:0 auto;
width:900px;
min-height:100%;
height: auto !important;
height: 100%;
background: url(images/misc/wholebackground.jpg) repeat-y;
}
#header {
background:#c19200 url(images/misc/pwsologo.gif) no-repeat 10px 10px;
border:1px solid #CCC;
color:#333;
float:left;
height: 160px;
width:900px;
text-align:right;
}
#navigation {
background:#036 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
float:left;
height:100%;
width:120px;
}
#content {
background:#F2F2E6 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
display:inline;
width:778px;
}
#footer {
background:#c19200;
border:1px solid #CCC;
color:#333;
margin:0 auto;
width:900px;
}
#push {
clear: both;
background:none;
}
#navigation ul {
list-style-type:none;
}


xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prince William Symphony Orchestra</title>
<link rel="stylesheet" type="text/css" href="trial.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Prince William Symphony Orchestra<br />
Prince William Baroque</h1>
<h2>David Montgomery, Music Director</h2>
<h3>Celebrating 36 Years of service to Northern Virginia</h3>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="concerts.html">Concerts</a></li>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="maps.html">Maps</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="youngartist.html">Young Artist <br />
Competition</a></li>
<li><a href="sponsers.html">Sponsers</a></li>
<li><a href="advirtising.html">Advertising</a></li>
<li><a href="giving.html">Giving</a></li>
<li><a href="volunteers.html">Volunteers</a></li>
<li><a href="musicdirector.html">Music Director</a></li>
<li><a href="boardofdirectors.html">Board of Directors</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="audion.html">Audio</a></li>
</ul>
</div>
<div id="content"> <img src="images/content/indeximage.JPG" alt="A picture of the orchestra" /> <br />
<img src="images/sponserlogos/manassaslogo.jpg" alt="" /> <img src="images/sponserlogos/insightwealthlogo.jpg" alt="" /> <img src="images/sponserlogos/lockheedlogo.gif" alt="" /> <img src="images/sponserlogos/artscouncillogo.jpg" alt="" /> <img src="images/sponserlogos/noveclogo.jpg" alt="" /> <img src="images/sponserlogos/vcalogowithcolor.JPG" alt="" /> <img src="images/sponserlogos/" alt="" /> <img src="images/sponserlogos/" alt="" /> <img src="images/sponserlogos/" alt="" /> </div>
<div id="push">
<!-- I'm using this div to push the navigation all the way down to the footer. -->
</div>
</div>
<div id="footer">
<p> <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="concerts.html">Concerts</a> | <a href="tickets.html">Tickets</a> | <a href="maps.html">Maps</a> | <a href="education.html">Education</a> | <a href="youngartist.html">Young Artist Competition</a> | <a href="sponsers.html">Sponsers</a> | <a href="advirtising.html">Advertising</a> | <a href="giving.html">Giving</a> | <a href="volunteers.html">Volunteers</a> | <a href="musicdirector.html">Music Director</a> | <a href="boardofdirectors.html">Board of Directors</a> | <a href="contact.html">Contact</a> | <a href="audion.html">Audio</a> </p>
<p> Copyright 2008 Prince William Symphony. All Rights Reserved.</p>
</div>
</body>
</html>

YaymeQ
03-13-2009, 04:43 PM
Well I did everything you said, added width and height attributes to my images (as well as alt) put my footer outside the wrapper and changed everything to 900px. I also went to w3 to check if it was valid and for the most part it is, both the html and the css. It looks exactly the same. The only thing that I can really see that might be causing it is when I look at firebug it tells me the area that I'm having trouble with is my content div, as in ... that's the whole div. But all the images are part of my content so that shouldn't be. The images aren't positioned absolutely or floating the only thing besides img tags is one line break and some padding.
Here is the updated html and css:

Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Prince William Symphony Orchestra</title>

<Link rel="stylesheet" type="text/css" href="trial.css" />



</head>

<body>

<div id="wrapper">

<div id="header">

<h1>Prince William Symphony Orchestra<br /> Prince William Baroque</h1><h2>David Montgomery, Music Director</h2> <h3>Celebrating 36 Years of service to Northern Virginia</h3>

</div>

<div id="navigation">



<ul>

<li><a href="index.html">Home</a></li>

<li><a href="aboutus.html">About Us</a></li>

<li><a href="concerts.html">Concerts</a></li>

<li><a href="tickets.html">Tickets</a></li>

<li><a href="maps.html">Maps</a></li>

<li><a href="education.html">Education</a></li>

<li><a href="youngartist.html">Young Artist <br /> Competition</a></li>

<li><a href="sponsers.html">Sponsers</a></li>

<li><a href="advirtising.html">Advertising</a></li>

<li><a href="giving.html">Giving</a></li>

<li><a href="volunteers.html">Volunteers</a></li>

<li><a href="musicdirector.html">Music Director</a></li>

<li><a href="boardofdirectors.html">Board of Directors</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="audion.html">Audio</a></li>

</ul>

</div>

<div id="content">

<img src="images/content/indeximage.JPG" alt="A picture of the orchestra" width="662px" height="316px" /> <br />

<img src="images/sponserlogos/manassaslogo.jpg" alt="Sponsor: City of Manassas" width="49px" height="50px" />

<img src="images/sponserlogos/insightwealthlogo.jpg" alt="Sponsor: Insight Wealth"width="89px" height="34px" />

<img src="images/sponserlogos/lockheedlogo.gif" alt="Sponsor: Lockheed Martin" width="133px" height="36px" />

<img src="images/sponserlogos/artscouncillogo.jpg" alt="Sponsor: Arts Council" width="129px" height="43px" />

<img src="images/sponserlogos/noveclogo.jpg" alt="Sponsor: Novec" width="100px" height="42px" />

<img src="images/sponserlogos/vcalogowithcolor.JPG" alt="Sponsor: VCA" width="134px" height="45px" />

</div>





<div id="push">

<!-- I'm using this div to push the navigation all the way down to the footer. -->

</div>

</div>

<div id="footer">

<p><a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="concerts.html">Concerts</a> | <a href="tickets.html">Tickets</a> | <a href="maps.html">Maps</a> | <a href="education.html">Education</a> | <a href="youngartist.html">Young Artist Competition</a> | <a href="sponsers.html">Sponsers</a> | <a href="advirtising.html">Advertising</a> | <a href="giving.html">Giving</a> | <a href="volunteers.html">Volunteers</a> | <a href="musicdirector.html">Music Director</a> | <a href="boardofdirectors.html">Board of Directors</a> | <a href="contact.html">Contact</a> | <a href="audion.html">Audio</a></p>

<p>Copyright 2008 Prince William Symphony. All Rights Reserved.</P>

</div>

</body>

</html>

Css:
* {
margin:0;
padding:0;
}
html{
border: 0;
color: #000;
background: url("images/misc/background.jpg") no-repeat;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
}
#wrapper {
margin:auto ;
margin-top:10px;
width:900px;
min-height:100%;
height: auto !important;
height: 100%;
background: url(images/misc/wholebackground.jpg) repeat-y;
}
#header {
background:#c19200 url(images/misc/pwsologo.gif) no-repeat 10px 10px;
border:1px solid #CCCCCC;
color:#333333;
float:left;
min-height: 180px;
margin:0;
width:900px;
text-align:right;
}
#navigation {
background:#036 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
float:left;
margin:0;
height:100%;
width:120px;
}
#content {
background:#F2F2E6 none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
display:inline;
width:778px;
}
#footer {
background:#c19200 none repeat scroll 0 0;
border:1px solid #CCCCCC;
clear:both;
color:#333333;
margin:auto;
width:900px;
}

#push{
clear: both;
background:none;

}
ul li {
color: #FFF;
list-style-type:none;
height:2.5em;
width: 100%;
border:1px solid white;
text-align:center;
margin:0;
padding:0;
}
ul li a{
color: #FFF;
list-style-type:none;
}
ul li a:hover{
background-color:#FFF;
color:rgb(0,0,0);
}

h1{
font-size:2.2em;
}
h2{
font-size:1.6em;
}
h3{
font-size:1.2em;
color:#FFF;
}

img{
padding:10px;
}

And thank you so much for the help you've already provided

Fisher
03-13-2009, 05:41 PM
That's your background and border showing.

Try this CSS: You'll probably want to change a couple of colours back.

* {
margin:0;
padding:0;
}
html {
border: 0;
color: #000;
background: url("images/misc/background.jpg") no-repeat;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
#wrapper {
margin:0 auto -80px;
width:900px;
min-height:100%;
height: auto !important;
height: 100%;
background: url(images/misc/wholebackground.jpg) repeat-y;
border-left:1px solid #000;
border-right:1px solid #000;
}
#header {
background:#c19200 url(images/misc/pwsologo.gif) no-repeat 10px 10px;
color:#333;
height: 180px;
width:900px;
text-align:right;
}
#navigation {
background:#036;
color:#333;
float:left;
height:100%;
width:120px;
}
#content {
background:#F2F2E6;
color:#333;
float:left;
width:780px;
}
#footer {
background:#c19200;
clear:both;
color:#333;
margin:auto;
width:900px;
height:80px;
}
#push {
clear: both;
background:none;
}
ul li {
color: #FFF;
list-style-type:none;
height:2.5em;
width: 118px;
border:1px solid white;
text-align:center;
}
ul li a {
color: #FFF;
list-style-type:none;
}
ul li a:hover {
background-color:#FFF;
color:rgb(0,0,0);
}
h1 {
font-size:2.2em;
}
h2 {
font-size:1.6em;
}
h3 {
font-size:1.2em;
color:#FFF;
}
img {
padding:10px;
}

YaymeQ
03-13-2009, 11:11 PM
Well, everything's perfect now, thank you very much! But if you don't mind my asking why is there a -80px margin on the wrapper?

Excavator
03-14-2009, 12:51 AM
Well, everything's perfect now, thank you very much! But if you don't mind my asking why is there a -80px margin on the wrapper?

That's to make room for your #push when there is enough content to push the footer down below the bottom of the viewport.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum