Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Need Help with my layout

    Well I have been designing a website for my teacher as a lil advanced project he has given me, so far it has only been designed for IE7 (im going to make it cross browser compatible later)

    but my problem is with the stretch of the side navigation. I want my side navigation to stretch with the content box as it grows, so i can have a nice black border going all the way down the page along with the side nav, Right now since the side navigation does not stretch down with the content, the border does not stretch itself down, So I am hoping somebody here can solve my dilemma. All I need is the side navigation divs to stretch itself down as the content part of the page gets longer. heres the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>MR Technical Test</title>
    <style type="text/css">
    
    /*-------------Misc.-------------*/
    
    html, body{
    height:100%;
    }
    
    body{
    min-width:850px;
    margin:0px;
    padding:0px;
    }
    
    /*--------------------------------*/
    
    
    /*-------------Header------------*/
    .headercontain
    {
    
    width:100%;
    height:150px;
    background-image:url('headergrad.png');
    margin:0px;
    padding:0px;
    }
    
    .logo
    {
    width:470px;
    height:150px;
    background-image: url('mrtlogo.png');
    clear:right;
    }
    
    .slogan
    {
    position:absolute;
    top:115px;
    left:275px;
    font-family:verdana, sans-serif;
    color:#9E9191;
    }
    
    .quote
    {
    position:absolute;
    top:15px;
    left:500px;
    min-width:25%;
    }
    
    div.headerstrip
    {
    height:25px;
    width:100%;
    background-color:#8D1D1D;
    margin:0px;
    padding:0px;
    }
    
    h3.header
    {
    color:white;
    text-align:center;
    position:absolute;
    left:55%;
    }
    
    /*-----------------------------------*/
    
    
    /*---------------Topnav--------------*/
    
    div.topnav
    {
    width:100%;
    height:30px;
    background-image:url('navtopgrad.png');
    border-right:1px solid black;
    }
    
    ul.move
    {
    float:right;
    position:relative;
    bottom:25px;
    padding-right:25%;
    }
    
    
    li.topnav
    {
    display:inline;
    padding-left:1em;
    }
    
    a.topnav
    {
    color:#000000;
    text-decoration:none;
    }
    
    a.topnav:hover
    {
    color:#8D1D1D;
    text-decoration:none;
    }
    
    div.search
    {
    background-color:#8D1D1D;
    width:200px;
    padding:0px;
    height:30px;
    color:#ffffff;
    padding-left:3px;
    }
    
    
    div.search
    {
    background-color:#8D1D1D;
    width:200px;
    padding:0px;
    height:30px;
    color:#ffffff;
    padding-left:3px;
    }
    
    
    
    /*-----------------------------------*/
    
    
    /*----------------Side navigation------------*/
    div.navside
    {
    border-right:1px solid black;
    width:203px;
    float:left;
    min-height:200%;
    padding:0px;
    margin:0px;
    }
    
    div.undernav
    {
    background-image:url('contentgrad.png');
    background-color:#000099;
    background-repeat:repeat-x;
    border-right:1px solid black;
    min-height:150px;
    height:100%;
    width:203px;
    }
    
    
    h3.navside
    {
    text-align:center;
    position:relative;
    top:25%;
    }
    
    div.navbutton
    {
    width:202px;
    height:50px;
    background-image:url('sidebtngrad.png');
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    }
    
    
    
    
    /*------------------------------------*/
    
    
    /*----------------Content--------------*/
    
    div.contentcontain
    {
    width:100%;
    background-image:url('contentgrad.png');
    background-repeat:repeat-x;
    padding:0px;
    }
    
    div.contenthead
    {
    width:70%;
    height:25px;
    background-color:#8D1D1D;
    margin:auto;
    margin-top:2em;
    }
    
    h3.contenthead
    {
    color:white;
    text-align:center;
    }
    
    div.contentbox
    {
    border:1px solid #8D1D1D;
    width:69.8%;
    margin:auto;
    padding:0px;
    background-image:url('contentboxgrad.png');
    background-color:#FEFEFE;
    background-repeat:repeat-x;
    min-height:110px;
    }
    
    p.contentbox
    {
    padding:1em;
    }
    
    a.read
    {
    color:#4D7DF7;
    text-decoration:none;
    font-weight:bold;
    float:right;
    padding-right:1em;
    margin:0px;
    }
    
    /*-------------------------------------*/
    
    
    /*--------------Footer-----------------*/
    
    div.footer
    {
    width:100%;
    height:25px;
    background-color:#8D1D1D;
    border:1px solid black;
    }
    
    /*-------------------------------------*/
    
    </style>
    </head>
    <body>
    
    <!-- Header -->
    <div class="headercontain">
    <p class="quote">"To be concious that you are ignorant of the facts is a great step to
     knowledge"<br />
    - Benjamin Disraeli</p> 
    <div class="logo">
    <h4 class="slogan">My Slogan Here</h4>
    </div>
    </div>
    
    <!-- Start Top Navigation -->
    <div class="topnav">
    <div class="search">
    <form class="search">
    Search: <input type="text">
    </form>
    </div>
    <ul class="move">
    <li class="topnav"><a href="#" class="topnav">Home</a></li>
    <li class="topnav"><a href="#" class="topnav">Archives</a></li>
    <li class="topnav"><a href="#" class="topnav">Downloads</a></li>
    <li class="topnav"><a href="#" class="topnav">Support</a></li>
    <li class="topnav"><a href="#" class="topnav">About</a></li>
    <li class="topnav"><a href="#" class="topnav">Services</a></li>
    </ul>
    </div>
    <!-- End Top Navigation -->
    </div>
    <!-- End Header -->
    
    
    <!-- Start Content and Side navigation -->
    <div class="contentcontain">
    
    <!-- Start headerstrip -->
    <div class="headerstrip">
    <h3 class="header">Header Here</h3>
    </div>
    <!-- End Headerstrip -->
    
    <!-- Start Sidenavigation -->
    
    <div class="navside">
    <div class="navbutton">
    <a href="#" class="topnav"><h3 class="navside">Home</h3></a>
    </div>
    <div class="navbutton">
    <a href="#" class="topnav"><h3 class="navside">Sample Tags</h3></a>
    </div>
    <div class="navbutton">
    <a href="#" class="topnav"><h3 class="navside">Template Info</h3></a>
    </div>
    <div class="navbutton">
    <a href="#" class="topnav"><h3 class="navside">Free Templates</h3></a>
    </div>
    <div class="navbutton">
    <a href="#" class="topnav"><h3 class="navside">Premium Templates</h3></a>
    </div>
    <div class="navbutton">
    <a href="#" class="topnav"><h3 class="navside">Affiliates</h3></a>
    </div>
    
    <!-- Make div.undernav Expand with the content, cannot figure out how to -->
    
    <div class="undernav">Test
    <!-- End --></div>
    
    
    
    
    </div>
    <!-- End Side navigation -->
    
    
    <!-- Start Content -->
    <div class="contenthead">
    <h3 class="contenthead">Support Styleshout</h3>
    </div>
    <div class="contentbox">
    <p class="contentbox">
    If you are interested in supporting my work and would like to contribute, you are welcome
    to make a small 
    donation through the
    donate link on my website - it will be a great help and will surely be appreciated.
    </p>
    <a href="#" class="read">Read More...</a>
    </div>
    
    
    <div class="contenthead">
    <h3 class="contenthead">Template Info</h3>
    </div>
    <div class="contentbox">
    <p class="contentbox">
    Template Info
    Refresh is a free, W3C-compliant, CSS-based website template by styleshout.com
    . This work is distributed under the Creative 
    Commons Attribution 2.5 License, which means
     that you are free to use and modify it for any purpose. All I ask is that you include a 
    link back to my website in your credits.For more free designs, you can visit my website 
    to see my other works.Good luck and I hope you find my free templates useful!
    
    </p>
    <a href="#" class="read">Read More...</a>
    </div>
    
    
    <div class="contenthead">
    <h3 class="contenthead">Template Info</h3>
    </div>
    <div class="contentbox">
    <p class="contentbox">
    Template Info
    Refresh is a free, W3C-compliant, CSS-based website template by styleshout.com
    . This work is distributed under the Creative 
    Commons Attribution 2.5 License, which means
     that you are free to use and modify it for any purpose. All I ask is that you include a 
    link back to my website in your credits.For more free designs, you can visit my website 
    to see my other works.Good luck and I hope you find my free templates useful!
    
    </p>
    <a href="#" class="read">Read More...</a>
    </div>
    </div>
    </div>
    <!--End Content and Side navigation -->
    <!--Start Footer-->
    <div class="footer">
    </div>
    </body>
    </html>
    and heres a zip file of the .htm and the pictures if you would like them:
    MR T-lhs-b3-03.zip

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to use the faux columns technique.

    You also have a case of divitis.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,635
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    Quote Originally Posted by elementis0 View Post
    […] it has only been designed for IE7 (im going to make it cross browser compatible later)
    That’s the wrong approach. Although IE 7 is better than IE 6 it’s still IE with a weird “hasLayout” model. If you wanna create cross-browser compatible websites test them in Opera/Firefox/Safari/Konqueror. Chances are good that they will look alright in IE automatically – and if not then you’re gonne fix IE’s errors. That’s the way to go and it saves you a lot of work in the first place.

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well Stephan, I actually usually do design with firefox, opera etc... but at school I have no other choice than to use IE7.

    As for the faux columns layout, I actually already read that article before but it was not exactly what I am searching for. I wanna just be able to expand the white background of the side nav with the content without a repeated background image, since the background image of the gradient I have is not vertically repeatable.

    Can anybody here just look at the code and see if they can edit it themselves for the side nav to auto stretch with the content? Is there another way to do this without faux columns?

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Just try setting the height of the nav column to 100%. It should stretch with the height of the entire page no matter how long the main content is.
    Scott Stewart
    Always happy to learn from pros.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by ScottInTexas View Post
    Just try setting the height of the nav column to 100%. It should stretch with the height of the entire page no matter how long the main content is.
    No it won't. It will only go as high as the window. If the content gets longer than the viewable area of the window it won't get bigger.

    Quote Originally Posted by elementis0 View Post
    Can anybody here just look at the code and see if they can edit it themselves for the side nav to auto stretch with the content? Is there another way to do this without faux columns?
    Sure but I'm not about to download a zip file. Put up your page somewhere on a free host or something. Help us help you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright, Ill make a freewebs account really quick and will hopefully have it online tomorrow for you guys to look at. (I dont have internet at home right now or itd be up by today, i have to do it all at school)

    So thanks for all the support so far, Ill have it online soon so you guys can help me resolve my problem.


  •  

    Posting Permissions

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