How do I create a "9 slice scaling " HTML page?

Hi,
I have 9 images:
top_left, top, top_right, left, field, right, botton_left, bottom, bottom_right

I want this to be able to scale when the user resizes the browser.

Is there a  way to do this in CSS, HTML?

Thanks
smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

smfmetro10Author Commented:
Here is some better clarification.  I have 8 images that I want to make into a scrolling background. I think I have it almost figured out except I'm having problems with the "right.jpg". In the CSS file its the .content .content-repeat .content-repeat-left .content-repeat-right class.

I included the code and the images as well

Any help would be greatly appreciated.

Thanks,
------HTML FILE------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/nine.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="content">	<!-- this is the overall container -->
<div class="content-top">	<!-- this contains the top left, top right and top center slices -->	
<div class="content-top-left"></div>	
<div class="content-top-right"></div>	<!-- notice the top center or top repeat slice needs to be at the end -->		
<div class="content-top-repeat"></div>	
</div>	
<div class="content-repeat">		<!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me -->	
<div class="content-repeat-left">		
<div class="content-repeat-right"><!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it -->			<div class="content-repeat-center">				<!-- /** this is where you'd place the content **/ -->					
		
<div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>		
	</div>		
    </div>	
    	</div>	
  </div>
        	<div class="content-bottom">		<!-- this contains the bottom left, bottom right and bottom center slices -->	
            	<div class="content-bottom-left"></div>	
                <div class="content-bottom-right"></div>	<!-- as above the bottom center div must be after the bottom left and right divs -->		
                <div class="content-bottom-repeat"></div>	</div></div>
</body>
</html>

-------------CSS FILE---------------------------

@charset "utf-8";
/* CSS Document */
.content .content-top {/* No rules needed here, but for the sake of completeness */}
.content .content-top .content-top-left {	
/* float this one left and .content-top-right right so they flow over .content-top-repeat, which is the top center slice */	
	float: left;	
/* width and height are defined by the image */
	width: 124px;	
	height: 516px;	
	background: url(../images/top_left.jpg) no-repeat;
}
.content .content-top .content-top-right {	
	float: right;	
/* height needs to be the same across all top slices! */	
	height: 516px;	
	width: 124px;	
	background: url(../images/top_right.jpg) no-repeat;
}
.content .content-top .content-top-repeat {	
	height: 516px;	
/* the margins are the width of the top left and top right slices - this is not always neccessary, but in my case I was using alpha-transparent PNG8, which broke the layout in IE6 then */							    margin-left: 124px;	
	margin-right: 124px;	
/* note that we repeat-x the image here */	
	background: url(../images/top.jpg) repeat-x;
}
.content .content-repeat {	
/* No rules needed here, but for the sake of completeness */}

.content .content-repeat .content-repeat-left {	

/* repeat-y the image - this div will automatically resize with the content */ 
	 
	height:4px;	
	background: url(../images/left.jpg) left repeat-y;
}
.content .content-repeat .content-repeat-left .content-repeat-right {
	
	
/* same as center left slice */ 
	width: 1275px;	
	height:4px;
	background:url(../images/right.jpg) right repeat-y;
}
.content .content-repeat .content-repeat-left .content-repeat-right .content-repeat-center {	
/* Put your text formatting here */	/* again, margins are the widths of the left and right center slice */	
	margin-left: 124px;
	margin-right: 124px;	
/* and this is the solid background color */	
	background: #F39;
}.
content .content-repeat .content-repeat-clearfix {	
/* you better have this if you have floated stuff in your content */	
clear: right;
}
.content .content-bottom {	
/* No rules needed here, but for the sake of completeness */}
.content .content-bottom .content-bottom-left {
	/* same technique as above when stying the top part */	
		float: left;	
	/* again, image size defines the size of this div */	
		width: 124px;	
		height: 124px;	
		background: url(../images/bottom_left.jpg) no-repeat;
	}
	.content .content-bottom .content-bottom-right {	
	/* see above */	
		float: right;	
		width: 124px;	
	/* note the height _must_ be euqal across all bottom slices */	
		height: 124px;
		background: url(../images/bottom_right.jpg) no-repeat;
	}
	
	.content .content-bottom .content-bottom-repeat {
	
	/* margins again defined by the width of the bottom left and right slices */	
		margin-left: 124px;	
		margin-right: 124px;	
	/* and height is the same across all bottom slices */ 
		
		height: 124px;	
	/* don't forget the repeat-x thingy */	
		background: url(../images/bottom.jpg) repeat-x;
	}

Open in new window

bottom.jpg
bottom-left.jpg
bottom-right.jpg
left.jpg
right.jpg
top.jpg
top-left.jpg
top-right.jpg
0
BanthorCommented:
That should be automatic, where is the design breaking down?
0
smfmetro10Author Commented:
Thanks for the reply. For some reason the right.jpg won't behave correctly.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

hkhaskellCommented:
Do you have an image of what you want the final layout to look like?  I think I see what you're trying to do and I noticed a couple of things I'd likely change.  However, I want to make sure that I'm going for the correct end result.
0
smfmetro10Author Commented:
Absolutely!  Ideally the black part has to stay 516 px high with the bottom and width being able to scroll

Thanks for the help!
image-backgroundA.jpg
0
hkhaskellCommented:
OK, this should pretty much do it.

This solution will work with nearly all modern browsers and the footer will nicely stick to the bottom.

Make sure you keep the conditional comment in the header for IE 8.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>9 slices</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<!--[if  IE 8]>
	<style type="text/css">
		#wrap {display:table;}
	</style>
<![endif]-->
</head>

<body>

<div id="wrapper">

<div id="topbackground">

<div id="top">

<div id="topright">&nbsp;</div>

<h1>This Is A Headline</h1>

<h2>And A Pretty Sub-Head</h2>

<p>But what's important is the actual content.  That's what this is, in case you didn't know... And of course we have <a href="#">links</a> - what would we do without those?</p>

</div><!-- /top -->

</div><!-- /topbackground -->

<div id="middle">

<p>This is content in the lower part of the page. The margins are once again set individually for each element in the style sheet.</p>
<p><a href="#">Links</a> are still cool.</p>
</div><!-- /middle -->

</div><!-- /wrapper -->

<div id="footerbackground">

<div id="footer">

<div id="footercontent">

<p>This is where your &copy; goes.</p>

</div><!-- /footercontent -->

</div><!-- /footer -->

</div><!-- /footerbackground -->

</body>
</html>


----- CSS -----

@charset "UTF-8";
/* CSS Document */

* {	/* reset all padding, borders and margins - this generally saves a lot of grief all around */
	margin:0;
	padding:0;
	border:none;
}

/* the following declarations help to always keep the footer on bottom */

html, body, #wrapper {
	height:100%;
}

body > #wrapper {
	height:auto;
	min-height:100%;
}

#main {
	overflow:auto;
	padding-bottom:124px;	/* must be same height as the footer */
}

#footer {
	position:relative;
	margin-top:-124px; /* negative value of footer height */
	height:124px;
	clear:both;
} 

/* Opera Fix */
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

/* now we return to our regular scheduled coding for the page... */

body {
	background:url(../images/left.jpg) top left repeat-y #979552; /* we add the left background image for the "stretchy" part here */
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1em;
}

#wrapper {
	width:100%;
	background:url(../images/right.jpg) top right repeat-y;	/* we add the right background image for the "stretchy" part here */
}

#top {
	height:516px;
	width:100%;
	background:url(../images/top-left.jpg) top left no-repeat;
	overflow:hidden;	/* this is to keep the content from pushing the top area down */
}

#topbackground {	/* this div is strictly a container to fill out the main background image */
	height:516px;
	width:100%;
	background:url(../images/top.jpg) top repeat-x;
}

#topright {	/* now we just float another div into the right margin to complete the look */
	height:516px;
	width:124px;
	float:right;
	background:url(../images/top-right.jpg) top right no-repeat;
}

#top h1 {	/* notice that we add a left margin of 124px on all content elements to keep it off the left edge */
	font-size:300%;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:200;
	color:#fff;
	margin:40px 0 16px 124px;
}

#top h2 {
	font-size:150%;
	font-weight:200;
	color:#ceca6e;
	margin:16px 0 16px 124px;
}

#top p, #top li {
	font-size:80%;
	color:#fff;
	margin:16px 0 16px 124px;
}

#top a {
	color:#ceca6e;
	text-decoration:underline;
}

#top a:hover {
	text-decoration:none;
}

#middle {	/* no need to set the background color here as it was already set in the body and wrapper elements */
	width:100%;
	margin:20px 0;
}

#middle p {
	font-size:80%;
	margin:16px 124px;	/* we control the content margins on the content level - in this case on both the left and the right */
}

#middle a {
	color:#000;
	text-decoration:none;
	border-bottom:solid #fff 1px;
}

#middle a:hover {
	border:none;
}

#footerbackground {	/* we need a separate div for the footer background as the image is not specified anywhere else */
	background:url(../images/bottom.jpg) top repeat-x;
}

#footer {
	height:124px;
	width:100%;
	background:url(../images/bottom-left.jpg) left no-repeat;
}

#footercontent {
	height:124px;
	width:100%;
	background:url(../images/bottom-right.jpg) right no-repeat;
}

#footercontent p {
	line-height:124px;
	text-align:center;
	font-size:70%;
	color:#333;
	margin:0 124px;	/* top and bottom margin are set to 0, since the line-height is already 124px */
}

#footercontent a {
	color:#111;
	text-decoration:underline;
}

#footercontent a {
	text-decoration:none;
}

Open in new window

0
smfmetro10Author Commented:
Hi hkhaskell,

Thank you so much for help.  Its Close! There are some gradients missing. In the black, the left and right gradient is missing and in the green part the bottom gradient is missing. I attached a screen shot to better illustrate what is happening.
pic.jpg
0
hkhaskellCommented:
OK - I see what it's doing for you in Internet Exploder (as I like to call it).  I'll mess with it some more in the AM.
0
smfmetro10Author Commented:
Great! Thank you so much!
0
hkhaskellCommented:
OK, I figured out a much easier way to get the same result.  It's elegant and uses less code.  Basically, I combined the left image with the center image and made it 2560px long in order to accommodate the largest display size currently in use.

Because of the efficiency of the PNG file format, the download overhead wound up being lower too.  I tested this layout in Safari (Mac guy here), Firefox and then in IE and it worked great in all browsers.

One tiny caution: make sure that you don't add any vertical margins to the sections above the footer as that will throw things off.  Just use padding for vertical spacing and all is well.

I'm also attaching the "new" images for you.
--- First The CSS ---

@charset "UTF-8";
/* CSS Document */

* {	/* reset all padding, borders and margins - this generally saves a lot of grief all around */
	margin:0;
	padding:0;
	border:none;
}

/* the following declarations help to always keep the footer on bottom */

html, body, #wrapper {
	height:100%;
}

body > #wrapper {
	height:auto;
	min-height:100%;
}

#main {
	overflow:auto;
	padding-bottom:124px;	/* must be same height as the footer */
}

#footer {
	position:relative;
	margin-top:-124px; /* negative value of footer height */
	height:124px;
	clear:both;
} 

/* Opera Fix */
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

/* now we return to our regular scheduled coding for the page... */

body {
	background:url(../images/left.png) top left repeat-y #979552; /* we add the left background image for the "stretchy" part here */
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1em;
}

#wrapper {
	width:100%;
	background:url(../images/right.png) top right repeat-y;	/* we add the right background image for the "stretchy" part here */
}

#top {
	height:516px;
	width:100%;
	background:url(../images/top-left.png) top left no-repeat;
	overflow:hidden;	/* this is to keep the content from pushing the top area down */
}

#topright {	/* now we just float another div into the right margin to complete the look */
	height:516px;
	width:124px;
	float:right;
	background:url(../images/top-right.jpg) top right no-repeat;
}

#top h1 {	/* notice that we add a left margin of 124px on all content elements to keep it off the left edge */
	font-size:300%;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:200;
	color:#fff;
	margin:40px 0 16px 124px;
}

#top h2 {
	font-size:150%;
	font-weight:200;
	color:#ceca6e;
	margin:16px 0 16px 124px;
}

#top p, #top li {
	font-size:80%;
	color:#fff;
	margin:16px 0 16px 124px;
}

#top a {
	color:#ceca6e;
	text-decoration:underline;
}

#top a:hover {
	text-decoration:none;
}

#middle {	/* no need to set the background color here as it was already set in the body and wrapper elements */
	width:100%;
	padding:20px 0;
}

#middle p {
	font-size:80%;
	margin:0 124px;	/* we control the content margins on the content level - in this case on both the left and the right */
}

#middle a {
	color:#000;
	text-decoration:none;
	border-bottom:solid #fff 1px;
}

#middle a:hover {
	border:none;
}

#footer {
	height:124px;
	width:100%;
	background:url(../images/bottom-left.png) left no-repeat;
}

#footercontent {
	height:124px;
	width:100%;
	background:url(../images/bottom-right.png) right no-repeat;
}

#footercontent p {
	line-height:124px;
	text-align:center;
	font-size:70%;
	color:#333;
	margin:0 124px;	/* top and bottom margin are set to 0, since the line-height is already 124px */
}

#footercontent a {
	color:#111;
	text-decoration:underline;
}

#footercontent a {
	text-decoration:none;
}



--- Here's The HTML ---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>9 slices</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="top">

<div id="topright">&nbsp;</div>

<h1>This Is A Headline</h1>

<h2>And A Pretty Sub-Head</h2>

<p>But what's important is the actual content.  That's what this is, in case you didn't know... And of course we have <a href="#">links</a> - what would we do without those?</p>

</div><!-- /top -->

<div id="middle">

<p>This is content in the lower part of the page. The margins are once again set individually for each element in the style sheet.</p>
<p><a href="#">Links</a> are still cool.</p>
</div><!-- /middle -->

</div><!-- /wrapper -->

<div id="footer">

<div id="footercontent">

<p>This is where your &copy; goes.</p>

</div><!-- /footercontent -->

</div><!-- /footer -->

</body>
</html>

Open in new window

bottom-left.png
bottom-right.png
left.png
right.png
top-left.png
top-right.png
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smfmetro10Author Commented:
Outstanding!  Thank you very much!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.