SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What about the image saturated table layouts?

    I am in the process of converting a almost completely table layout site to CSS. The issue I am running into is those tables that you get from Fireworks (and I am sure others) that have sliced up images. There is a little one in the corner, then an image repeated across the top to another little image in corner. You know the ones, it goes like this rest of the table Now it's a complete mess.

    I am in the fortunate position that I will be converting to fixed width which will include all the child tables soon to be divs.

    The question is: Should I keep the little images? I tend to find myself wanting to put them in divs of there own. That can't be right, can it? I tend to run into problems when I try to repeat a background image in a div and place two images in that at either end with content in the middle. Maybe it would be better to just use some bigger images since I can go to fixed with anyway.

    Any thoughts?

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can still use the sliced images. Slicing is still done to reduce loading times for those not using broadband. As an example, the following code can be used to display a header that has been sliced into 3 pieces, one large one (#logo) on the left at the full height and 2 on the right (slogan & top-menu)at smaller heights, one on top of the other, with no margins.
    Code:
    #header {
    	width: 778px;
    	height: 213px;
    	margin: 0 auto;
    }
    
    #logo {
    	float: left;
    	width: 404px;
    	height: 213px;
    	background: url(images/index01.jpg) no-repeat;
    }
    
    #slogan {
    	float: right;
    	width: 374px;
    	height: 116px;
    	margin: 0;
    	background: url(images/index03.jpg) no-repeat;
    }
    
    #top-menu {
    	float: right;
    	width: 374px;
    	height: 97px;
    	margin: 0;
    	background: url(images/index02.jpg) no-repeat;
    }
    
    
    
    <div id="header">
    	<h1 id="logo"></h1>
    	<div id="top-menu">		
    	</div>
    	<p id="slogan"></p>
    </div>
    So it can be done. Or if you have a graphic program, you can re-build the images from the slices if you want to.
    Joe

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to exactly what you mean? Do you mean the 'spacer' images that FWs exports to keep the layout from breaking?

    Nadia


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
  •