SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    NH USA
    0 Post(s)
    0 Thread(s)

    Question Question for paul.

    Hey paul, I have been working with one of your layouts trying to get a special effect but i can't seem to get it to work?

    Here is the code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    html, body {height:100%}
    body {margin: 0;padding: 0;font: x-small arial, hevetica, sans-serif; text-align: center;}
    html>body #container {height:auto;}
    #container {margin: 0 auto;width: 100%; height:99.8%; min-height:100%; text-align: left; background-color: #cccccc;position:relative;}
    html>#container {height:auto;}
    #headercontain {height: 122px; width:100%; background-color:#cccccc; border-top:1px solid #444444; margin:0; position:relative; z-index:2;}
    #header {height: 122px; width:785px; background-color: #ffffff; margin:0 auto; padding:0; position:relative; text-align:center; border:1px solid white;}
    #logo {width: 785px; height: 122px; margin:0px; padding:0px;}
    #LogoImage {background: transparent url(../images/Sonalyst.jpg) no-repeat left top; position:absolute; left:0; top:0; display:block; height:122px; width:785px;}

    #mainnav {width:100%; background-color: #ffffff; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; position:relative; z-index:2;}
    #navigation {width:786px; margin: 0 auto;}
    #navigation p {display:none}
    #nav, #nav ul {padding:0; margin:0; list-style:none; text-align:center;}
    #nav a {display:block; width:194px; color: #ffffff;}
    #nav a:hover {background-color: #555555;}
    #nav li {float: left; width:194px; background-color: #333333; border:1px solid #ffffff;}
    #nav li ul {position: absolute; width: 10em; left: -999em;}
    #nav li:hover ul, #nav li.sfhover ul {left: auto;}
    #clearnav {height:0px; width:100%; clear:both}

    #sidebar {float: right; width: 170px; padding:5px 0 ;}

    #content {width: 785px; padding:5px 0 10px; background-color:#ffffff; margin: 0 auto;}
    #content p, #sidebar p, #mainnav p, #header p,#footer p {margin:0 5px 5px 5px}
    #footer {position:absolute; bottom:0; width:100%; background-color: #ffffff;}
    #clearfooter {height:1px;width:100%;clear:both}
    #copyright {margin: auto; position:relative; bottom:0; width:786px; background-color: #41647F; text-align:center; color:#ffffff;}
    <div id="container">
    <div id="headercontain">
    <div id="header"><h1><a href="index.asp" id="LogoText">Sonalyst</a><br />Network and Security Analyst<a href="index.asp" title="Sonalyst: Security and Network Analyst" id="LogoImage"></a></h1></div>
    <div id="mainnav">
    <div id="navigation"><p>Navigation/p>
    <ul id="nav">
    <li><a href="Services.asp">SERVICES</a>
    <li><a href="Professional.asp">Professional Services</a></li>
    <li><a href="NetAssess.asp">Network Assessment Services</a></li>
    <li><a href="VoIP.asp">VoIP Services</a></li>
    <li><a href="Security.asp">Security Services</a></li>
    <li><a href="SAN.asp">SAN Services</a></li>
    <li><a href="Contact.asp">CONTACT US</a></li>
    <li><a href="News.asp">NEWS</a></li>
    <li><a href="ChannelPart.asp">CHANNEL PARTNERS</a></li>
    <div id="clearnav"></div>
    <div id="content">
    <p>Footer stays at the bottom of the window unless the content is longer then
    it stays at the bottom of the document.</p>
    <p>Footer stays at the bottom of the window unless the content is longer then
    it stays at the bottom of the document.</p>
    <div id="clearfooter"></div>
    <!-- to clear footer -->
    <div id="footer">
    <div id="copyright">Copyright 2004 Sonalyst</div>

    The big problem is i want the bounding box around the content to strech all the way down to the footer.

    Can this be done? Am i missing something?

    Thanks for all your help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    The simplest way to do this is to repeat a background gif down the y-axis of the container. Make yourself an image of solid white colour and make it 785px x 5px.

    The image will still be a very small file size and will hardly hold the page up at all. (Don't be fooled into thinking that if you make the image 1px that it will save a bit of bandwidth etc because it will then actually take longer to draw on the screen and may flicker also).

    #container {background:#ccc url(images/centrebg.gif) repeat-y center top;
    margin: 0 auto;width: 100%; height:99.8%; min-height:100%; text-align: left; position:relative;}
    This is the easiest way and most cross browsers friendly way to do it and the html can remain untouched.

    I can do it without an image but will involve some extra nestings and using display:table for mozilla and display:table-cell for opera and some other tweaking which frankly isn't worth the effort when the image solution is so easy and keeps the html clean.

    Hope thats ok.


  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    NH USA
    0 Post(s)
    0 Thread(s)

    Talking Wow

    Why didn't i think of that... You are the man paul. I really appreciate the help!

    It is so great that we all have someone who can help when we need it

    Thanks again



Posting Permissions

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