SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: footer problems

  1. #1
    SitePoint Guru brent5392's Avatar
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question footer problems

    OK first, here is my code.

    HTML Code:
    <!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=iso-8859-1" />
    <title>page title</title>
    <style type="text/css">
    <!--
    body,td,th {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	color: #000;
    }
    html, body {height:100%;}
    body {
    	background-color: #770000;
    	margin: 0;
    	padding: 0;
    	height:100%;
    }
    a:link,a:visited {
    	color: #000088;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    	color: #0000AA;
    }
    a:active {
    	text-decoration: none;
    	color: #0000AA;
    }
    #holder {
    	width: 100%;
    	height: 100%;
    	position: absoulute;
    	margin-bottom: -30px;
    	text-align:left;
    }
    #main {
    	margin-left: 230px;
    	margin-right: 230px;
    }
    #left {
    	float: left;
    	width: 200px;
    }
    #right {
    	float: right;
    	width: 200px;
    }
    .title {
    	height: 30px;
    	background:url(title_bg.gif) repeat-x;
    	text-align:center;
    }
    .text {
    	height: 20px;
    	padding: 5px 0;
    }
    
    #header {
    	margin: 0;
    }
    #logo {
    	height:100px;
    	background-color:#888888;
    }
    #nav {
    	background: url(nav_bg.gif) repeat-x;
    	height:30px;
    	text-align:center;
    }
    .left {
    	float:left;
    }
    .right {
    	float:right;
    }
    .box {
    	margin-top:20px;
    	background-color: #fff;
    }
    .content {
    	padding: 10px;
    	background-color: #fff;
    	border:#000000 1px solid;
    }
    .maincontent {
    	padding: 0 30px 10px 30px;
    	background-color: #fff;
    	border:#000000 1px solid;
    }
    #footer {
    	height:30px;
    	background: url(title_bg.gif);
    	text-align:center;
    	clear:both;
    	position: relative;
    }
    .iframe {
    	background-color: #fff;
    	border:#000000 1px solid;
    }
    iframe {
    	border:none;
    }
    -->
    </style>
    </head>
    <body>
    <div id="holder">
      <div id="header">
        <div id="logo"></div>
        <div id="nav">
          <div class="text"> &nbsp; </div>
        </div>
      </div>
      <div id="left">
        <div class="box">
          <div class="title"><img src="title_right.gif" class="right" alt="right" />
            <div class="text">some title </div>
          </div>
          <div class="content"> &nbsp; </div>
        </div>
        <div class="box">
          <div class="title"><img src="title_right.gif" class="right" alt="right" />
            <div class="text">some title</div>
          </div>
          <div class="content"> &nbsp; </div>
        </div>
        <div class="box">
          <div class="title"><img src="title_right.gif" class="right" alt="right" />
            <div class="text">some title</div>
          </div>
          <div class="content"> &nbsp; </div>
        </div>
      </div>
      <div id="right">
        <div class="box">
          <div class="title"><img src="title_left.gif" class="left" alt="left" />
            <div class="text">some title</div>
          </div>
          <div class="content"> &nbsp;
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
          </div>
        </div>
        <div class="box">
          <div class="title"><img src="title_left.gif" class="left" alt="left" />
            <div class="text">some title</div>
          </div>
          <div class="iframe">
            <iframe src="view.php" height="100" width="199"></iframe>
          </div>
        </div>
        <div class="box">
          <div class="title"><img src="title_left.gif" class="left" alt="left" />
            <div class="text">some title </div>
          </div>
          <div class="iframe">
            <iframe src="anotherpage.php" height="60" width="199"></iframe>
          </div>
        </div>
      </div>
      <div id="main">
        <div class="box">
          <div class="title"><img src="title_left.gif" class="left" alt="left" /><img src="title_right.gif" class="right" alt="right" />
            <div class="text">Main content title</div>
          </div>
          <div class="maincontent">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tellus  elit, rhoncus et, tincidunt eu, congue vel, lorem. Sed leo nisl,  dignissim at, dapibus vel, luctus ac, quam. Sed vulputate mauris.  Pellentesque quam. Vestibulum diam. Nullam facilisis. Proin imperdiet  leo eu ligula. Maecenas magna. In dui leo, sodales vitae, pellentesque  a, fringilla quis, odio. Aliquam eros velit, molestie dictum, fringilla  eu, sagittis quis, sem. Proin vehicula sagittis leo. Phasellus turpis  metus, scelerisque sed, tincidunt eu, euismod vitae, sem. Aenean orci.  Nullam sem purus, suscipit dictum, iaculis suscipit, dapibus vitae,  arcu. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Donec pharetra. Aliquam euismod  bibendum enim. Morbi sit amet mi. Ut neque lacus, euismod ut, posuere  ut, fermentum eget, leo. In eleifend massa nec purus. </p>
            <p>Pellentesque ultrices leo ac erat. Aenean dapibus sapien sit amet  urna. Sed ullamcorper mattis sem. Mauris magna. Etiam varius urna quis  mauris. Aenean tempor erat. Integer malesuada. Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Suspendisse eget urna quis dolor viverra elementum. Pellentesque quis  lectus. Quisque tortor quam, posuere et, varius eget, consectetuer  vitae, tortor. Duis gravida, ligula at ullamcorper tincidunt, tellus  ante fermentum turpis, gravida condimentum massa odio vel diam.  Suspendisse potenti. Pellentesque nulla. Nullam tellus. Proin quam.  Mauris gravida turpis in mauris. Suspendisse sed diam vitae sapien  feugiat commodo. Etiam mattis. In justo magna, tristique vitae,  pulvinar non, malesuada tempor, lectus. </p>
            <p>Suspendisse eu elit cursus sapien posuere consectetuer. Vestibulum  orci ligula, viverra eu, ullamcorper vel, vestibulum eget, nisl. Fusce  et lacus quis lectus tempus ultrices. Donec id ante vel lacus congue  vehicula. Sed at ligula a quam volutpat imperdiet.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tellus  elit, rhoncus et, tincidunt eu, congue vel, lorem. Sed leo nisl,  dignissim at, dapibus vel, luctus ac, quam. Sed vulputate mauris.  Pellentesque quam. Vestibulum diam. Nullam facilisis. Proin imperdiet  leo eu ligula. Maecenas magna. In dui leo, sodales vitae, pellentesque  a, fringilla quis, odio. Aliquam eros velit, molestie dictum, fringilla  eu, sagittis quis, sem. Proin vehicula sagittis leo. Phasellus turpis  metus, scelerisque sed, tincidunt eu, euismod vitae, sem. Aenean orci.  Nullam sem purus, suscipit dictum, iaculis suscipit, dapibus vitae,  arcu. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Donec pharetra. Aliquam euismod  bibendum enim. Morbi sit amet mi. Ut neque lacus, euismod ut, posuere  ut, fermentum eget, leo. In eleifend massa nec purus. </p>
            <p>Pellentesque ultrices leo ac erat. Aenean dapibus sapien sit amet  urna. Sed ullamcorper mattis sem. Mauris magna. Etiam varius urna quis  mauris. Aenean tempor erat. Integer malesuada. Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Suspendisse eget urna quis dolor viverra elementum. Pellentesque quis  lectus. Quisque tortor quam, posuere et, varius eget, consectetuer  vitae, tortor. Duis gravida, ligula at ullamcorper tincidunt, tellus  ante fermentum turpis, gravida condimentum massa odio vel diam.  Suspendisse potenti. Pellentesque nulla. Nullam tellus. Proin quam.  Mauris gravida turpis in mauris. Suspendisse sed diam vitae sapien  feugiat commodo. Etiam mattis. In justo magna, tristique vitae,  pulvinar non, malesuada tempor, lectus. </p>
            <p>Suspendisse eu elit cursus sapien posuere consectetuer. Vestibulum  orci ligula, viverra eu, ullamcorper vel, vestibulum eget, nisl. Fusce  et lacus quis lectus tempus ultrices. Donec id ante vel lacus congue  vehicula. Sed at ligula a quam volutpat imperdiet.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="text">footer here</div>
    </div>
    </body>
    </html>
    I am having problems with the footer in FireFox. It is not appearing at the end of the document, but instead at the bottom of the screen.

    I also have another problem with IE. The main contents title has a gap on both sides. why?

    Thanks in advance,
    Brent
    PHP | MySQL | (X)HTML | CSS

  2. #2
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may wish to look this up in quest for a well-done CSS layout:

    http://alistapart.com/articles/holygrail

    http://www.infocraft.com/articles/ho..._a_list_apart/
    Be not too sure that none of the old magic endures...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •