Random Space at the bottom of my page

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I have a page coded and everything, but there's a huge gap between the end of my content and the end of the page. Scrolls down alot. A lot of the page is made with divs. Anybody know what causes this. I've checked all my margins and whatnot. If need be I'll post the code.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Please post it :)
I actually just had to fix this problem - turns out I had a looped <br> between some table rows that I forgot to take out when I converted it to divs.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

html:

Code: [ Select ]
   
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see http://www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsnavbar.js">
</script>
</head>
<body> <!-- took ou onLoad content so post is smaller -->
<div id="wrap">
<div id="header">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th height="57" scope="col">
<div class="c1"><img src="images/logo.png" alt="" name="Logo" width="334" height="136" id="Logo" /></div></th>
<th scope="col">
<div class="c2"><img src="images/index_02.png" alt="" name="headerright" width="283" height="144" id="headerright" /></div></th>
</tr>
</table>
</div>
<div id="navbarwrap" align="center">
<div id="navbar"></div><!-- firefox/dreamweaver generated navbar deleted so post is smaller -->
</div>
<div id="maincontentheader">
<h1>Voltec Design</h1>
</div>
<div id="maincontenttext"></div>
<div id="minicontentheader1">
<h1>Service</h1>
</div>
<div id="minicontent1"></div>
<div id="minicontentheader2">
<h1>Guarentee</h1>
</div>
<div id="minicontent2"></div>
<div id="minicontentheader3">
  <h1>Testimonials</h1>
</div>
<div id="minicontent3"></div>
</div>
</body>
</html>
  1.    
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see http://www.w3.org" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <link href="reset.css" rel="stylesheet" type="text/css" />
  8. <link href="layout.css" rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="jsnavbar.js">
  10. </script>
  11. </head>
  12. <body> <!-- took ou onLoad content so post is smaller -->
  13. <div id="wrap">
  14. <div id="header">
  15. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  16. <tr>
  17. <th height="57" scope="col">
  18. <div class="c1"><img src="images/logo.png" alt="" name="Logo" width="334" height="136" id="Logo" /></div></th>
  19. <th scope="col">
  20. <div class="c2"><img src="images/index_02.png" alt="" name="headerright" width="283" height="144" id="headerright" /></div></th>
  21. </tr>
  22. </table>
  23. </div>
  24. <div id="navbarwrap" align="center">
  25. <div id="navbar"></div><!-- firefox/dreamweaver generated navbar deleted so post is smaller -->
  26. </div>
  27. <div id="maincontentheader">
  28. <h1>Voltec Design</h1>
  29. </div>
  30. <div id="maincontenttext"></div>
  31. <div id="minicontentheader1">
  32. <h1>Service</h1>
  33. </div>
  34. <div id="minicontent1"></div>
  35. <div id="minicontentheader2">
  36. <h1>Guarentee</h1>
  37. </div>
  38. <div id="minicontent2"></div>
  39. <div id="minicontentheader3">
  40.   <h1>Testimonials</h1>
  41. </div>
  42. <div id="minicontent3"></div>
  43. </div>
  44. </body>
  45. </html>


quick reply but I kinda already fixed it...
All of my "minicontent" and "minicontentheader" divs were relative positioned, I changed them to absolute and repositioned them. This got rid of the extra space at the bottom but I still wanted a little bit of space at the bottom, about 10-20 pixels so I wrapped everything in an absolutely positioned <div id="wrap"> and gave it a specified height that was 20 pixels higher than the content. I'm pretty sure there's an easier way to do this but I am a learning boy... can't call my methods ingenious yet.

css:
Code: [ Select ]
@charset "utf-8";
 
/* CSS Document */
 
body {
    background-color: #333333;
    background-image: url(images/background.png);
    color: #FFFFFF;
}
 
#header {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:136px;
    z-index:1;
    overflow: visible;
    background-image: url(images/headerbg.png);
}
 
#header th {
    width: 100%;
    height: 100%;
}
 
#navbarwrap {
    position:absolute;
    width:100%;
    height:40px;
    z-index:3;
    left: -2px;
    top: 135px;
    background-image: url(images/navbarbg.gif);
    border-bottom-color: #000000;
    border-top-width: medium;
    border-bottom-width: medium;
    border-top-style: groove;
    border-bottom-style: groove;
    border-top-color: #000000;
}
 
#navbar {
    width: 544px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
    border-right-color: #CC0000;
    border-left-color: #CC0000;
    border-left-style: groove;
    border-right-style: groove;
    border-right-width: medium;
    border-left-width: medium;
}
 
#maincontentheader {
    position:relative;
    left:8%;
    top:200px;
    z-index:4;
    background-image: url(images/navbarbg.gif);
    width: 55%;
    height: 40px;
}
 
#maincontenttext {
    position: relative;
    left: 8%;
    width: 55%;
    height: 590px;
    background-color: #333333;
    top: 200px;
}
#minicontentheader1 {
    position: absolute;
    width: 20%;
    height: 40px;
    background-image: url(images/navbarbg.gif);
    left: 66%;
    top: 200px;
}
#minicontent1 {
    position: absolute;
    width: 20%;
    height: 150px;
    left: 66%;
    background-color: #333333;
    top: 240px;
}
 
#minicontentheader2 {
    position: absolute;
    width: 20%;
    height: 40px;
    background-image: url(images/navbarbg.gif);
    left: 66%;
    top: 420px;
    z-index: 8;
}
#minicontent2 {
    position: absolute;
    width: 20%;
    height: 150px;
    left: 66%;
    background-color: #333333;
    top: 460px;
}
#wrap {
    position: relative;
    height: 880px;
    width: 100%;
}
 
#minicontentheader3 {
    position: absolute;
    width: 20%;
    height: 40px;
    background-image: url(images/navbarbg.gif);
    left: 66%;
    top: 640px;
    z-index: 6;
}
#minicontent3 {
    position: absolute;
    width: 20%;
    height: 150px;
    left: 66%;
    background-color: #333333;
    margin-bottom: 0px;
    top: 680px;
}
 
 
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 10px;
    font-variant: small-caps;
    color: #FFFFFF;
}
 
/*<![CDATA[*/
 div.c2 {text-align: right}
 div.c1 {text-align: left}
/*]]>*/
 
  1. @charset "utf-8";
  2.  
  3. /* CSS Document */
  4.  
  5. body {
  6.     background-color: #333333;
  7.     background-image: url(images/background.png);
  8.     color: #FFFFFF;
  9. }
  10.  
  11. #header {
  12.     position:absolute;
  13.     left:0px;
  14.     top:0px;
  15.     width:100%;
  16.     height:136px;
  17.     z-index:1;
  18.     overflow: visible;
  19.     background-image: url(images/headerbg.png);
  20. }
  21.  
  22. #header th {
  23.     width: 100%;
  24.     height: 100%;
  25. }
  26.  
  27. #navbarwrap {
  28.     position:absolute;
  29.     width:100%;
  30.     height:40px;
  31.     z-index:3;
  32.     left: -2px;
  33.     top: 135px;
  34.     background-image: url(images/navbarbg.gif);
  35.     border-bottom-color: #000000;
  36.     border-top-width: medium;
  37.     border-bottom-width: medium;
  38.     border-top-style: groove;
  39.     border-bottom-style: groove;
  40.     border-top-color: #000000;
  41. }
  42.  
  43. #navbar {
  44.     width: 544px;
  45.     height: 40px;
  46.     margin-right: auto;
  47.     margin-left: auto;
  48.     border-right-color: #CC0000;
  49.     border-left-color: #CC0000;
  50.     border-left-style: groove;
  51.     border-right-style: groove;
  52.     border-right-width: medium;
  53.     border-left-width: medium;
  54. }
  55.  
  56. #maincontentheader {
  57.     position:relative;
  58.     left:8%;
  59.     top:200px;
  60.     z-index:4;
  61.     background-image: url(images/navbarbg.gif);
  62.     width: 55%;
  63.     height: 40px;
  64. }
  65.  
  66. #maincontenttext {
  67.     position: relative;
  68.     left: 8%;
  69.     width: 55%;
  70.     height: 590px;
  71.     background-color: #333333;
  72.     top: 200px;
  73. }
  74. #minicontentheader1 {
  75.     position: absolute;
  76.     width: 20%;
  77.     height: 40px;
  78.     background-image: url(images/navbarbg.gif);
  79.     left: 66%;
  80.     top: 200px;
  81. }
  82. #minicontent1 {
  83.     position: absolute;
  84.     width: 20%;
  85.     height: 150px;
  86.     left: 66%;
  87.     background-color: #333333;
  88.     top: 240px;
  89. }
  90.  
  91. #minicontentheader2 {
  92.     position: absolute;
  93.     width: 20%;
  94.     height: 40px;
  95.     background-image: url(images/navbarbg.gif);
  96.     left: 66%;
  97.     top: 420px;
  98.     z-index: 8;
  99. }
  100. #minicontent2 {
  101.     position: absolute;
  102.     width: 20%;
  103.     height: 150px;
  104.     left: 66%;
  105.     background-color: #333333;
  106.     top: 460px;
  107. }
  108. #wrap {
  109.     position: relative;
  110.     height: 880px;
  111.     width: 100%;
  112. }
  113.  
  114. #minicontentheader3 {
  115.     position: absolute;
  116.     width: 20%;
  117.     height: 40px;
  118.     background-image: url(images/navbarbg.gif);
  119.     left: 66%;
  120.     top: 640px;
  121.     z-index: 6;
  122. }
  123. #minicontent3 {
  124.     position: absolute;
  125.     width: 20%;
  126.     height: 150px;
  127.     left: 66%;
  128.     background-color: #333333;
  129.     margin-bottom: 0px;
  130.     top: 680px;
  131. }
  132.  
  133.  
  134. h1 {
  135.     font-family: Arial, Helvetica, sans-serif;
  136.     font-size: 20px;
  137.     font-weight: bold;
  138.     padding-left: 10px;
  139.     padding-top: 10px;
  140.     font-variant: small-caps;
  141.     color: #FFFFFF;
  142. }
  143.  
  144. /*<![CDATA[*/
  145.  div.c2 {text-align: right}
  146.  div.c1 {text-align: left}
  147. /*]]>*/
  148.  

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 62 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.