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
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Help with a CSS container

    Hello,

    Would anyone be kind enough to help me with a simple container i'm building.

    Basically I want it to look like this graphic created in photoshop:

    http://www.inspireaway.co.uk/container/this.jpg

    and here are the elements to it:

    Top bit: http://www.inspireaway.co.uk/container/header.jpg
    Middle bit: http://www.inspireaway.co.uk/container/sidepanel.jpg
    Bottom bit: http://www.inspireaway.co.uk/container/footer.jpg

    However, i'm having trouble piecing it together.

    Could anyone help me piece it together and help with my code below with all the elements belonging to #holder?

    Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>Vertical Holder</title>
    <style>
    * { padding:0; margin:0; }
    
    body {
     font:normal normal normal 10px Verdana,Helvetica,Arial,sans-serif;
     background:#FFF;
     color:#000
    }
    
    /***********************************************************
     VERTICAL HOLDER
     ***********************************************************/
    #holder {
     width:170px; height: 295px; background:#fff
    }
    
    
    #holder a { color:#003dad;text-decoration:none; }
    #holder a:hover { text-decoration:underline; }
    
    
    #holder h3.inline-header {
     height:58px;
     background:#c11b17; color:#fff; 
     text-align:center;font-size:20px;padding:0;text-transform:uppercase;
    }
    #holder p.inline-footer {
     padding:10px 12px 0px 12px; height:28px;
     background: #c11b17 url('http://www.inspireaway.co.uk/footer.jpg') no-repeat;
     color:#fff; text-align:left; font-size:90%
    }
    #holder a {
     color:#fff; text-decoration:none
    }
    #holder a:hover {
     text-decoration:underline
    }
    #holder ul.listing li {
     padding: 5px 0 5px 0; border-bottom: 1px solid #d8d9da
    }
    #holder a.listing-main {
     color:#c11b17;
     font-weight:bold
    }
    #holder a.listing-detail {
     padding: 0 0 0 14px;font-size:95%;color:#000;
     background:#fff url('http://www.inspireaway.co.uk/arrow.png') no-repeat 2px 4px
    }
    </head>
    
    <body>
    <div id="holder">
    	<h3 class="inline-header">
    		<a class="inline-header" href="http://www.mshhssdjsjsoos.com" title="Link: holder listings">
    			<img src="http://www.inspireaway.co.uk/header.jpg" alt="My Container" title="This is the container" />
    		</a>
    	</h3>
            <ul>
    		<li class="listing">
                <a class="listing-main" href="http://www.mshhssdjsjsoos.com">Link Name One </a><br />
    			<a class="listing-detail" href="http://www.mshhssdjsjsoos.com">Further Details</a>
    		</li>
    		<li class="listing">
                 <a class="listing-main" href="http://www.mshhssdjsjsoos.com">Link Name Two </a><br />
    			<a class="listing-detail" href="http://www.mshhssdjsjsoos.com">Further Details</a>
    		</li>
    		<li class="listing">
                <a class="listing-main" href="http://www.mshhssdjsjsoos.com">Link Name Three </a><br />
    			<a class="listing-detail" href="http://www.mshhssdjsjsoos.com">Further Details</a>
    		</li>
    
    	</ul>
    	<p class="inline-footer"><a class="inline-footer" href="http://www.mshhssdjsjsoos.com" title="More Information">More Information</a></p>
    </div>
    
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The following would help you to move forward
    Code:
    <h3 class="inline-header">
    		<a class="inline-header" href="http://www.mshhssdjsjsoos.com" title="Link: holder listings">
    			My Container
    		</a>
    	</h3>
    Code:
    #holder h3.inline-header {
     height:58px;
     background:#c11b17 url(http://www.inspireaway.co.uk/container/header.jpg) top left; 
     color:#fff; 
     text-align:center;font-size:20px;padding:0;text-transform:uppercase;
    }
    #holder ul{
    background:#c11b17 url(http://www.inspireaway.co.uk/container/sidepanel.jpg) repeat-y; 
    padding-left:15px;
    list-style:none;
    }
    #holder ul{
    list-style:none;
    }
    #holder p.inline-footer {
     padding:10px 12px 0px 12px; height:28px;
     background: #c11b17 url('http://www.inspireaway.co.uk/container/footer.jpg') no-repeat;
     color:#fff; text-align:left; font-size:90%
    }
    Now, I'd recommend to use a definition list instead of unordered list, which I think more semantic in your case.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    stfc_boy (06-07-2009)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts
    Thanks,

    I've done as suggested, but this gets even more wierd now.

    http://www.inspireaway.co.uk/container/

    I see nothing, despite if you view the source the css and divs being there?

    Thanks

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You are missing the closing style tag.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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