Forum Moderators: not2easy
I was reading through the forums a bit looking for a solution, and while I wasn't able to find something that helped me figure out my problem, it seems like there are some knowledgable people here who might be able to help me.
That said, I am having 2 basic problems.
Firstly, When my content exceeds view of of the screen, and one scrolls down to view it, there is whitespace. The text from the "main" div is visible, but the whole design of the page is screwed up. I cannot figure out how to fix this, as if I do not define a height for those divs then they disappear.
Secondly, I am attempting to add a footer to the page, which will be at the bottom of the page if there is not enough content, but will push down as the content pushes it down. I have seen a few solutions for this here, but I thus far haven't been able to apply them to my page.
The site I am designing is for a friend's business, it can be viewed here: <snip>
Here is the CSS:
html, body {
min-height: 100%;
width: 100%;
}
#outer {
position: relative;
width: 100%;
min-height: 100%;
background: #b39900 repeat-y;
}
#inner {
position: relative;
left: 150px;
width: 724px;
min-height: 100%;
background: black repeat-y;
}
#top {
position: relative;
top: 0px;
left: 0px;
text-align: center;
background-color: blue;
}
#topleft {
position: absolute;
left: 0px;
top: 0px;
background-color: white;
min-height: 80px;
}
#head {
position: absolute;
top: 80px;
left: 0px;
background-color: red;
width: 724px;
height: 20px;
}
#left {
position: absolute;
left: 0px;
top: 80px;
background-color: yellow;
color: white;
}
#main {
position: relative;
left: 10px;
top: 100px;
background-color: green;
}
#right {
position: absolute;
top: 0;
left: 724px;
width: 150px;
height: 100%;
background-color: orange;
}
#bottom {
position: absolute;
bottom: 0px;
left: 0px;
background-color: purple;
}
#footer {
position: relative;
bottom: 0px;
background-color: pink;
}
And here is some stripped down html:
<!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=iso-8859-1" />
<title>Testing Ground</title>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
<link href="testingground.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="outer">
<div id="topleft">
<p>testtesttest</p>
</div>
<div id="left" style="z-index: 2"><div id="menu">
</div>
</div>
<div id="inner" style="z-index: 1">
<div id="top">
<p>testtesttest</p>
<div id="head">
</div>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit leo ut erat. Nulla libero felis, condimentum ac, sagittis iaculis, vestibulum id, nibh. Vivamus laoreet risus quis nulla pellentesque varius. Fusce vel risus. Mauris sed mi vel nibh ultrices feugiat. In ac nibh at leo consectetur tincidunt. Vivamus eleifend lobortis quam. Morbi congue, massa nec vestibulum sollicitudin, elit neque fermentum orci, in condimentum erat nisi quis urna. Pellentesque sollicitudin placerat nunc. Aenean hendrerit ultrices dolor.
</p>
</div>
</div>
</div>
</body>
</html>
Note that neither the CSS nor the html properly represent exactly the page I linked to, I posted that link simply to try to illustrate what I am trying to do. If it wasn't for the problems with too much content, it would be exactly what I want.
Thanks in advance for the help guys.
[edited by: swa66 at 6:54 pm (utc) on Mar. 4, 2009]
[edit reason] No personal links please. See ToS [/edit]
I am afraid you might be doing more than you need too.
At any rate, I have tried to simplify it (though with what I have done at the moment I lose that right side).
It is still not displaying properly, however.
This is screen of what I get (hopefully this is in accordance with rules, just want to show what problem I am having):
<snip>
Note that I want the white parts to connect, with no gold between. The gold should be only on the side.
Here is the code that gets me there.
CSS:
html, body {
min-height: 100%;
height: 100%;
width: 100%;
background-color: #b39900;
}
#top {
position: relative;
float: right;
top: 0px;
left: 0px;
text-align: center;
background-color: white;
width: 800px;
}
#topleft {
position: absolute;
left: 0px;
top: 0px;
background-color: white;
min-height: 80px;
}
#head {
position: relative;
float: right;
top: 0px;
left: 0px;
background-color: red;
width: 800px;
height: 20px;
}
#left {
position: relative;
float: left;
left: 0px;
top: 80px;
width: 150px;
color: white;
}
#main {
position: relative;
float: right;
left: 0px;
top: 0px;
width: 800px;
background-color: white;
}
#bottom {
position: relative;
float: right;
bottom: 0px;
left: 0px;
background-color: purple;
}
#footer {
position: relative;
bottom: 0px;
background-color: pink;
}
HTML:
<body>
<div id="outer"><div id="topleft">
<img alt="logo" src="images/logo2A_1-tiny.png" />
</div>
<div id="left" style="z-index: 2"><div id="menu">
<?php
include "menu.php";
?>
</div>
</div>
<div id="inner" style="z-index: 1">
<div id="top">
<img alt="logo" src="images/header.png" width="708" height="75" align="left">
<div id="head">
</div>
</div>
<div id="main">
<p>
<?php
include "index.txt";
?>
</p>
</div>
<div id="right">
</div>
</div>
<div id="spacer">
</div>
<div id="bottom" style="clear: both;">
<div id="footer">
<?php
include "footer.txt";
?>
</div>
</div>
</div>
</body>
</html>
[edited by: swa66 at 9:00 pm (utc) on Mar. 4, 2009]
[edit reason] No personal URLs, see ToS [/edit]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
body {
font: 10px Verdana, Arial, Helvetica, sans-serif;
background: #FFFF99;
}
#mainContent_wrap {
width: 874px;
background: #FFFFFF;
position: relative;
height: 100%;
}
#header {
background: #999999;
height: 80px;
width: 874px;
}
#menu_left {
width: 150px;
border-right: 1px solid #000000;
clear: left;
float: left;
background: #FFCCFF;
height: 100%;
}
#menu_left ul {
border: 1px solid #000000;
list-style: none;
}
#menu_left li {
border: 1px solid #999999;
}
#menu_left li.menu_head {
font-size: 14px;
font-weight: bold;
background: #CCCCCC;
padding: 5px;
text-align: center;
}
#menu_left li.non_link {
font-size: 12px;
font-weight: bold;
padding: 5px;
color: #FFFFFF;
background: #000000;
}
#menu_left li a {
padding: 5px;
display: block;
background: #CCCCCC;
}
#menu_left li a:hover {
background-color:#666666;
}
#page_content {
width: 702px;
float: left;
padding: 10px;
background: #99CCCC;
height: 100%;
}
.clear_float {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}
-->
</style>
</head>
<body>
<div id="mainContent_wrap">
<div id="header">Header</div>
<div id="menu_left">
<ul>
<li class="menu_head">Menu</li>
<li class="non_link">Main Stuff</li>
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li class="non_link">Contact</li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
<div id="page_content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p> </p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p> </p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<p> </p>
<p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
<p> </p>
</div>
<br class="clear_float" />
</div>
</body>
</html>
I am going to go through that and see if I can't figure out how to apply it.
I appreciate the help. I probably won't get a chance to work on it anymore until tonight, but what you've given me here should get me going in the right direction I think.
[edited by: tedster at 9:09 am (utc) on Mar. 7, 2009]
I'll start trying to figure it out on my own, but whatever help you can give would be most appreciated. <snip>
[edited by: swa66 at 1:12 am (utc) on Mar. 6, 2009]
[edit reason] keep the discussion in the forum please [/edit]
Here is our current code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
body {
font: 10px Verdana, Arial, Helvetica, sans-serif;
background: #B39900;
}
#header {
height:80px;
width:874px;
position:absolute;
top:0px;
left:0px;
z-index:1;
background:#FFFFFF;
}
#menu_leftSide {
background: #B39900;
width: 150px;
border-right: 1px solid #000000;
min-height:100%;
max-height:100%;
left: 0px;
top: 0px;
position: relative;
clear: left;
float: left;}
#menu_left {
padding-top:80px;
}
#menu_left ul {
border:1px solid #000000;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#menu_left li {
border:1px solid #999999;
}
#menu_left li.menu_head {
background:#CCCCCC;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
padding:0;
text-align:center;
text-decoration:none;
}
#menu_left li.non_link {
background:#000000;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
padding:5px;
}
#menu_left li a {
background:#CCCCCC;
color:#000000;
display:block;
padding:5px;
text-decoration:none;
}
#menu_left li a:hover {
background-color:#666666;
}
#content_rightSide {
background:#CCCCCC;
width:723px;
min-height:100%;
max-height:100%;
position: relative;
top: 0px;
margin-left: 151px;
}
#divider {
background:#B39900 url(images/bar2.png) repeat-x bottom;
height:20px;
padding-top: 80px;
}
#footer {
background:#000000;
width:713px;
position:absolute;
bottom:0px;
color: #FFFFFF;
padding: 5px;
}
.content_text {
text-align: justify;
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="Logo" height="80" width="150" />
<img src="images/header.png" alt="Title" height="75" width="708" />
</div>
<div id="menu_leftSide">
<div id="menu_left">
</div>
</div>
<div id="content_rightSide">
<div id="divider"></div>
<div class="content_text">
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
So what we still need to figure out is:
1.) Extending the containers with the content.
2.) IE6 specific fixes.
Anyone else have any input?
[edited by: tedster at 9:10 am (utc) on Mar. 7, 2009]
[edited by: swa66 at 9:58 pm (utc) on Mar. 7, 2009]
[edit reason] disable graphic smile faces [/edit]
Also the max-height may not be needed.
Also remember we're not here to do your homework, we're in it to learn (or teach). So consider us not people who're not so likely to give you a fish, but who'd rather try to show you how to catch fish yourself.
