SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    nashville
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS background positioning problem

    ok try this on for size for each example you will need to have your monitor set to at least 1280x1024 to see the problem.

    Ive got this problem with my background alignment. I am trying to set the greenish middle color extend all the way to the bottom of the browser (if the content is not long enough).

    Sample 1
    Site - http://www.square1digital.com/client...ite/index.html
    css - http://www.square1digital.com/client.../css/basic.css

    // this version assigns a gif with the greenish color to the background of the body using css. It works great until you resize your browser to anything less than 900px wide. Then the background seems to do the centering of the graphic with different math.


    Sample 2
    Site - http://www.square1digital.com/client...te/index2.html
    css - http://www.square1digital.com/client...css/basic2.css

    // this version assigns a div tag (on an z-index lower than the other divs) with the color assigned to the background-color in css for id=bg. This version solves the left to right issue by creating a div that is really, really tall, but the overflow:hidden setting for id=bg does not appear to be working and now I have the browser scrolling the height of the div tag.


    Any help would be nice.


    PS I also am not a big JS coder and might have a question or two about resizing the iframe so that it resets the browsers scrollbars.

    lh

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,515
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if this is what your after but it may help.
    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">
    <!-- code by Square1Digital.com -->
    <head>
    <title>Big Daddy Weave</title>
    <meta name="description" content="Big Daddy Weave" />
    <meta name="keywords" content="Big Daddy Weave" />
    <meta name="author" content="Square1Digital.com - Nashville Web Design, Nashville Graphic Design, Web Design Studio, Internet Design Nashville Tennessee" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="false" />
    <meta name="language" content="English" />
    <meta name="copyright" content="copyright 2004 Big Daddy Weave" />
    <meta name="robots" content="ALL" />
    <meta name="robots" content="INDEX, FOLLOW" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="document-distribution" content="Global" />
    <meta name="document-state" content="Static" />
    <meta name="cache-control" content="no-cache" />
    <meta name="Rating" content="General" />
    <meta name="revisit-after" content="30 Days" />
    <meta name="document-type" content="Web Page" />
    <style type="text/css">
    /* Type CSS rules here and they will be applied
    to pages from 'editcss'
    immediately as long as you keep this window open. */
    /**** LINK-tag style sheet basic.css ****/
    /* CSS Document */
    body, html{
     overflow-x: hidden;
     voice-family: "\"}\"";
     voice-family: inherit;
     overflow:-moz-scrollbars-horizontal-none;
    }
    body {
     margin:0px;
     padding:0px;
     background: #762700;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     text-align:center;
     color:#FFF;
    }
    .white {
     color:#fff;
     }
    #bg {
     position:absolute;
     top:0px;
     left:50%;
     width:650px;
     height:100%;
     margin-left:-325px;
     background:url("http://www.square1digital.com/client...ite/img/bg.gif") repeat-y top center;
     z-index:1;
     }
    #main {
     /*set position*/
     position:absolute;
     top:0px;
     left:50%;
     /*set size*/
     width:900px;
     height:700px;
     /*set margins -- center hack*/
     margin-left:-452px;
     /*set presentation properties*/
     background: url("http://www.square1digital.com/client.../img/burst.jpg") no-repeat;
     z-index:0;
     }
    #header {
     /*set position*/
     position:absolute;
     top:0px;
     left:50%;
     /*set size*/
     width:748px;
     height:290px;
     /*set margins -- center hack*/
     margin-left:-374px;
     /*presentation*/
     z-index:2;
     }
    #middle {
     /*set position*/
     position:absolute;
     top:290px;
     left:50%;
     /*set size*/
     width:748px;
     height:auto;
     /*set margins -- center hack*/
     margin-left:-374px;
     /*presentation*/
     z-index:2;
     }
    
    #midL1 {
     width:45px;
     }
    #midL2 {
     width:29px;
     text-align:right;
     background:#73845B;
     }
    #midC {
     width:590px;
     background:#73845B;
     }
    #midR1 {
     width:31px;
     text-align:left;
     background:#73845B;
     }
    #midR2 {
     width:53px;
     text-align:left;
     background:url("http://www.square1digital.com/client.../img/midR2.jpg") no-repeat top left;
     }
    #ifrm {
     width:590px;
     height:500px;
     background:#73845B;
     }
    #navigation {
     background:#762700;
     }
    a {text-decoration: none;}
    a:link{color: #A7BFC5; font-weight: normal;}
    a:visited{color: #A7BFC5; font-weight: normal;}
    a:active{color: #A7BFC5; font-weight: normal;}
    a:hover{color: #A7BFC5; font-weight: normal;}
    /* End Document */
     
    
    </style>
    </head>
    <body>
    <div id="main"></div>
    <div id="bg"> 
      <div id="header"> 
    	<object type="application/x-shockwave-flash" data="http://www.square1digital.com/client...te/swf/nav.swf" width="748" height="290" id="navigation">
    	  <param name="movie" value="http://www.square1digital.com/client...te/swf/nav.swf" />
    	  <param name="menu" value="false" />
    	  <param name="bgcolor" value="#762700" />
    	  <div id="noFlash"> 
    		<p><span class="white"><strong>Welcome to Blackbird Audio Rentals </strong><br />
    		  <br />
    		  We are the premeire audio rental company in the south. We rent the best 
    		  gear at the best prices.<br />
    		  <br />
    		  You don't have the latest version of Macromedia Flash Player.<br />
    		  This web site makes use of Macromedia &reg; Flash&trade; software. We 
    		  have detect that you have an old version of Macromedia Flash Player 
    		  that cannot play the content we've created.<br />
    		  <br />
    		  Why not download and install the latest version now? It will only take 
    		  a moment.<br />
    		  <a href="http://www.macromedia.com/go/getflashplayer" target="_blank"><img alt="Download Flash Now" src="http://www.square1digital.com/client.../alternate.gif" border="0" width="88" height="31" /></a></span></p>
    	  </div>
    	</object>
      </div>
      <div id="middle"> 
    	<table border="0" cellspacing="0" cellpadding="0">
    	  <tr> 
    		<td id="midL1" valign="top">&nbsp;</td>
    		<td id="midL2" valign="top"><img src="http://www.square1digital.com/client...e/img/midL.jpg" width="29" height="410" alt="" /></td>
    		<td id="midC" valign="top"><iframe name="ifrm" id="ifrm" src="http://www.square1digital.com/clients/bdwsite/home.php" frameborder="0" scrolling="no" >Sorry, 
    		  your browser doesn't support iframes. The website would be visible here 
    		  if you were using a capable browser.</iframe></td>
    		<td id="midR1" valign="top"><img src="http://www.square1digital.com/client.../img/midR1.jpg" width="31" height="410" alt="" /></td>
    		<td id="midR2" valign="top">&nbsp;</td>
    	  </tr>
    	</table>
      </div>
    </div>
    </body>
    </html>
    I didn't give the #bg a height but placed it around everything instead. It all depends on wht happens next I suppose.

    Paul


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
  •