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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Verticality Issues.

    Hi there!

    I have been a graphic design/artist for a while now and always had the luxury of others doing the coding for me until recently. Anyhow, I'm working on a website for myself and getting deeper into CSS than I have ever been, and I'm encountering some issues.

    Here's a link to the page in question: http://www.inanition.ca/test.html
    (I read the rules and guidelines and do not see anything against posting links, unless this is considered self-promotion, which is not my intention..)

    What I'm trying to do:

    1. I'm trying to make those hazard stripe bars on either side of the page span the height of the browser area and remain in a fixed position without scrolling. Whenever I attempt to use position: fixed, however, it screws with the alignment of the entire page. Currently, they are floating to their respective sides and are set to a pixel-based height as placeholders. Any help would be appreciated!!

    2. Secondly, I'm trying to make those plain metal plates at the bottom, beneath the content windows, stretch the remainder of the way to the bottom of the browser window/site. They currently exist in three separate columns and will only be seen if the content in column is longer than the others. I have fooled around with all kinds of values and I just can't seem to get it to work at all. They are currently set with a arbitrary pixel-based height to act as placeholders. Again, any help would be appreciated!!

    Here's the code I'm using so far:

    CSS
    Code:
    /* CSS Document */
    
    body {
      
      background-image: url(http://www.inanition.ca/images/stonebackgroundrepeating.gif);
      background-repeat: repeat;
      background-attachment: fixed;
      background-color: #663300;
      font-family: Tahoma, Geneva, Verdana, Arial;
      font-size: 10px;
      color: #FFFFFF;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
          
      }
          
    a {
    
      border: 0px;
      text-decoration: none;
      outline: none;
            
      }
            
    a:link {
            
      color: #999999;
    
      }
    
    a:visited {
            
      color: #999999;
    
      }
    
    a:hover {
    
      color: #999999;
    
      }
    
    img {
    
      border: 0px;
    
      }
    
    #outercontainer {
    
      width: 904px;
      margin: 0 auto;
      
      }
    
    #hazardleft {
    
      width: 52px;
      height: 1000px;
      background-image: url("http://www.inanition.ca/images/hazardleft.gif");
      float: left;
      
      }
      
    #hazardright {
    
      width: 52px;
      height: 1000px;
      background-image: url("http://www.inanition.ca/images/hazardright.gif");
      float: right;
      
      }
    
    #pagecontainer {
    
      width: 800px;
      float: left;
      
      }
      
    #header {
    
      width: 800px;
      height: 170px;
      
      }
      
    #navbar {
    
      width: 800px;
      height: 50px;
      clear: bottom;
      
      }
      
    #leftcontainer {
    
      float: left;
      
      }
       
    #leftheader {
    
      width: 150px;
      height: 42px;
      
      }
      
    #leftbody {
    
      width: 150px;
      text-align: center;
      background-image: url("http://www.inanition.ca/images/insetleft.gif");
      background-repeat: repeat;
      padding-top: 20px;
      padding-bottom: 20px;
      
      }
      
    #leftfooter {
    
      width: 150px;
      height: 41px;
      background-image: url("http://www.inanition.ca/images/bottomleft.gif");
      
      }
      
    #leftfiller {
    
      width: 150px;
      height: 500px;
      background-image: url("http://www.inanition.ca/images/fillerleft.gif");
      
      }
      
       
    #middlecontainer {
    
      float: left;
      
      }
    
    #middleheader {
    
      width: 500px;
      height: 42px;
      
      }
      
    #middlebody {
    
      width: 500px;
      background-image: url("http://www.inanition.ca/images/insetmiddle.gif");
      background-repeat: repeat;
      padding-top: 20px;
      padding-bottom: 20px;
      
      }
      
    #middlecontent {
    
      width: 460px;
      margin: 0 auto;
    
      }
      
    #middlefooter {
    
      width: 500px;
      height: 41px;
      background-image: url("http://www.inanition.ca/images/bottommiddle.gif");
      
      }
      
    #middlefiller {
    
      width: 500px;
      height: 500px;
      background-image: url("http://www.inanition.ca/images/fillermiddle.gif");
      
      }
      
    #rightcontainer {
    
      float: right;
      
      }
      
    #rightheader {
    
      width: 150px;
      height: 42px;
      
      }
      
    #rightbody {
    
      width: 150px;
      text-align: center;
      background-image: url("http://www.inanition.ca/images/insetright.gif");
      background-repeat: repeat;
      padding-top: 20px;
      padding-bottom: 20px;
      
      }
    
    #rightfooter {
    
      width: 150px;
      height: 41px;
      background-image: url("http://www.inanition.ca/images/bottomright.gif");
      
      }
      
    #rightfiller {
    
      width: 150px;
      height: 500px;
      background-image: url("http://www.inanition.ca/images/fillerright.gif");
      
      }
    The HTML:
    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="cs" lang="cs">
    
      <head>
      
        <meta name="generator" content="PSPad editor, www.pspad.com" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Inanition.</title>
        <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
        
      </head>
      
        <body>
    
    
        <div id="outercontainer">
          
          <div id="hazardleft"></div>
          <div id="hazardright"></div>
          <div id="pagecontainer">
          
            <div id="header"><img src="images/header.gif" width="800" height="170"></div>
            <div id="navbar"><img src="images/navnews.gif" width="127" height="50"><img src="images/navportfolio.gif" width="164" height="50"><img src="images/navtutorials.gif" width="170" height="50"><img src="images/navresources.gif" width="175" height="50"><img src="images/navcontact.gif" width="164" height="50"></div>
    
            <div id="leftcontainer">
          
              <div id="leftheader"><img src="images/topleft.gif" width="150" height="42"></div>
              <div id="leftbody">
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />            
              </div>
              <div id="leftfooter"><img src="images/bottomleft.gif" width="150" height="41"></div>
              <div id="leftbody">
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />            
              </div>
              <div id="leftfooter"></div>
              <div id="leftfiller"></div>
              
            </div>
            <div id="rightcontainer">
          
              <div id="rightheader"><img src="images/topright.gif" width="150" height="42"></div>
              <div id="rightbody">
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />   
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />
                Test.<br />   
              </div>
              <div id="rightfooter"></div>
              <div id="rightfiller"></div>
              
            </div>
            <div id="middlecontainer">
          
              <div id="middleheader"><img src="images/topmiddle.gif" width="500" height="42"></div>
              <div id="middlebody">
              
                <div id="middlecontent">
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                  Test.<br />
                </div>
                
              </div>
              <div id="middlefooter"></div>
              <div id="middlefiller"></div>
                            
            </div>
            
          </div>
         
        </div>
         
        </body>
    
    </html>
    Thanks in advance!!

  • #2
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nothing like starting in the deep end!

    1) Couple of ways spring to mind for the hazard bars, using absolute positions or (and probably the easiest) as you're using a fixed width content is to create an image the width you need them to be apart (so you would have one image that held both the left and right hazards) and set that the background image of the first div then just align all your content in the middle.


    2) bit more difficult to explain but if you search for faux columns in google (or the forum) you should find something
    Last edited by brampmap; 10-26-2007 at 09:04 PM.

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, okay. So, I think the solution to both problems is 'faux columns'. If I were to make a background image that included the rock, the hazard bars and the metal plates that I wish to use as filler, it'll kill two birds with one stone.

    I hope! (it sounds like aligning the background may be a bit of a nightmare)

    Thanks for the suggestions! Especially the second one, which opened my eyes to a whole new world of possibilities!

    I'll give it a shot and let you know how I'm doing.
    Last edited by moptop; 10-26-2007 at 09:33 PM.

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It worked perfectly, man. Thanks again! You're a real life-saver.


  •  

    Posting Permissions

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