Cornerstone Images and Limiting Stretchyness

[WebmistressM]

I am all for liquid layouts. However is there any way to restrict layouts up to a point? Like, say you design a layout for 800x600, 1024x768, and 1200x960. What would be the way to restrict against higher resolutions, so that image elements shrink and grow depending on browser size, but not beyond the pixel dimensions of the image?Basically, I am just having a heck of a time in finding a way to make the two corner images stretch over 800x600, 1024x768 and 1200x800 (at the most) resolutions, but still offer a decent looking site at resolutions higher than that. That would mean that I would need to find a way to get the top and bottom corner images (both designed with a max size that accomodates 1200x800) to stretch to smaller than 1200x800 resolution sizes but not stretch to anything higher than 1200x800, but instead just remain there in thier 1200x800 sized glories. Percentages is how most people design fluidly so that is why I went for that option first. I guess I need to figure out how to make something that limits the design to accomodate sizes *up to* 1200x800I know that max-width is the easiest method but IE5.5 and 6 do not take kindly to that. Someone suggested javascript which seemed to work but Im trying to avoid javascript since some of my end-users might have javascript disabled by default. Bottom corner is 392x736, Top corner is 314x345.Any help would be appreciated.

[rzea]

I think that you're going to need to use Javascript.Now, there's a weird sense out there about users having their Javascript disabled by default. To put it into perspective, there are more users with Jasvascript enabled in their browser than with the Flash Player installed.Users going around the web and not using Javascript can not see, I'd dare to say, more than 80% of the websites correctly, not even shop online.You can use max-width and still make IE6 understand it. Don't worry about IE5.5, the amount of people using this browser nowadays is just too little, so it shouldn't be relevant to your work.Use something like this for your max-width:

min-width: {   min-width:1200px; width:auto !important; width:1200px;}

[WebmistressM]

I think that you're going to need to use Javascript.Now, there's a weird sense out there about users having their Javascript disabled by default. To put it into perspective, there are more users with Jasvascript enabled in their browser than with the Flash Player installed.Users going around the web and not using Javascript can not see, I'd dare to say, more than 80% of the websites correctly, not even shop online.You can use max-width and still make IE6 understand it. Don't worry about IE5.5, the amount of people using this browser nowadays is just too little, so it shouldn't be relevant to your work.Use something like this for your max-width:

min-width: {   max-width:1200px; width:auto !important; width:1200px;}

Yeah. I figured that the amount of people that use IE6 or 5.5 AND disable javascript might be so low that its not a worry. I am the kind of user who knows how to disable javascript if it ever came necessary and there are very few sites that I disable it for (I figure if I am nervous about visiting a particular site with javascript on, than its probably because it is an unsecure site overall.) I couldnt imagine being that worried about it with 98.8% of my browsing experience.Anyhow... Im a bit unsure how to group the CSS and HTML for this too.

[WebmistressM]

Edit(darn board wouldnt let me edit this morning): Okay....I figured that I could either combine both corner images into one big image, but I would prefer to have it flexible by keeping it to 2 different cornerstone images. Still having issues in getting the left top corner image to show up in it's entirety even if there is not that much (or none) text in the "main/content" div.

[WebmistressM]

Bumping the thread since I still have failed to product results. One person said that I should avoid javascript. I looked into a technique much like the following, used for presenting rounded corners:http://kalsey.com/2003/07/rounded_corners_in_css/

[elementalgrace]

Bumping the thread since I still have failed to product results. One person said that I should avoid javascript. I looked into a technique much like the following, used for presenting rounded corners:http://kalsey.com/2003/07/rounded_corners_in_css/

This is actually the technique I use for creating my fluid width websites with rounded corners and I can't see any reason why you shouldn't be able to use it for your design. If you put your top left background image in one class and your bottom right image in another class and position them appropriately (as example):.topleft{background: url(images/tl.gif) no-repeat 0 0; position: relative;}.bottomright{background: url(images/br.gif) no-repeat 100% 100%;position: relative;} And then set min and max widths for your container, you should be on your way to working it out ok. You might have to fiddle about with some workarounds for IE6 etc as it doesn't support min/max widths but in principle it should work.

[WebmistressM]

This is actually the technique I use for creating my fluid width websites with rounded corners and I can't see any reason why you shouldn't be able to use it for your design. If you put your top left background image in one class and your bottom right image in another class and position them appropriately (as example):.topleft{background: url(images/tl.gif) no-repeat 0 0; position: relative;}.bottomright{background: url(images/br.gif) no-repeat 100% 100%;position: relative;} And then set min and max widths for your container, you should be on your way to working it out ok. You might have to fiddle about with some workarounds for IE6 etc as it doesn't support min/max widths but in principle it should work.

Ill give this a try. However, in combating IE6's failure to render max-width/max-height, Im not sure if there is any non-javascript method to counteract this (I do have the javascript expression and it tested out just fine.) As said by the first reply to this thread, the amount of people that disable javascript is small. I imagine that the amount of people that disable javascript *and* use IE6 or 5.5 is even smaller. Still, I would like to see if there is a non-javascript way to get IE6 and 5.5 to behave in observing that the container class has a max width or height. I have seen the way IE6 renders it without a max-width/height (or an equivalent) and it basically turns the percentage of my 2 corners width or height into the percentage of the *entire page dimensions* which makes my images reminiscent of that one Simpson's episode where Marge got a Tshirt with her face on it that was printed badly by the shirt maker.

[rzea]

I don't usually see The Simpsons.I wouldn't worry about IE5.5 anymore, try to make it easy on yourself :)For the max-width/max-height in IE, use the example code I gave you in my first code. It works for me marvelously Rounded Corners without imagesYou should take a look at the following link, it can probably save you a lot of headaches... again: http://www.html.it/articoli/nifty/index.htmlThese HTML and CSS codes can provide you some more help, you're going to need to copy this entire code into an empty HTML page, then double click it to see it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>border004</title><style type="text/css">body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:11px;}#info {display:block; position:relative; background:#adced1;}#info h2 {margin-bottom:1em;}#info h3 {clear:both; margin-top:4em;}/* Inset 3D Raised */.raised {background: transparent; width:40%; margin:0 auto;}.raised h1, .raised p {margin:0 10px;}.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}.raised p {padding-bottom:0.5em;}.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}.raised .b1 {margin:0 5px; background:#fff;}.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}.raised .b3, .raised .b3b {margin:0 2px;}.raised .b4, .raised .b4b {height:2px; margin:0 1px;}.raised .b1b {margin:0 5px; background:#999;}.raised .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}/* Inset 3D Curved */.inset {background: transparent; width:40%; margin:0 auto;}.inset h1, .inset p {margin:0 10px;}.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}.inset p {padding-bottom:0.5em;}.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}.inset .b1 {margin:0 5px; background:#999;}.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}.inset .b3, .inset .b3b {margin:0 2px;}.inset .b4, .inset .b4b {height:2px; margin:0 1px;}.inset .b1b {margin:0 5px; background:#fff;}.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}/* Chamfer Borders*/.chamfer {background: transparent; width:40%; margin:0 auto;}.chamfer h1, .chamfer p {margin:0 10px;}.chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}.chamfer p {padding-bottom:0.5em;}.chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}.chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}.chamfer .b1 {margin:0 5px; background:#000;}.chamfer .b2 {margin:0 4px;}.chamfer .b3 {margin:0 3px;}.chamfer .b4 {margin:0 2px;}.chamfer .b5 {margin:0 1px;}.chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}/* Square cutout Borders*/.square {background: transparent; width:40%; margin:0 auto;}.square h1, .square p {margin:0 10px;}.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}.square p {padding-bottom:0.5em;}.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}/* Curved cutout Borders*/.curved {background: transparent; width:40%; margin:0 auto;}.curved h1, .curved p {margin:0 10px;}.curved h1 {font-size:2em; color:#fff; letter-spacing:1px;}.curved p {padding-bottom:0.5em;}.curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;}.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;}.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}.curved .b1 {margin:0 4px; background:#fff;}.curved .b2 {margin:0 4px; height:2px;}.curved .b3 {margin:0 3px;}.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}/* flared serif */.serif {background: transparent; width:40%; margin:0 auto;}.serif h1, .serif p {margin:0 10px;}.serif h1 {font-size:2em; color:#fff; letter-spacing:1px;}.serif p {padding-bottom:0.5em;}.serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;}.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;}.serif .b1, .serif .b2, .serif .b3 {height:1px;}.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}.serif .b1 {margin:0; background:#fff;}.serif .b2 {margin:0 1px; border-width:0 2px;}.serif .b3 {margin:0 3px;}.serif .b4 {height:2px; margin:0 4px;}.serif .boxcontent {display:block;  background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}/* Pillar type */.pillar {background: transparent; width:40%; margin:0 auto;}.pillar h1, .pillar p {margin:0 10px;}.pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;}.pillar p {padding-bottom:0.5em;}.pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;}.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;}.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}.pillar .b1 {margin:0 2px; background:#fff;}.pillar .b2 {margin:0 1px; border-width:0 1px;}.pillar .b3 {height:2px; margin:0;}.pillar .b4 {margin:0 2px;}.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}/* Barrel cutout Borders*/.barrel {background: transparent; width:40%; margin:0 auto;}.barrel h1, .barrel p {margin:0 10px;}.barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}.barrel p {padding-bottom:0.5em;}.barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}.barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}.barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}.barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}.barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}.barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}.barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}.barrel .b1 {margin:0 33%;}.barrel .b2 {margin:0 20%;}.barrel .b3 {margin:0 12%;}.barrel .b4 {margin:0 5%;}.barrel .b5 {margin:0 1px;}.barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}</style></head><body><div id="info"><h2>Corners</h2><div class="raised"><b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b><div class="boxcontent"><h1>3D Raised</h1><p>Rounded corners with raised borders</p></div><b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b></div><p></p><div class="inset"><b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b><div class="boxcontent"><h1>3D Inset</h1><p>Rounded corners with inset borders</p></div><b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b></div><p></p><div class="pillar"><b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b></b><div class="boxcontent"><h1>Pillar shape</h1><p>Corners to give a rounded pillar effect.</p></div><b class="bottom"><b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b></div><p></p><div class="square"><b class="top"><b class="b1t"></b><b class="b2"></b></b><div class="boxcontent"><h1>Square cutout Border</h1><p>A box with cutout corners</p></div><b class="bottom"><b class="b2"></b><b class="b1b"></b></b></div><p></p><div class="chamfer"><b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b><div class="boxcontent"><h1>Chamfer Border</h1><p>A 45 degree border</p></div><b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b></div><p></p><p></p><div class="curved"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="boxcontent"><h1>Curved cutout Border</h1><p>A box with cutout corners</p></div><b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b></div><p></p><div class="serif"><b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b><div class="boxcontent"><h1>Flared shape</h1><p>Corners to give a serif effect.</p></div><b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b></div><p></p><p></p><div class="barrel"><b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b><div class="boxcontent"><h1>Barrel shape</h1><p>A box with top and bottom bulges.</p></div><b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b></div></div></body></html>

Wow, this is a long post :)Hope all this helps.

[WebmistressM]

I did look up nifty corners some time ago but, again, I dont see how this can be applied for graphical corners, and at that, when you are only having a bottom right and top left corner.Okay, here is how things stand now:The html:

<body><div id="shell" /><div class="topleft"><div id="header" />Header goes here </div><div id="main">Dummy text</div> <div id="footer" />This is the footer </div><div class="bottomright" /></div>  </div></div></body></html>

and the CSS:

/* CSS Document */body {	font-family: Verdana;	font-size:100%;	background-color: #000033;	left: 0px;	top: 0px;	right: 0px;	bottom: 0px;	color: #CCCCCC;	}#shell {	max-width:1200px;	max-height: 768px;	}	.topleft{	position: relative;	background-image: url(topcornerstone.jpg);	background-repeat: no-repeat;	background-position: 0 0;	border: medium solid #00CCFF;}.bottomright{	position: relative;	background-image: url(bottomcornerstone.jpg);	background-repeat: no-repeat;	background-position: 100 100;}

[rzea]

I did look up nifty corners some time ago but, again, I dont see how this can be applied for graphical corners...

The use of Nifty Corners is a WAY more simple way of accomplishing the same thing.

... and at that, when you are only having a bottom right and top left corner.

With some creativity you could get it to work, but for that you need to 'work' and not expect someone to give you the code.Good luck.

[WebmistressM]

With some creativity you could get it to work, but for that you need to 'work' and not expect someone to give you the code.Good luck.

Im a bit lost in how you interpreted my post before this. I thought that giving out your code in hopes of helping find out what went wrong was not considered "expecting someone to give me the code".Hmm...maybe Ill have to break this into two seperate CSS files to keep the data size down.