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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Fluid site problems

    The sites I have built up till now have been fixed, with no expansion at all. Now I have one that the customer wants to be fluid but I can't figure out how to do it. I have read some articles on the web on this, but they all have solid colors in the div backgrounds. This site has to have images instead.

    Here is a link:
    http://www.aaalandb.com/testfolder/aaasite.html

    The sidebar has an image in the background. I have tried everything I can think of to get it to work, but it won't expand to fill the space.

    The main text area goes over the top of the footer.

    In the header we have one site where the background image is wider than the browser window. That way when the user expands the window to the right more of the background image is exposed. But that site uses tables for the layout and I want to avoid that.

    The thing I don't understand, it's all valid (except for the IE workaround, min-height).

    Here is the html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheets/styleAAA.css">
    </head>
    
    <body>
    
    <div><!-- site wrapper -->
      
      <!-- header -->
      <div id="header">  
        <img src="images/header_art_short.jpg" height="115px" width="808px" alt="">  
      </div> <!-- /header -->
      
      <!-- top nav -->
      <div id="menu">
        <img src="images/menu_footer_art.jpg" height="30px" width="808px" alt=""> 
      </div> <!-- /top nav -->
      
      <!-- lower container -->
      <div id="lowercontainer">  
        <div id="sidebar"></div> <!-- sidebar -->
     
        <div id="textarea">  
          <h1>one piece or a million</h1><br><br>
          
          Quality<br><br>
          
          AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
                AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
          AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
        </div> <!-- textarea-->  
      </div><!-- /lower container -->
      
      <!-- footer -->
      <div id="footer">
        <img src="images/menu_footer_art.jpg" height="30px" width="808px" alt="">   
      </div> <!-- /footer -->
    </div><!-- /site wrapper -->
    
    </body>
    </html>
    Here is the CSS:
    Code:
    /
    * {
      margin: 0;
      padding: 0;
      }
    
    body {
      font-size: 100%;
      line-height: 1.125em; /* 16x1.125=18 */
      font-family: verdana, helvetica, sana-serif;
      }
    
    .bodytext p {
      font-size: 0.875em;
      }
    
    h1 {
       font-size: 3em;
       line-height: 1.125em;
       color: #4b3c37;
       }
    
    p {
       font-size: 1em;
       }
    
    #wrapper {
      margin: 0;
      height: 100%;
      position: absolute;
      }
      
    #header {
      top: 0;
      left: 0;
      height: 115px;
      background-color: #c82832;
      }
      
    #footer {
      height: 30px;
      background-image: url('../images/menu_footer_art.jpg');
      }
        
    #menu {
      height: 30px;
      background-image: url('../images/menu_footer_art.jpg');
      }
      
    #sidebar {
      float: left;
      height: expression( this.scrollHeight < 406 ? "405px" : "auto" ); /* sets min-height for IE */
      min-height: 405px; /* sets min-height value for all standards-compliant browsers */
      width: 144px;
      background-image: url('../images/sidebar_art.jpg');
      background-repeat: repeat-y;
      } 
      
    #textarea {
      top:145px;
      left: 144px;
      height: 100%;
      position: absolute;
      background-image: url('../images/longshot.jpg');
      background-repeat: no-repeat;
      padding: 40px
      }

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    hope this helps

    CSS (new)
    Code:
    * {
    margin:0pt;
    padding:0pt;
    }
    body {
    font-family:verdana,helvetica,sana-serif;
    font-size:100&#37;;
    line-height:1.125em;
    }
    .bodytext p {
    font-size:0.875em;
    }
    h1 {
    color:#4B3C37;
    font-size:3em;
    line-height:1.125em;
    }
    p {
    font-size:1em;
    }
    #header {
    background-color:#C82832;
    background-image:url(../images/header_art_short.jpg);
    background-repeat:repeat;
    height:115px;
    left:0pt;
    top:0pt;
    }
    #footer {
    background-image:url(../images/menu_footer_art.jpg);
    height:30px;
    padding-left:130px;
    }
    #menu {
    background-image:url(../images/menu_footer_art.jpg);
    height:30px;
    }
    #sidebar {
    }
    #textarea {
    background-image:url(../images/longshot.jpg);
    background-repeat:no-repeat;
    margin-left:150px;
    margin-top:30px;
    padding:40px;
    }
    .bodyWrap {
    background-image:url(../images/sidebar_art.jpg);
    background-position:left top;
    background-repeat:repeat-y;
    float:left;
    min-height:405px;
    overflow:hidden;
    }
    HTML(new)this is inside the body.
    Code:
    
    <div><!-- site wrapper -->
      
      <!-- header -->
      <div id="header">
        
     
        
      </div> <!-- /header -->
      
      <!-- top nav -->
      <div id="menu">
      
        <img alt="" src="images/menu_footer_art.jpg" width="808" height="30">
        
      </div> <!-- /top nav -->
      
      <!-- lower container -->
      
    <div class="bodyWrap">
    
        
       <!-- sidebar -->
        
        <div id="textarea">
          
          <h1>one piece or a million</h1><br><br>
          
          Quality<br><br>
          
          AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
                AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
          AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
    
        </div> <!-- textarea-->
    <!-- footer -->
      <div id="footer">
      
        <img alt="" src="images/menu_footer_art.jpg" width="808" height="30">
        
      </div> <!-- /footer -->    
    
    </div><!-- /lower container -->
      
      
      
    </div><!-- /site wrapper -->
    let me know if that woorks

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    It works but I'm not sure why.

    The biggest change I see is the background image calls in the CSS are first. Or am I missing something?

    (I'll always ask how/why things work. One day I hope to be able to do this without asking for help. Not that it's a bad thing to talk to you folks here, I just hope to become a helper instead of a helpee.)

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Well, i made the left hand sid image party of the body wrap. That way it will repeat along with the content. It just works a little better that way.

    Then i included the footer inside of the body wrap and just positioned it with padding. Your main problem was your Position:absolute;. It will give you problems. Try to avoid positioning property at all costs. Use floats and margins and paddings. They work better across cross browser.

    Your header was CSS and then an image placed in it. So i just placed it in the CSS so it would repeat, i didnt know if you needed that but i did it any ways.

    If you are still confused on why it worked let me know and i will try to better explain it.

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    jc;
    Thanks. I understand most of what you are saying.

    I don't get the problem with the position: absolute. Since people say it causes problems I don't use as much as I used to. Seems I should maybe stop all together? Do you know why there is a problem with it?

    Does the order of the calls in the CSS matter?

    The sidebar/textarea set up you did I think is a good idea. Just never thought of doing it like that. I thought the div containing the side and text would control them.

    How do I add a menu to the sidebar now? I had it in it's own div because I thought that was best for adding the navigation.

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    I don't get the problem with the position: absolute. Since people say it causes problems I don't use as much as I used to. Seems I should maybe stop all together? Do you know why there is a problem with it?
    To me its only necassary on using it for javascript, or even a complicated CSS menu. I would avoid using it unless necassary.

    Does the order of the calls in the CSS matter?
    It can i believe if you are using the value:inherit;. It inherits the previous value for that property. Like if you had
    Code:
    body{
    color:#000;
    }
    h1 {
    color:inherit;
    }
    than the color for h1 would be black because of the body.

    How do I add a menu to the sidebar now? I had it in it's own div because I thought that was best for adding the navigation.
    Create a nested div and float it to the left, then place your css in that div for a side menu. The background image is there as a back ground. You will also have to reduce the padding on the text area to, or it will shoot more to the right.

    If you have anymore questions let me know.

  • Users who have thanked jcdevelopment for this post:

    j1adobe (07-17-2008)

  • #7
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I'm good, and the help is greatly appreciated.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a look at a standard two column layout, http://bonrouge.com/2c-hf-fluid.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    abduraooft;

    Thanks, I have not seen that one before.

    The problem I was having was not knowing what the things inside of the main divs were supposed to be doing.

    Little by little, I'm learning.


  •  

    Posting Permissions

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