[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

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

Posted on 2010-04-10
11
Medium Priority
?
2,260 Views
Last Modified: 2012-05-09
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
0
Comment
Question by:smfmetro10
  • 6
  • 4
11 Comments
 

Author Comment

by:smfmetro10
ID: 30363613
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
 
LVL 10

Expert Comment

by:Banthor
ID: 30420990
That should be automatic, where is the design breaking down?
0
 

Author Comment

by:smfmetro10
ID: 30431483
Thanks for the reply. For some reason the right.jpg won't behave correctly.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 2

Expert Comment

by:hkhaskell
ID: 30440251
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
 

Author Comment

by:smfmetro10
ID: 30446984
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
 
LVL 2

Expert Comment

by:hkhaskell
ID: 30464216
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
 

Author Comment

by:smfmetro10
ID: 30473149
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
 
LVL 2

Expert Comment

by:hkhaskell
ID: 30473881
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
 

Author Comment

by:smfmetro10
ID: 30477122
Great! Thank you so much!
0
 
LVL 2

Accepted Solution

by:
hkhaskell earned 2000 total points
ID: 30569393
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
 

Author Closing Comment

by:smfmetro10
ID: 31761123
Outstanding!  Thank you very much!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question