Jump to content

Page height problem

Alicia

By Alicia
in CSS Help

Recommended Posts

Alicia Regular Member

Alicia

Posted
Posted

Hello,

 

Can some experts please help me to check how can I edit the page height of these files? I tried to adjust the footer css but it only moved the footer image higher and not really the whole page height.

 

Please advise.. I am very new to css and have no idea how to make it auto adjust the page height from this file. thank you.

 

my css : 

@charset "utf-8";
/* CSS Document */

@charset "UTF-8";
/* CSS Document */
html,
body {
margin:0;
padding:0;
height:100%;
background:#abe0f4 url(images/bg.jpg) repeat-x;	/* BG MAIN COLOR and or IMAGE color code is: background-color:#333333; */
font-family: Verdana, Geneva, sans-serif;
color:#666666;
font-size:14px;
line-height:19px;
}

#container {
	min-height:100%;
	position:relative;
	background-image: url(images/bgcloud.jpg);/* header background */
	background-position:top center;
	background-repeat: no-repeat;
}
#headerbg {
	width: 100%;
	background-image: url(images/greatdeals.png);
	background-position:top center;
background-repeat: no-repeat;
}
.header {
width: 882px;
padding:0px 10px 10px 10px;
margin:0 auto;
position: relative;
min-height: 750px;
}
.headersub {
width: 882px;
padding:0px 10px 10px 10px;
margin:0 auto;
position: relative;
min-height: 722px;	
padding-bottom:308px;	
}
.appcloud {
width: 203px;
position: absolute;
left: 85px;
top: 175px;
}
.headertxt {
width: 504px;
position: absolute;
left: 370px;
top: 318px;
}
.headertxtthree {
width: 480px;
position: absolute;
left: 417px;
top: 366px;
}
.logo {
width: 299px;
position: absolute;
left: -52px;
top: 22px;
}
.text {
width: 800px;
position: absolute;
left: 56px;
top: 403px;
font-size: 14px;
color: #000;
}
.headertxttwo {
width: 520px;
position: absolute;
left: 340px;
top: 532px;
text-align: right;
}
#body {
height: 1600px;
padding-bottom:308px;	/* Height of the footer */
width: 100%;
}
#bodysub {
padding-bottom:308px;	/* Height of the footer */
width: 100%;
}
#footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:308px;			/* Height of the footer */
	background: url(images/footer.jpg) no-repeat;
	background-position:top center;
}
.footerholder{
margin:0 auto;
position: relative;
width: 883px;

}
.footercontent{
position: relative;
width: 700px;
margin:0 auto;
padding-top: 250px;
float: right;

}
.wrapper{
   margin:0 auto;
position: relative;
   width: 882px;
   margin-bottom: 10px;
   
}
.left1{
   position: relative;
   float: left;
   left: 5px;
   width: 400px;
   padding-bottom: 10px;
}
.left2{
   position: relative;
   float: left;
   left: 15px;
   width: 400px;
   padding-bottom: 10px;
}
a {
text-decoration:none;
}
.link {
color: #FFF;
font-size:  11px;
position: absolute;
}
.link2 {
color: #FFF;
font-size:  10px;
position: absolute;
text-align: center;
top: 252px;
}
.link a{
color: #FFF;
font-decoration: none;
font-weight: bold;
}

.link a:hover{
color: #FFF;
text-decoration: underline;
font-weight: bold;
}
#topmenu {
right: 0;
position: absolute;
background: url(images/topmenu.png) no-repeat top right;

width: 760px; /* MENU width */
height: 38px;
}
ul#topmenu {
margin:0px; padding:0px;/* MARGIN MOVES MENU DOWN */
padding: 5px 40px 0px 0px;
position:absolute;/* MAKE SURE .CONTAINER POSITION IS RELATIVE TO KEEP MENU RIGHT ALIGNED WHEN ADDING MORE PAGES */
right:0px;/* MAKES MENU RIGHT ALIGNED */
text-align: right;
}
ul#topmenu li {
display:inline;/* INLINE MAKES MENU HORIZONTAL */
margin-left:60px;
}
ul#topmenu li a {
font-size:14px;
	line-height:19px;
text-decoration:none;
color:#FFFFFF;/* MENU FONT COLOR */
font-weight:bold;
text-transform:none;
}
ul#topmenu li a.active, ul#topmenu li a:hover {
color:#eae63d;/* MENU ROLLOVER COLOR */
}

 

my html file : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Select and order your favorite pics directly from your iPhone with MyCSS</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>

<body>

<div id="container">
    
  <div id="headerbg">
   	  <div class="headersub">
	<!-- Header start -->
	<ul id="topmenu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="mediapress.html">Press</a></li>

        <li><a href="contact.html">Contact</a></li>
        <li><a href="http://MyCSS.zendesk.com/forums/292331-faq">FAQ</a></li>
        </ul>
	<div class="text">
          <span style="font-size: 30px; color:#2595c8; line-height: 30px; font-weight: bold;">CONTACT US</span><br />
          <p> </p>
          <p><strong>General information</strong><br />

            <br />
For all general inquiries, please email at info(at)MyCSS(dot)com</p>
          <p><strong>Support</strong></p>
<p>sadsa</p>
<p> </p>
<p> </p>
<p>ds</p>
<p> </p>
        </div>

      <!-- Header end -->
      </div>
  </div>
    
<div id="footer">
	<!-- Footer start -->
	<div class="footerholder">

         <div class="footercontent">
         <div class="link" style="left: 310px;"><a href="contact.html">Contact Us</a></div>
         <div class="link" style="left: 60px;"><a href="http://MyCSS.zendesk.com/forums/292331-faq">FAQ</a></div>
         <div class="link" style="left: 209px;"><a href="privacypolicy.html">Privacy Policy</a></div>
         <div class="link" style="left: 10px;"><a href="mediapress.html">Press</a></div>
         <div class="link" style="left: 103px;"><a href="partnerwithus.html">Partner with Us</a></div>

         <div class="link" style="left: 389px;"><a href="http://facebook.com/MyCSS"><img src="images/facebook.png" alt="facebook" width="142" height="39" border="0" /></a></div>
         <div class="link" style="left: 550px;"><a href="http://twitter.com/MyCSS"><img src="images/twitter.png" alt="twitter" width="100" height="39" border="0" /></a></div>
         <div class="link2" style="left: -256px;">
           © Copyright 2011, MyCSS
         </div>
         </div>
      </div>
	<!-- Footer end -->
</div>

</div></div>
<div id="fixeddiv" style="position:absolute; width:32px;height:75px;left:0px;top:330px;background:none;">
<table border="0" width="32" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><a href="http://facebook.com/MyCSS"><img src="images/facebook_32.png" alt="facebook" width="32" height="32" border="0" /></a></td>
  </tr>

  <tr>
    <td width="100%"><a href="http://twitter.com/MyCSS"><img src="images/twitter_32.png" alt="twitter" width="32" height="32" vspace="5" border="0" /></a></td>
  </tr>
</table>
</div>
</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/224870-page-height-problem/
Share on other sites
SuperBlue Member

SuperBlue

Posted
Posted

What haku said only goes for the hight property, not the min-height property.

 

Your problem is that you have positioned the text class absolutely. Using absolute positioning is not bad in it self, in fact i use it on most of my sites to some degree. But it just doesn't work well when you have footer, so if you want to maintain a footer, and still allow all your columns to push the footer further down, depending on what column is highest, then you should really use a tabel based approach. There are float based layouts, but they require additional wrappers for each column in the page.

 

I modified your source a little, but it could really use some cleaning up as well.

@charset "utf-8";
/* CSS Document */

@charset "UTF-8";
/* CSS Document */
html,
   body {
   margin:0;
   padding:0;
   height:100%;
   background:#abe0f4 url(images/bg.jpg) repeat-x;   /* BG MAIN COLOR and or IMAGE color code is: background-color:#333333; */
   font-family: Verdana, Geneva, sans-serif;
   color:#666666;
   font-size:14px;
   line-height:19px;
   }

#container {
      min-height:100%;
      position:relative;
      background-image: url(images/bgcloud.jpg);/* header background */
      background-position:top center;
      background-repeat: no-repeat;
   }
#headerbg {
      width: 100%;
      background-image: url(images/greatdeals.png);
      background-position:top center;
   background-repeat: no-repeat;
   }
.header {
   width: 882px;
   padding:0px 10px 10px 10px;
   margin:0 auto;
   position: relative;
   min-height: 750px;
   }
.headersub {
   width: 882px;
   padding:0px 10px 10px 10px;
   margin:0 auto;
   position: relative;
   min-height: 722px;   
   padding-bottom:308px;   
   }
.appcloud {
   width: 203px;
   position: absolute;
   left: 85px;
   top: 175px;
   }
.headertxt {
   width: 504px;
   position: absolute;
   left: 370px;
   top: 318px;
   }
   .headertxtthree {
   width: 480px;
   position: absolute;
   left: 417px;
   top: 366px;
   }
.logo {
   width: 299px;
   position: absolute;
   left: -52px;
   top: 22px;
   }
.text {
   width: 800px;
   position: relative;
   margin: 0 0 308px;
   left: 56px;
   top: 403px;
   font-size: 14px;
   color: #000;
   }
.headertxttwo {
   width: 520px;
   position: absolute;
   left: 340px;
   top: 532px;
   text-align: right;
   }
#body {
   height: 1600px;
   padding-bottom:308px;   /* Height of the footer */
   width: 100%;
   }
#bodysub {
   padding-bottom:308px;   /* Height of the footer */
   width: 100%;
   }
#footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:308px;         /* Height of the footer */
      background: url(images/footer.jpg) no-repeat;
      background-position:top center;
   }
   .footerholder{
   margin:0 auto;
   position: relative;
   width: 883px;
   
}
.footercontent{
   position: relative;
   width: 700px;
   margin:0 auto;
   padding-top: 250px;
   float: right;
   
}
.wrapper{
   margin:0 auto;
   position: relative;
   width: 882px;
   margin-bottom: 10px;
   
}
.left1{
   position: relative;
   float: left;
   left: 5px;
   width: 400px;
   padding-bottom: 10px;
}
.left2{
   position: relative;
   float: left;
   left: 15px;
   width: 400px;
   padding-bottom: 10px;
}
a {
   text-decoration:none;
}
.link {
   color: #FFF;
   font-size:  11px;
   position: absolute;
}
.link2 {
   color: #FFF;
   font-size:  10px;
   position: absolute;
   text-align: center;
   top: 252px;
}
.link a{
color: #FFF;
font-decoration: none;
font-weight: bold;
}

.link a:hover{
color: #FFF;
text-decoration: underline;
font-weight: bold;
}
#topmenu {
   right: 0;
   position: absolute;
   background: url(images/topmenu.png) no-repeat top right;
   
   width: 760px; /* MENU width */
   height: 38px;
}
ul#topmenu {
   margin:0px; padding:0px;/* MARGIN MOVES MENU DOWN */
   padding: 5px 40px 0px 0px;
   position:absolute;/* MAKE SURE .CONTAINER POSITION IS RELATIVE TO KEEP MENU RIGHT ALIGNED WHEN ADDING MORE PAGES */
   right:0px;/* MAKES MENU RIGHT ALIGNED */
   text-align: right;
}
ul#topmenu li {
   display:inline;/* INLINE MAKES MENU HORIZONTAL */
   margin-left:60px;
}
ul#topmenu li a {
   font-size:14px;
      line-height:19px;
   text-decoration:none;
   color:#FFFFFF;/* MENU FONT COLOR */
   font-weight:bold;
   text-transform:none;
}
ul#topmenu li a.active, ul#topmenu li a:hover {
   color:#eae63d;/* MENU ROLLOVER COLOR */
}

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Select and order your favorite pics directly from your iPhone with MyCSS</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>

<body>

<div id="container">
   
  <div id="headerbg">
        <div class="headersub">
      <!-- Header start -->
      <ul id="topmenu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="mediapress.html">Press</a></li>

        <li><a href="contact.html">Contact</a></li>
        <li><a href="http://MyCSS.zendesk.com/forums/292331-faq">FAQ</a></li>
        </ul>
      <div class="text">
          <span style="font-size: 30px; color:#2595c8; line-height: 30px; font-weight: bold;">CONTACT US</span><br />
          <p> </p>
          <p><strong>General information</strong><br />

            <br />
For all general inquiries, please email at info(at)MyCSS(dot)com</p>
          <p><strong>Support</strong></p>
<p>sadsa</p>
<p> </p>
<p> </p>
<p>ds</p>
<p> </p>
<p> </p>
<p> </p>
<p>ds</p>
<p> </p>
<p> </p>
<p> </p>
<p>ds</p>
<p> </p>
<p> </p>
<p> </p>
<p>ds</p>
<p> </p>
<p> </p>
<p> </p>
<p>ds</p>
<p> </p>
<p> </p>
<p> </p>
<p>ds</p>
<p> </p>
        </div>

      <!-- Header end -->
      </div>
  </div>
   
   <div id="footer">
      <!-- Footer start -->
      <div class="footerholder">

         <div class="footercontent">
         <div class="link" style="left: 310px;"><a href="contact.html">Contact Us</a></div>
         <div class="link" style="left: 60px;"><a href="http://MyCSS.zendesk.com/forums/292331-faq">FAQ</a></div>
         <div class="link" style="left: 209px;"><a href="privacypolicy.html">Privacy Policy</a></div>
         <div class="link" style="left: 10px;"><a href="mediapress.html">Press</a></div>
         <div class="link" style="left: 103px;"><a href="partnerwithus.html">Partner with Us</a></div>

         <div class="link" style="left: 389px;"><a href="http://facebook.com/MyCSS"><img src="images/facebook.png" alt="facebook" width="142" height="39" border="0" /></a></div>
         <div class="link" style="left: 550px;"><a href="http://twitter.com/MyCSS"><img src="images/twitter.png" alt="twitter" width="100" height="39" border="0" /></a></div>
         <div class="link2" style="left: -256px;">
           ɠCopyright 2011, MyCSS
         </div>
         </div>
      </div>
      <!-- Footer end -->
   </div>

</div></div>
<div id="fixeddiv" style="position:absolute; width:32px;height:75px;left:0px;top:330px;background:none;">
<table border="0" width="32" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><a href="http://facebook.com/MyCSS"><img src="images/facebook_32.png" alt="facebook" width="32" height="32" border="0" /></a></td>
  </tr>

  <tr>
    <td width="100%"><a href="http://twitter.com/MyCSS"><img src="images/twitter_32.png" alt="twitter" width="32" height="32" vspace="5" border="0" /></a></td>
  </tr>
</table>
</div>
</body>
</html>

 

If you can live with only having the main content column push the footer, then fine. But this would pretty much call for a redesign, if the height of your navigation columns later  extends that of the content column.

Link to comment
https://forums.phpfreaks.com/topic/224870-page-height-problem/#findComment-1161891
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.