asked on

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

smfmetro10

ASKER

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

Banthor

That should be automatic, where is the design breaking down?

smfmetro10

ASKER

Thanks for the reply. For some reason the right.jpg won't behave correctly.

hkhaskell

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.

smfmetro10

ASKER

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

hkhaskell

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

smfmetro10

ASKER

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

hkhaskell

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.

smfmetro10

ASKER

Great! Thank you so much!

ASKER CERTIFIED SOLUTION

hkhaskell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

smfmetro10

ASKER

Outstanding! Thank you very much!

How do I create a &quot;9 slice scaling &quot; HTML page?

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