Member Avatar for kRaeTwin

Basically, I'm making my first website (I'm a programmer not a web developer) and I've ran into some trouble. Take a look at the picture and you'll see what I mean:

Here

Basically, I want to do it so that if the text extends far down the page, it will always remain constant (by a certain number of pixels) above the blue border, and the black border will always remain constant (by a certain number of pixels) above the bottom of the page; there will just be more scrolling downwards.

If anyone needs me to describe it better or post the "source" I will.
Thanks a lot.
Regards, Jamie.

  • 3 Contributors
  • 3 Replies
  • 136 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Tsakaki
Member Avatar for teedoff

Can you post your code? or better yet would be a link to your site.

Without seeing either, I can only guess you either set a height for the parent div of your text thats overflowing, or maybe you didnt clear your floats? WHo knows.

Member Avatar for kRaeTwin 
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Welcome to kRaeTwin.co.uk!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
      <span class="header">
          <img src="pika.png" alt="pika" />
          <img src="logo.png" alt="logo" />
          <span class="headerNav">
              <span id="headerNavText">
                  <ul id="navigation">
                      <li><a href="index.html">Home</a></li>
                      <li><a href="projects.php">Projects</a></li>
                      <li><a href="rants.php">Rants</a></li>
                      <li><a href="downloads.php">Downloads</a></li>
                      <li><a href="contact.php">Contact</a></li>
                  </ul>
              </span>
          </span>
      </span>

      <div align="center" class="allBody">

          <div class="leftNav">
              <span class="leftNavOptions">
                  <div id="leftNavOptionsTitle">
                      <b>Home</b>
                  </div>

                  <ul id="subNav">
                      <li><b><a href="index.html">Welcome</a></b></li>
                      <br />
                      <li><b><a href="about.html">About</a></b></li>
                  </ul>
              </span>
          </div>

          <div class="ads">
            ads
          </div>

          <div class="secBody" align="center">
              <span class="secThisPage">
                  <span id="thisPageTitle">
                      Welcome
                  </span>
              </span>
              <div class="textBody" >
                  <h3 id="chromewarning">
                      If any elements on this site look out of place or unusual, it is due to a compatibility issue with your browser.  I recommend
                      that you download <a href="http://www.google.co.uk/chrome" style="text-decoration:none; color:#1a2f47;"><u>Google Chrome</u></a>; it is
                      a better browser anyway and will bring you years of happiness (it won't actually).
                  </h3>
                  
                      <p>
                      Hi there and welcome to kRaeTwin.co.uk!  This is the personal site of <a href="about.html" style="color:#4a0309"><i>kRaeTwin</i></a>.
                      I set this site up so I could use it for downloads of programs I have made, and rant about shit that I don't like in life.  Currently it
                      does not have a lot <i>but</i> soon it will be fully dynamic which makes it easier and faster to update an item in the list of, say, "projects".
                      All programs that I release on this site will be <u>free</u> unless it just happens to be a 5up3r l33t h4x0r program that I am selling.
                     </p>

                     <p>
                      In order to download a program that I have released for free, you will have to complete a stupid fucking survey.  Yes, I know, they are
                      a pain in the tits BUT a few precious minutes of your <s>stupid fucking</s> precious life is a bargain for a quality program that
                      12 year olds are selling for $30 on other sites; but of course, my programs will be 200x better quality than they copied and pasted
                      pieces of shit vile Visual Basic excuses for programs.
                     </p>

                     <p>
                         But before you get a boner thinking of all the h4x t00ls you are going to get for <u>free</u> (unless you're a stingy cunt that counts
                         a few minutes as currency), the site won't just be a download site for my latest and greatest c0d3z.  I'm setting it up so that I can
                         post well-written rants about the problems of society, or the things that I just don't like.  Not all the rants will be written by me;
                         some will be written by contributors who will be fully credited for their work (I'm not gay).
                     </p>

                     <p>
                         Anyway, here are some of my links to keep you occupied (what a fun life you lead, eh?).  No, I won't post my Facebook, because I don't
                         want 12 year olds getting my dox and sending pizzas to my door at 2am.  Only the people who know me in real life -- in other words <u><i>very lucky</i></u>
                         people -- know my real name and that's the way it's going to stay, amigo!
                     </p>

                     <p>
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                         testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
                     </p>
              </div>
          </div>
      </div>
  </body>
</html>

Style Sheet:

body {
    background:#c7c5c5 url('background.png') repeat-x;
    height:100%;
}

.header {
    width:100%;
    height:161px;
    text-align:center;
}

.headerNav {
    float:right;
    height:161px;
    width:54%;
}

.headerNav #headerNavText {
    font-size:26px;
    font-family:"Helvetica",sans-serif;
    color:#4999f2;
    float:left;
    margin-top:50px;
}

ul#navigation {
    width:100%;
    float:left;
}

ul#navigation li {
    height:30px;
    float:left;
    display:inline;
    list-style-type:none;
}


ul#navigation li a {
    color:#4999f2;
    text-decoration:none;
    padding-left:15px;
    padding-right:15px;
    border-width:2px;
    border-color:#95d1f4; /*  #03365a; */
      border-top-left-radius:20px 20px;
  border-top-right-radius:20px 20px;
  border-bottom-left-radius:20px 20px;
  border-bottom-right-radius:20px 20px;
  -moz-border-radius-topleft:20px 20px;
  -moz-border-radius-topright:20px 20px;
  -moz-border-radius-bottomleft:20px 20px;
  -moz-border-radius-bottomright:20px 20px;
}

ul#navigation li a:hover {
    font-size:28px;
    background:#1e426b; /*#03365a; */
}

#pika {
    float:left;
    height:161px;
    width:150px;
}

.allBody {
    width:100%;
    height:100%;
    float:none;
}

.allBody .secBody {
   padding:10px;
   width:70%;
   margin-top:6px; /*test */
   height:92%;
  /* background:#20b3f0 url('txtbodyBackground.png') repeat-x; */
  background:white;
  border-style:solid;
  border-width:2px;
  border-color:black;
  border-top-left-radius:25px 25px;
  border-top-right-radius:25px 25px;
  border-bottom-left-radius:25px 25px;
  border-bottom-right-radius:25px 25px;
  -moz-border-radius-topleft:20px 20px;
  -moz-border-radius-topright:20px 20px;
  -moz-border-radius-bottomleft:20px 20px;
  -moz-border-radius-bottomright:20px 20px;
}

.allBody .secBody .secThisPage {
    width:100%;
    height:5%;
    border-width:3px;
    border-style:solid;
    border-color:black;
}

.allBody .secBody .secThisPage #thisPageTitle {
    font-size:45px;
    font-family:"Helvetica",sans-serif;
    letter-spacing:-2px;
    float:left;
    color:#7a1e85;
    margin-left:25px;
    margin-bottom:10px;
}

.allBody .textBody {
    width:94%;
    height:85%;
    float:none;
    background:whitesmoke;
    margin-top:60px;
    border-style:solid;
    border-width:1px;
    border-color:#84cef9;
    border-top-left-radius:25px 25px;
  border-top-right-radius:25px 25px;
  border-bottom-left-radius:25px 25px;
  border-bottom-right-radius:25px 25px;
  -moz-border-radius-topleft:20px 20px;
  -moz-border-radius-topright:20px 20px;
  -moz-border-radius-bottomleft:20px 20px;
  -moz-border-radius-bottomright:20px 20px;
  
}

.leftNav {
    float:left;
    width:15%;
    height:100%;
    /*background-color:purple; */
}

.ads {
    float:right;
    width:15%;
    height:100%;
    /*background-color:purple; */
}

.leftNav .leftNavOptions #leftNavOptionsTitle {
    float:left;
    text-align:left;
    margin-top:20px;
    margin-left:20px;
    font-size:20px;
    font-family:"Helvetica",sans-serif;
    color:red;
    width:100%;
}

.leftNav .leftNavOptions ul {
    float:left;
    list-style-type:none;
}

.leftNav .leftNavOptions ul li a {
    color:black;
    text-align:left;
    font-size:16px;
    font-family:"Verdana",sans-serif;
    text-decoration:none;
}

.leftNav .leftNavOptions ul li {
    text-align:left;
}

.leftNav .leftNavOptions ul li a:hover {
    background:#dee0e3;
    padding-left:20px;
    padding-right:20px;
    border-top-left-radius:25px 25px;
    border-top-right-radius:25px 25px;
    border-bottom-left-radius:25px 25px;
    border-bottom-right-radius:25px 25px;
    -moz-border-radius-topleft:20px 20px;
    -moz-border-radius-topright:20px 20px;
    -moz-border-radius-bottomleft:20px 20px;
    -moz-border-radius-bottomright:20px 20px;
}

.textBody {
    font-family:"MS Sans-serif",sans-serif;
    font-size:17px;
    letter-spacing:0px;
    color:black;
    text-align:center;
    margin-left:12px;
    padding:12px;
    height:90%;
}
.textBody #chromewarning {
    color:#255b96;
    float:left;
    font-size:15px;
    letter-spacing:0px;
    margin-left:10px;
    margin-right:10px;
    border-width:1px;
    border-style:solid;
    border-color:red;
    padding:2px;
    text-align:center;
}

Not the nicest of code but it works; and what I spraypainted out is visible in that source but I don't care - I just want it working. :P

Member Avatar for Tsakaki

In you're CSS try removing your (height) definitions for (.allBody .secBody) and (.allBody .textBody) so that it will grow with the content. (If you set a height on a division, it will remain at that height, no matter how much content you put in it).

You will most likely need to add a (margin-bottom) with a pixel definition to both as well, in order to keep them a set distance apart and keep the black border away from the bottom of the page.

The easiest way to ensure that the text is a certain height above the blue-border is to add (padding-bottom) to that division.

This SHOULD work, but I don't generally work with percentages, so there may be some glitches.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.