SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to CSS. How would you slice this layout?

    How would you slice this layout for css coding? I know there should be a header and I have to create a background. But what about everything in between?

    http://www.lnwwebdesign.com/Images/index4.jpg

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

    Well the header can just be one big background image and place your content on top.

    The footer can be done in css and just the cut-out image placed in the background of the footer also.

    The shadowed boxes are a pain to do and if they are not changing in size at all the I'd be inclined to stick them in as whole pictures in the background and place the content on top. Otherwise if they are fluid then you will need to slice each image into eight parts and apply to nested (orexisting ) elements as required. If only the height is fluid for the shadow boxes then just cap them top and bottom with a slice and only repeat the shadow on the y-axis.

    There is very little room to manoeuvre on a lyout like that.

    Paul

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    ...if they are fluid then you will need to slice each image into eight parts...
    You don't need that many images and/or elements, you can do it with six parts by making the top-left and bottom-left images wide enough to cover the maximum possible width of the boxes - they will slide underneath the right-hand images when the box is resized. Given that every box has content, and will be in a div, you'll need four extra (non-semantic) elements to hang the rest of the images off.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I am trying to follow, but I am confused. Can anyone take my image and maybe add some numbering or something for the different divs? I know that this may be a lot to ask. But I could understand more with a visual. It would be great if you could just show me what to do with the shadow boxes.

    Thanks.

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a snippet from our intranet, that uses resizeable boxes:
    Code:
    <div id="business">
    
    	<h2>Business</h2>
    	
    	<ul>
    		<li><a href="/shop/default.htm">Stationery Catalogue</a></li>
    		<li><a href="/site_feedback.htm">Feedback</a></li>
    		<li><a href="/dept internet services/helpdesk.htm">Contact Us</a></li>
    		<li><a href="/procedures.htm">Procedures &amp; Guides</a></li>
    	</ul>
    
    	<div class="bl"></div>
    	
    	<div class="br"></div>
    
    </div>
    The CSS for the relevant sections looks like this:
    Code:
    #business {
    	background: #dcdedf url(../images/grey-tl.gif) no-repeat top left;
    }
    
    #business h2 {
    	height: 30px;
    	text-indent: -9999px;
    	background: url(../images/grey-tr.gif) no-repeat top right;
    }
    
    #business ul {
    	background: url(../images/grey-l.gif) repeat-y top left;
    }
    
    #business ul li {
    	background: url(../images/grey-r.gif) repeat-y top right;
    }
    
    #business div.bl {
    	background: #fff url(../images/grey-bl.gif) no-repeat bottom left;
    	height: 30px;
    }
    
    #business div.br {
    	background: #fff url(../images/grey-br.gif) no-repeat bottom right;
    	height: 30px;
    	width: 30px;
    	float: right;
    	margin-top: -30px;
    }
    There are six images to create a grey box:

    grey-tl.gif = top left long slice
    grey-tr.gif = small square top right slice
    grey-l.gif = left side slice
    grey-r.gif = right side slice
    grey-bl.gif = bottom left long slice
    grey-br.gif = small square bottom right slice

    As my content has a header and a list, I only needed two extra non-semantic elements (the "bl" and "br" divs) to hang the extra background images off. The enclosing div itself has the top-left image, the header has the top-right corner (not ideal, but never mind), the list has the left and right sides (by using the UL for one background and the LIs for the other).

    If your content was something else like a P(aragraph), you would need another non-semantic wrapper element to set both the left and right edges.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's my first attempt at slicing:

    http://lnwwebdesign.com/Images/slice.jpg

    I want to keep it simple for now I don't want the size of the boxes to change. Is this correct? What would I need to change?


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
  •