CSS Forum

**boxiom** · 06-01-2009, 12:53 PM

http://footfivedesigns.com/

If you scroll down you see the page stretches after there is no content. I dont want the page to scroll or be empty blackness, unless there is more content. Does anybody understand what I mean? haha.

Code:

<!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>Pure Css</title>
<style type="text/css">
<!--



.rollover {
color: #FFFFFF;
}
.rollover a {
color: #FFFFFF;
text-decoration: none;
}
.rollover a:hover {
text-decoration: underline;
}

#navtext a{
   text-decoration:none;
   color:#ffffff
}
#navtext a:hover{
   text-decoration:underline;
}


#header {
    position:absolute;
    left:256px;
    top:0px;
    width:512px;
    height:125px;
    z-index:1;
    background-image: url(header.jpg);
}
#BGmiddle {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    z-index:2;
    background-color: #000000;
    height: 900px;
}
body {
    background-color: #333333;
}
#navtext {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    height:20px;
    z-index:3;
}
.style1 {
    color: #FFFFFF;
    font-size: 12px;
}
#contentbox1 {
    position:absolute;
    left:325px;
    top:167px;
    width:435px;
    height:0px;
    z-index:4;
}
#BOXCONTENT {
    position:absolute;
    left:261px;
    top:417px;
    width:503px;
    height:145px;
    z-index:4;
    border: thin dashed #FFFFFF;
}




-->
</style>
</head>

<body>




<div id="header"></div>

<div id="BGmiddle">
  <p class="style1">&nbsp;</p>
  <p align="center" class="style1">    Linking External Stylesheets</p>
  <p align="center" class="style1">This new tutorial will show you how to link external style sheets into your webpage.<br />
  <a href="article.html">read here </a></p>
  <p align="center" class="style1">Launched Footfive Designs!</p>
  <p align="center" class="style1">I'm excited to announce I have finally launched my portfolio/website. This website will be a portfolio<br />
    showcasing my work as well as contain tutorials and a community to help people...read more
  </p>
  <p align="center" class="style1">Header 3</p>
  <p align="center" class="style1">You can rename the form widget using the Property  inspector instead of the generic name like sprytextarea1. Dreamweaver  adds the widget name with a span element wrapped around the form  element. You should probably leave &quot;spry&quot; in the name if you decide to  change it. This will help you keep from confusing it with the ID and  Label information entered in the Accessibility dialog box. The example  pictured is for a Comments text area, so I renamed the widget  &quot;spry_comment.&quot; Notice that the Required checkbox is automatically  selected on the Property inspector. The graphic is a combined image  showing what Dreamweaver has in Code View and Design View at this  point. (Your Design View may be red.)</p>
</div>

<div class="style1" id="navtext"> 

  <div align="center"><a href="google.com">home</a> | <a href="forums">forums</a> | <a href="about.html">about me</a> | <a href="contact">contact</a> | <a href="tutorials">tutorials</a></div>
</div>
</body>
</html>

**Basti** · 06-01-2009, 01:34 PM

PHP Code:


			
#BGmiddle {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    z-index:2;
    background-color: #000000;
    height: 900px;
}

Looks to me like the height is the Problem

**boxiom** · 06-01-2009, 02:07 PM

so what should I set the height too?

**Basti** · 02:15 PM

Just delete height.

when its gone, the background should always has the height of your page text.

To make everything looks a bit better i also made a little space left and right to your content, looks more friendly. And at the bottom

simply replace:

PHP Code:


			
#BGmiddle {
    position:absolute;
    left:256px;
    top:125px;
    width:512px;
    z-index:2;
    background-color: #000000;
    padding: 0 5px 10px 5px;
}

**boxiom** · 06-01-2009, 02:26 PM

appreciate it! when I apply the padding though this happens in the top right:

**Basti** · 06-01-2009, 02:42 PM

Option 1:
make the width from the BGmiddle part we talk about 5 or 10 px smaller

if that aint work, apply option 2 and we may fix it later. need to go now :P

Option 2:
just change the padding line in the css part i posted

from

PHP Code:


			
    padding: 0 5px 10px 5px;

to

PHP Code:


			
    padding: 0 0 10px 0;

Then its only bottom padding

**boxiom** · 06-01-2009, 02:50 PM

ahh duuuh. haha. thanks I appreciate it man!

**Basti** · 06-01-2009, 04:49 PM

Looks like the width reducing did the job