SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how would you code this layout?

    Hi all,
    I'm a newbie to CSS. I recently designed my layout in Photoshop using the 960 grid system and now need some help laying out the page in CSS for a FIXED layout. I just need some help getting the document flow going. Can you view my attached graphic? How would you code the banner section and then have the background horizontal color expand to the width of the viewport? Also, how would you code the "3 buckets"? The black tabs for each of those "buckets" will contain title text and the mustard color is going to be a background image. Would those "3 buckets" be 3 columns floated (float:left, float:left, float:right)?


    howto.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I would suggest you approach the full-width background color as described here: http://pageaffairs.com/code-archive/...d-columns.html

    As for the "buckets", you don't actually need to use a bg image for the mustard color. Anyhow, yes, you could float each bucket, all left, or as you describe. Another option is to set them each to display: inline-block.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you only want modern browsers support you could use the box-shadow trick like this without using extra markup:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
    	width:960px;
    	margin:auto;
    	background:#f2f2f2;
    }
    #header {
    	background:#f6f8eb;
    	padding:1em 0;
    	/* 960px matches the width of the element - it can't be bigger than the element or the shadow moves away */
    	-webkit-box-shadow: 960px 0px rgba(234, 234, 234, 0.9), -960px 0px 0px rgba(234, 234, 234, 0.9);
    	-moz-box-shadow:   960px 0px 0px rgba(234, 234, 234, 0.9), -960px 0px 0px rgba(234, 234, 234, 0.9);
    	box-shadow:        960px 0px 0px rgba(234, 234, 234, 0.9), -960px 0px 0px rgba(234, 234, 234, 0.9);
    }
    p { margin:1em }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<h1>Test IE9+ wide background strip no extra mark up</h1>
    		<div id="header">
    				<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    				<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    				<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    		</div>
    		<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    		<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
    </div>
    </body>
    </html>
    The shadow can only be as wide as the element it is attached to so in a 960px wide layout you can cover 2880px which should cover most sensible devices.


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
  •