sketch

ie doesn’t support the tag correctly.

• particletree.com comment
• peterbe.com post

Solution1: Container.Top-Content-Bottom

NOTE: ‘position:relative’ and ‘z-index:num’ to fix IE6 issue displaying the image over the content div.

<style>
#container {
    background: url(tile.gif) repeat-y top left;
    width: 600px;
    margin: 30px;
}

    #container #top {
        display: inline;
        float: left;
        background: url(top.jpg) no-repeat top left;
        width: 600px;
        height: 100px;
    }

    #container #content {
        position: relative;
        display: inline;
        float: left;
        z-index: 100;
        margin: -100px 25px -100px 25px;
    }

    #container #bottom {
        position: relative;
        display: inline;
        float: left;
        z-index: 1;
        background: url(bottom.jpg) no-repeat top left;
        width: 600px;
        height: 100px;
    }
</style>

<div id="container" class="clearfix">
    <div id="top"></div>
    <div id="content">content goes here</div>
    <div id="bottom"></div>
</div><!-- END CONTAINER -->

Solution2: Container.Content-Bottom

This soultion used a very tall background image that faded to a background color. A vertical “sliding doors” techinique. Also, note the background image is ‘bottom left’ to fix the image to the bottom of the element so as the content expands more of the image is revealed at the top. This is very similar to the above solution.

<style>
#container {
    width: 300px;
}
    #content {
        display: inline;
        float: left;
        background: color url(container.jpg) no-repeat bottom left;
    }
    #bottom {
        display: inline;
        float: left;
        background: url(bottom.jpg) no-repeat bottom left;
        width: 300px;
        height: 10px;
}
</style>

<div id="container" class="clearfix">
    <div id="content">content goes here</div>
    <div id="bottom"></div>
</div><!-- END CONTAINER --> 

• what objects will you have, what they will do (their methods), what data they will contain (their properties) and how they will interact with other objects or be used in the grand scheme of things
• usually helps to think of how you can break down the problem into objects first… before going into their methods and properties… just think about what this object’s main purpose is
  
• an object should be good at doing one thing… dealing with taht type of object… you dont’ want an object that just does everything
• you want to have everything that method does “encapsulated” in the object, meaning that only it knows how to do things best… everything else that uses it is only concerned with “hey, i want this done, go do it” and it will do it and no one else has to care how it’s doing it
• if you can, it’s good to think about the different layers of the app… you’ve got the GUI side, then you have the Data side, then you’ll need somethign that controls everything…. this is the typical way of doing apps — it’s called the MVC pattern (model view controller)
• MVC