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, causing the design to stay maxed to 1200x960, the remaining right section just being blank (with your default background color)?
posted by:
|
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 7:04 AMWrap everything in a container with a max width of 1440 for instance. -
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 8:11 AMYes, but isnt max-width a CSS property that not all browsers recognize?
-
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 8:12 AMuse the CSS max-width property, this will work for most compliant browsers, including IE7. if you need to enforce it on earlier versions of IE, stick a javascript expression in a seperate stylesheet and load it with conditional comments. -
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 8:24 AMYeah. What would be the javascript substitute (I have never used javascript) for max-width? Where would it be placed? I know that javascript and javascript hacks can be very dependent on you placing them in the right spot. -
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 8:33 AMOlder computers with older browsers won't have wide screens so no worries there. No need to over-engineer the thing. :) -
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 8:38 AMThats kind of what i was thinking but then again, Im not a big fan of javascript based "hacks" or CSS hacks for that matter. I suppose I should try it since they do work but then the fear comes when the next new browser version come along.
But i digress...
Anyone here have a screen wider than 1200 width? I might need someone to help me out (pass me a screen shot over IM or something) to tell me what they see on thier side of things. The whole point of restricting it is becuse I made my 2 corner images for a resolution width as wide as 1200 and I know that if I dont do this restriction, wider browsers (1600x1200, and those people that have a bigger screen than I personally would believe is necessary for browsing purposes) will render those 2 corner graphics stretched and distorted. -
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 2:19 PMI have several displays that are 1440x900 and I imagine others do too. I can do FF on OSX and Linux, Konquerer on Linux and maybe Camino. I don't even bother with Safari. -
-
Re: Liquid...but restricted
Mon, June 23, 2008 - 2:32 PMOh, and do you think assigning percentage width and height to each of these 2 cornerstone images will keep the image from distorting aspect ratio? I want to make sure that I use percentages to insure stretchyness of these images between 800x600, 1024x760, and 1200x800, but that the inequality of height vs width of each image doesnt create a problem where the images stretch well but then distort. The overall idea of placing a "limiting div" may help with that, right? -
-
Re: Liquid...but restricted
Tue, June 24, 2008 - 7:08 AMNot sure about assigning percentages but the math th e browser does might not give perfect alignments. -
-
Re: Liquid...but restricted
Tue, June 24, 2008 - 7:58 AMYeah. I figured that alignment would be a challenge so I took the two corner graphics and made it into one big graphic to se i that owuld help since percentages cant misalign something that is all one image vs 2 seperate corner images. Of course I forgot to calculate that a 1200 screen wont actually be a 1200 width when all is said and done in browswer window. Anyone remember how much to subtract to account for browser bars, scrollbars, etc??
-
-
-
-
Re: Liquid...but restricted
Tue, June 24, 2008 - 7:01 AMYou could also create a seperate css sheet for IE with the css differences noted here and placed after the original CSS.
Then use javascript to determine if the user is using IE and, if so, load this css file.
To be honest tho, the max-width idea is the best one.
Otherwise use javascript to determine the screen width/height.
If width is greater than 1200 then load in CSS1 else load in CSS2
loads of different work-arounds.
-
-
-
Re: Liquid...but restricted
Tue, June 24, 2008 - 6:57 AMconditional comments are not a "hack", they are a non-standard feature of IE browsers, and as you can target specific versions of IE they are indeed future-proof.
you would use something to the effect of:
<!--[if IE 6]>
<style>@import "IE6.css"
<![endif]-->
then in IE6.css, you would want something along the lines of:
DIV.wrapper {
width: expression(document.body.scrollWidth>1400?1400:document.body.scrollWidth + 'px')
}
this is untested and off the top of my head but i think it should work. u may want to replace the @import with a <link> to load the stylesheet but i can never remember the correct syntax for that one... -
-
Re: Liquid...but restricted
Tue, June 24, 2008 - 7:09 AMYou mean a "non-standard" feature like Pinto's exploding in a car accident? <snark> -
-
Re: Liquid...but restricted
Wed, June 25, 2008 - 7:50 AMevery major browser has non-standard features. after IE 5.5, the "standards" crowd "standardized" on a way to implement "non-standard" features, using the "-[prefix]-" method, for example before opacity was fully supported, firefox used "-moz-opacity", etc.
The most efficient way for technology to move forward is to implement non-standard features and standardize on them after the fact, not wait around 5 years for a bunch of incompetent self-righteous twits to go back and forth on a "working draft" of CSS3 that is STILL probably the most ridiculous, impractical, laughable joke of a technical document I've ever seen. But hey, if you think using ASCII art to describe layouts is cool, that's all good. -
-
Re: Liquid...but restricted
Wed, June 25, 2008 - 8:10 AMUnfortunately, technology moves backwards with non-standard features most of the time. The most virulent offender is M$ of course. They implement non-standard features often AFTER the standards have been established.
-
-
-
-
-
-
Getting Close. Just need to do the stretchy part
Thu, June 26, 2008 - 1:05 AMwildgasmasks.com/wgm2/
First off, the white square is merely a placeholder image.
This may be seen as sloppy HTML/CSS but it is worth a shot. Note that the following CSS has not been fully tested in resolutions as Im still trying to figure in using percentages:
body {
font-family: Verdana;
font-size:100%;
background-color: #000033;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
#topcorner {
left: 0px;
top: 0px;
position: absolute;
}
#bottomcorner {
right: 0px;
bottom: 0px;
position: absolute;
}
HTML:
<body>
<div id="topcorner"> <img src="cornerstonebackground.png" /> </div> <img src="www.cpmachining.com/swap_ima...lder.JPG" /> <br /><div id="bottomcorner"><img src="bottomcornerstone.png" /></div>
</body>
**********
The hard part is figuring out how to fit in something that will restrict the 2 images to the percentage (as per the original post of this thread). Can I make it only stretchy in relationship to a 1200x800 restriction or do I have to complicate it more by limiting the container's width/height restriction? If the latter, how does one use percentages *in relation to its containing box* vs in relation to the overall browser window?
Kat -
-
Re: Getting Close. Just need to do the stretchy part
Mon, June 30, 2008 - 5:17 PMwell there isnt a white square anymore. Im assuming youre trying to make a cornered effect, like rounded corners but much more elaborate. Youre really going abou tit all worng i think if youre using percentages.
try something along these lines
<<html>
<head>
<style type="text/css">
.corner {
height:10px;
line-height:10px;
position:relative;
width:10px;
z-index:10;
background-color: #f00;
}
#corner_2 {
float:right;
margin-top:-10px;
}
#corner_3 {
float:right;
margin-top:-10px;
}
#corner_4 {
float:left;
margin-top:-10px;
}
#main {
width: 100%;
height: 400px;
}
#shell {
width: 600px;
margin: auto auto;
}
</style>
</head>
<body>
<div id="shell" class="container">
<div id="corner_1" class="corner"></div>
<div id="corner_2" class="corner"></div>
<div id="main">
<!-- your content or whathaveyou -->
</div>
<div id="corner_3" class="corner"></div>
<div id="corner_4" class="corner"></div>
</div>
</body>
</html>
this way when you adjust the size of the overall container (#shell) the corners will move with it. Like wise if #main expands or contracts so do the corners. -
-
Re: Getting Close. Just need to do the stretchy part
Mon, June 30, 2008 - 6:17 PMIm not sure I am going about it "all wrong" but I think Im getting there. I tried a different approach altogether than what was described from my last post, which is why the white is gone. I have been making changes since then. Didnt know that there was going to be a bit of a lull this week on tribe (but I dont blame people) so I have been doing many more tweaks since my last post.
The 4 rounded corner tutorials did help me figure things out somewhat, except that I am not trying to make a small rounded of square div of any kind, only needing 2 corners (the top left and lower right). Thats why the percentages would seem to work better. Fixed is attractive but it could get really bone thin on larger resolutions. The content section's needed size may not be consistent from page to page which is why I want to try and make things a bit flexible and experiment with how the second corner (the one in the lower right) might sit if dealing with a page that has a big amount of content in the content area vs something that may have only a brief text therein.
So far, I actually have made percentages work with the only target audience that is "left out" as those that are IE6 users *who have also disabled javascript*. It was an expression to aid with IE6/5.5's issue with the max-width property.:
www.svendtofte.com/code/max_width_in_ie/
Again, while it leaves out any IE6 user with javascript disabled it may be easier to tame than having to break up my corner image into 3 pieces. Its very similiar to David's idea. My code as of now (314 is the amount I plugged in as that is the width of the actual item).
#topcorner IMG {
width:100%;
max-width:314px;
width:expression(document.body.clientWidth > 314? "314px": "auto" );
position: absolute;
left: 0px;
top: 0px;
****
HTML
****
<body><p id="topcorner"> <img src="cornerstonebackground.png" /></p> </body>
***
Not sure how this will jive when the lower right corner is added. Gotta reduce the data size on the left corner now that Im this far into the game. Thanks so much for your help, guys. Your code might also be an option if it lets me find the solution without using javascript. Only problem is that I have a hard time understanding if 10px is just the variable to use or if that can be changed since my image's "utmost corner" is much larger than 10px.
Kat
-
-
Re: Getting Close. Just need to do the stretchy part
Tue, July 1, 2008 - 9:24 AM10 px are jsut the offsets. This measurement should correspond to you image size, if its a margin top/bottom then the height, if its a right/left then the width. If you only need two corners just remove corner_2 and corner_3 from the setup. There should be no JS needed, unless you need to make the corner with a png mask, then you'll of course need a png transparency fix which might involve js. -
-
Re: Getting Close. Just need to do the stretchy part
Tue, July 1, 2008 - 7:26 PMYeah. I am using a PNG mask so it looks like Ill have to put in Javascript anyway I slice it.
Im still not sure what parts I should replace for the corner, corner4, main and shell counts. Limit for the design should go no further than 1200x800. Bottom corner is 392x736, Top corner is 314x345.
-
Re: Getting Close. Just need to do the stretchy part
Mon, July 7, 2008 - 8:13 PMAny reason why my top left corner is not displaying all the way? I only get a small sliver of the graphic rther than the whole thing. Would this have to do with positioning (absolute, fixed, etc..)?
-
-
-
-
-
Re: Liquid...but restricted
Wed, August 6, 2008 - 11:27 AMFirst off, I knwo this thread was long dead of response so Im unsure if this tribe's etiquette would want me to create a brand new thread, linking to this one or if resurrecting a dead thread is okay.
Anyhow, my question is reference to this:
web-design.tribe.net/photos/...802463ab
Is this design possible to do with the following conditions:
* Liquid Layout (with restriction on any resolution higher than 1200px) -- as implied in this thread's original title
* Does not use tables for layout, using divs' instead
* Doesnt use any javascript.
I only am asking this now because I have tried to work this out and it seems like CSS positioning is getting the corner to adhere to the right side.
See CSS trainwreck here (its been a while since i have had time to move this around):
wildgasmasks.com/wgm2/
I tried rounded corners but it doesnt seem to work quite the way that I intended. Maybe I need a solid swatch color as a placeholder for the 2 (of the 4) corners that I dont need (top right, and bottom left). This is aggravating me as well as it might aggravate you guys. I have asked in other forums and gotten way less constructive responses than from here.
Kat
