asked on

Using CSS to Style Dynamic Content on Website

I am trying to create a website that is styled using DIVs.

The header and footer seem to be working ok. The problem is that the content div cannot be scrolled down. It is just cut off at the end and the footer placed on top of it.

Suggestions would be greatly appreciated.

<div class="main">
                <div class="header">
                    ...header code
                </div>
                <div class="content">
                    ...this html is dynamic
                </div>
                <div class="footer">
                    <p>footer text</p>
                </div>
</div>
 
 
 
CSS Classes:
 
 
body
{
	margin: 0;
	padding: 0;
	height: 100%;
	overflow:auto;
}
html
{
	height: 100%;
	overflow: hidden;
}
#bg 
{
	position:fixed; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%;
}
.header
{
	z-index: 100;
	background-color: #303030;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 40px;
	clear: both;
}
.main
{
	z-index: 100;
	background-image: url('/Images/background.gif');
	background-repeat: repeat-x;
	position: relative;
	top: 0;
	left:0;
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	color: #FFFFFF;
}
.content
{
	z-index: 101;
	position: absolute;
	top: 41px;
}
.footer
{
	z-index: 100;
	position: absolute;
	bottom: 0;
	right: 45%;	
}
.footer p
{
	margin: 0;
	padding: 0;
	font-family: verdana;
	color: #808080;
	font-weight: bold;
	text-align: center;
	font-size: x-small;
	text-decoration: none;
}
.footer p a:link 
{ 
	color: #808080;
	text-decoration: none;
}
.footer p a:visited 
{ 
	color: #808080;
	text-decoration: none;
}
.footer p a:hover
{
	color: #808080;
	text-decoration: underline;
	font-weight: bold;
}
.footer p a:active 
{ 
	color: #808080;
	text-decoration: none;
}

Open in new window

Disaster.gif

jasemhi

Seany84- your overflow:hidden; is causing it. Try removing it:

html
{
        height: 100%;
        /* overflow: hidden; */
}

Open in new window

Seany84

ASKER

Thanks for that but now I get a huge white space with the content still being chopped off.
Also, the background gradient image is not stretching the full height of the scrollable window.
Disaster2.gif

David S.

Add the following rule. What it does is reset the height to auto in browsers other than IE5-6/Win.

html>body .main {
  height: auto;
}

Open in new window

Seany84

ASKER

I added that class in but it had no effect at all.

jasemhi

Seany84- can you upload your gradient background image so I can test it on my end? What browser(s) are you testing in?

I've cleaned up your CSS a bit (not sure what a lot of your positioning and z-indexing was for). Hopefully this give you what you are looking for.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body
{
        margin: 0;
        padding: 0;
        height: 100%;
}
html
{
        height: 100%;
}
#bg 
{
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%;
}
.header
{
        background-color: #303030;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 40px;
}
.main
{
        background-image: url('/Images/background.gif');
        background-repeat: repeat-x;
        margin: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        1color: #FFFFFF;
}
.content
{
}
.footer
{
}
.clear {
	clear: both;
}
.footer p
{
        margin: 0;
        padding: 0;
        font-family: verdana;
        color: #808080;
        font-weight: bold;
        text-align: center;
        font-size: x-small;
        text-decoration: none;
}
.footer p a:link 
{ 
        color: #808080;
        text-decoration: none;
}
.footer p a:visited 
{ 
        color: #808080;
        text-decoration: none;
}
.footer p a:hover
{
        color: #808080;
        text-decoration: underline;
        font-weight: bold;
}
.footer p a:active 
{ 
        color: #808080;
        text-decoration: none;
}
</style>
</head>
 
<body>
 
<div class="main">
                <div class="header">
                    ...header code
                </div>
                
                <div class="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque metus diam, ultricies quis, suscipit a, ultricies nec, lacus. Quisque fermentum placerat felis. Sed elementum. Proin non quam. Mauris consequat, nisi ac sodales pulvinar, est felis venenatis augue, in dignissim mauris tortor vitae justo. Aenean bibendum varius mauris. Integer at diam. Cras porta nunc sit amet augue. Etiam eleifend. Cras posuere pulvinar mi. Donec fermentum. Etiam egestas ligula. Morbi leo lacus, lobortis tincidunt, imperdiet sed, cursus ut, metus. Quisque suscipit interdum augue. </p>
 
<p>Ut luctus. Etiam sollicitudin. Vestibulum molestie auctor tortor. Donec vulputate ipsum non quam. Vivamus est lacus, dignissim ac, semper in, placerat non, arcu. Donec pulvinar. Mauris laoreet. Donec elementum placerat leo. Maecenas placerat, diam vestibulum lobortis venenatis, sem diam molestie risus, porta sodales mauris est a metus. Sed iaculis pellentesque lorem. Duis accumsan. Donec elit. </p>
 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut facilisis. Cras pulvinar mauris et diam. Nullam elit nulla, luctus quis, venenatis vel, porta in, massa. Morbi lacinia orci et est porttitor dignissim. Fusce eleifend egestas tortor. Maecenas euismod suscipit arcu. Nunc ultrices, mi vel sollicitudin vulputate, justo dui tincidunt erat, at viverra ligula nulla vel ipsum. Fusce in augue. Donec non purus. Donec a ipsum. Mauris dapibus volutpat magna. Donec ipsum nisl, lobortis eget, fermentum quis, condimentum in, urna. Vestibulum vitae ante. Ut diam. Sed in enim sed tortor sagittis mattis. Donec a neque ac odio faucibus dignissim. </p>
 
<p>Suspendisse urna. Aliquam non metus sed magna sodales aliquet. Praesent auctor. Vivamus ac ligula. Nulla porttitor pharetra orci. Suspendisse rhoncus luctus urna. Duis viverra lacus at ipsum. Proin aliquam. Duis urna eros, interdum eget, porta nec, aliquam vulputate, elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus laoreet purus et est. Mauris enim. Curabitur in quam. Nullam quam. Curabitur sapien lacus, dictum et, fermentum eu, faucibus sed, libero. </p>
 
<p>Morbi mollis lectus non augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat, orci euismod mattis feugiat, quam ante blandit nisl, vitae fermentum odio velit eget tellus. Fusce porta, orci et sodales aliquam, leo dui tempor felis, ut faucibus lacus sapien tincidunt lectus. Aliquam sit amet nulla. Integer fringilla leo. In pretium tristique ligula. Nullam massa. Nam justo orci, lacinia et, imperdiet ac, dapibus eget, eros. Ut rutrum augue eget nulla. Praesent condimentum adipiscing libero. Aenean dignissim libero ut erat. Curabitur congue dignissim odio. Sed congue semper erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et urna ut eros condimentum semper. Suspendisse diam diam, interdum quis, consectetur dictum, condimentum sed, tortor. In ornare mauris eu elit. </p>
 
                </div>
</div>
 
<div class="clear"></div>
 
<div class="footer">
            <p>footer text</p>
</div>
 
</body>
</html>

Open in new window

Seany84

ASKER

@jasemhi
I wont be able to try the code you posted for another few hours.
I have attached the background you requested.
This system will only be used exclusively in IE7 so that's all I'm testing it in.

Thanks.

background.gif

Seany84

ASKER

@jasemhi
Thanks those CSS classes worked perfectly.
However, I was wondering if it is possible to make the background gradient image stretch the full length of the div that it is in?

jasemhi

Hmmm.... in IE 7 and FF3 the background image is fully visible, even when I remove most of the placeholder text- see attached screenshots. What browser are you using and can you upload a screenshot?
ff3.jpg
ie7.jpg

Seany84

ASKER

I'm using Chrome and IE7 for the most part. If you have a look at: http://www.recordyourcatch.com/Home.aspx
I think you will see what I mean.

Thanks

Seany84

ASKER

Could anyone please help with this issue?

Thanks.

jasemhi

Hi Seany84,

I think I see your problem. The image is only 800px high so if the div height is any larger then it will abruptly stop like your link does. A way to get around this:

1. create a background image that fades to white at the bottom so it blends with the background

2. set the background of your div the same color as the bottom pixel of the background gradient so it blends

Hope this helps.

Seany84

ASKER

@jasemhi
Yes that will probably fix the styling issue.

However, if you view the page source you will see I have added about 18 ....
's containing a lot of text.
The site seems to be cutting the content out after a certain point/height (after 6/7 's).

How can I stop this from happening? I want this to dynamically auto adjust the height.. I'm guessing the css is wrong :( ?

Thanks

ASKER CERTIFIED SOLUTION

jasemhi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial