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
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Exclamation Help with tricky background tiles

    I need some help figuring out how to get this background to work the way I need it to. Please take a look at the attached image to see what I'm trying to accomlish. Let me know if it isn't clear.

    Basically, I have a background image applied to the body the repeats on the x axis. Lets say that background image is 300px tall and it has a gradient in it. Once the content area on the site exceeds that 300px in height I want to have a different background tile start to fill in the open space (that would the the cyan colored part in the attached image) and should continue with the depth of the content. But it should exceed the content area. In other words I don't want it next to the footer. Hopefully the attached image will help explain this because I'm not sure I'm making sense here.

    Please let me know if I can explain this better. By the way here is my current code if you need to take a look.

    Current HTML can be found here

    Current CSS can be found here:
    Attached Thumbnails Attached Thumbnails Help with tricky background tiles-tilehelp_sm.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello po3,
    You need to nest divs to do something like that.
    I put everything I changed in red:
    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"><head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="test_files/ajaxtabs.js"><!-- Ajax Tabs Content script- � Dynamic Drive DHTML code library (www.dynamicdrive.com). This notice MUST stay intact for legal use. Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code --></script><title>Untitled Document</title>
    
    <link href="test_files/bpi.css" rel="stylesheet" type="text/css"></head><body>
    <div class="wrapper">
    
      <!-- Main Nav Start -->
      
      <ul id="mainNav" class="mir">
        <li><a id="mir-a1" href="http://www.bridgepoint-int.com/dev/home.html">Home</a></li>
        <li><a id="mir-a2" href="http://www.bridgepoint-int.com/dev/aboutUs.html">About Us</a></li>
        <li><a id="mir-a3" href="http://www.bridgepoint-int.com/dev/activeProjects.html">Active Projects</a></li>
        <li><a id="mir-a4" href="http://www.bridgepoint-int.com/dev/projectGuidelines.html">Project Guidelines</a></li>
        <li><a id="mir-a5" href="http://www.bridgepoint-int.com/dev/CS_bilcom.html">Case Studies</a></li>
        <li><a id="mir-a6" href="http://www.bridgepoint-int.com/dev/contact.html">Contact</a></li>
        <li><img src="test_files/navEnd.gif"></li>
        <li><a id="mir-a7" class="brand" href="http://www.bridgepoint-int.com/dev/home.html">BridgePoint International</a></li>
      </ul>
      
      <!-- Sub Nav Start -->
      
      <ul id="subNav">
      <li><img src="test_files/subNav_left.gif"></li>
        <li><a href="#">Bilcom</a>
          <p>|</p>
        </li>
        <li><a href="#">Sample Link</a>
          <p>|</p>
        </li>
        <li><a href="#">Sample Link</a></li>
      </ul>
    <!--closes wrapper--></div>
      <!-- Page Head Start -->
      	<div id="nested1">
      		<div id="nested2">
    <div class="wrapper">  <h1 class="mir">Bilcom Profile</h1>
      
      <!-- Tabs  for content Start -->
      
      <ul id="maintab" class="shadetabs">
        <li class="selected"><a href="#default" rel="ajaxcontentarea">Profile</a></li>
        <li class=""><a href="http://www.bridgepoint-int.com/dev/cs_tabs/bilcom_kp_show.html" rel="ajaxcontentarea">Key Points </a></li>
        <li class=""><a href="http://www.bridgepoint-int.com/dev/cs_tabs/bilcom_tp_show.html" rel="ajaxcontentarea">Transformation Process</a></li>
      </ul>
      
      <!-- Content Start -->  
      <!--<div id="csImage"> <img src="images/caseStudies/bilcomImg1.jpg" width="245" height="262" /> </div> -->
      
    	<div id="ajaxcontentarea" class="contentstyle">
        <img id="csImage" src="test_files/bilcomImg1_ph.jpg" height="262" width="245">
            <p>Putpatin
    ut venibh er si. Ut lobor sit lobore minit nit aut venim zzriurem ver
    sit pratum zzrillaore cor augueraesse delisim in ut nis am, quat. </p>
            <ul>
              <li>Xer si exerat aliquatem volore velit erciliquat
                <ul>
                  <li>il iriurer sit at ad ent ver sis alit, sequat venim vel do od eum illaorper </li>
                  <li>sim ipis doloreet estrud do dolorpe raessequam velis aliscilis </li>
                </ul>
              </li>
              <li>aliquis ciduisis nim quam duip eu feu feum aliquatue </li>
              <li>duis nonseniam, consed elit praesto </li>
              <li>commoloreet ilit wis nos nibh ent vullutpat lutat.</li>
            </ul>
            <p>Rem
    qui er iriure molorper senim dionsequat ilit aci blamet adit lametummy
    nulputem irit iureet at. Uscipit do odit dip eliquat. Duis nibh ea
    feugiam consenim deliquam diatuer sisit lan vel utatumm oluptate
    digniat. Voloborper senisl utem ipis nis nit ulpute commodo lenibh
    etuerat. Duipit lutpat lortie do eumsandip ex ea ad digna alit
    loreratet numsandit nonsed minibh exer sequisim dolobor in hent lumsan
    henim niam quat.</p>
          
        <p><b><a href="javascript: expandtab('maintab', 1)">Next</a></b></p>
      </div>
      <!--closes wrapper--></div>
    		<!--closes nested2--></div>
    	<!--closes nested1--></div><!-- Footer Start -->  	
    	
    	<p id="footer">©2007 BridgePoint International. All Rights reserved.</p>
    	
    <script type="text/javascript">//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
    	startajaxtabs("maintab")
    </script>
    </body></html>
    Code:
    /*-----------------------------------------------------------------------------
    version:   1.0
    author:    Erik Peterson
    website:   http://www.projecto3.com/
    -----------------------------------------------------------------------------*/
    
    /* =General
    -----------------------------------------------------------------------------*/
    
    
    /* Remove padding and margin */
    * {
     	margin: 0;
    	padding: 0;
    }
    
    /* Put it back on certain elements */
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
    	margin-left: 6px;
    	margin-right: 6px;
    }
    
    /* Class for clearing floats */
    .clear {
    	clear:both;
    }
    
    
    /* Remove border around linked images */
    img {
    	border: 0;
    }
    
    body{
    	text-align: center;
    	margin-top: 40px;
    	font: "Times New Roman", Times, serif;
    	color: #858776;
    	font-size: 14px;
    	line-height: 22px;
    }
    #nested1 {
    	background: url(your other grad.gif here) repeat;
    }
    #nested2 {
    	background:url(http://www.bridgepoint-int.com/dev/images/common/blueTile_grad.gif) repeat-x;
    }
    /* =Typography
    -----------------------------------------------------------------------------*/
    
    /*body {
       font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
    }*//* =layout
    -----------------------------------------------------------------------------*/
    
    .wrapper { /* centers design on page */
    	margin-left: auto; 
    	margin-right: auto;
    	width: 757px;
    	text-align: left;
    	background-color: white;
    }
    
    /*body{  It makes life very difficult when you spread tags out like this. Style body with one entry in your
    CSS and it's a lot easier to find!
    }*//* =Headings
    -----------------------------------------------------------------------------*/
     h1 {
    	display: block;
     	color: #7a8ea2;
    	size: 36pt;
    	line-height: 53px;
    	padding-top: 22px;
    	border-top: solid 2px #d9b7ab;
    	border-bottom: solid 2px #d9b7ab;
     }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    GREAT!

    Very helpful, I made the changes you suggested and added a couple of tweaks and I think it's looking pretty good. So basically you just added the two divs and then they overlay eachother right? Nested2 shows up on top of nested1 to create the effect I was looking for. Thanks again.

    Have a look.

  • #4
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    sorry about the double post
    Last edited by po3; 05-15-2007 at 09:55 PM. Reason: oops.


  •  

    Posting Permissions

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