Back To Website Design Forum

Random Space at the bottom of my page

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 23rd, 2008, 12:17 pm

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.
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 23rd, 2008, 12:17 pm

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post August 23rd, 2008, 12:27 pm

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
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 23rd, 2008, 1:11 pm

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.  
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 81 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.