Forum Moderators: not2easy
My work wants me to do a website and they've thrown a ton of graphics at me. Lord knows I have plenty of work already but I guess this is my chance to be the hero, or epic failure... To start, the website design is a fixed box that is 1024px x 768px. It is to be centered on the screen both horizontally and vertically. My previous attempts at doing so involved a tables and didn't work on some browsers. I found a site that uses CSS instead. Does anyone see any problem with me using this for our site?
<snip>
Thank you (and my apologies to those who replied to my last thread; I didn't realize how lost I am and wanna start with the basics)
[edited by: swa66 at 2:37 am (utc) on Jan. 4, 2009]
[edit reason] No URLs, please see forum charter. [/edit]
There are a wide range of actively used screen sizes out there now, ranging from 800'ish to 2400'ish wide, just for example.
Why is the company so set on having a fixed size that probably 1/2 or less of the browsers will display properly?
I'm not going to look at IE at this stage (running out of time as it is, something for a next episode). IE only confuses you in my experience, so I tend to not look at it till the very end, end then fix the trouble it has.
So, a first attempt is to know how to center things.
One of the "tricks" is to absolutely position things at 50% and use a negative margin of half the width to pull it back.
Something like:
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: teal;
}
body {
background-color: white;
width: 1024px;
height: 768px;
position: absolute;
top: 50%;
margin-top: -384px; /* half the height */
left: 50%;
margin-left: -512px; /* half the width */
}
</style>
</head>
<body>
<p>Ipso lorem</p>
</body>
</html>
Now while that works, it doesn't degrade very nicely if the viewport is too small to fit 1024x768 (try it).
A trick to fix that is to make sure the html stays big enough to position the body inside it.
So we need to know about heights:
The root element is supposed to have the height of the viewport.
"height: 100%" give an element the height of it's direct parent provided it has an explicitly set height.
And we need to know about having position:
An absolutely position element is positioned inside it closest parent that has gained "position" itself. Gaining position is done a.o. by giving the parent "postion:relative" (while itself designed to nudge elements about, it doesn't have to move the element in order to have it gain position)
If we give the html a min-height and min-width of 1024x768 it can;t get too small not to fit the body anymore and the negative margins can;t push it out any longer.
Let's try:
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: teal;
/* To make sure the body fits */
min-height: 768px;
min-width: 1024px;
/* to gain position */
position: relative;
}
body {
background-color: white;
width: 1024px;
height: 768px;
position: absolute;
top: 50%;
margin-top: -384px; /* half the height */
left: 50%;
margin-left: -512px; /* half the width */
}
</style>
</head>
<body>
<p>Ipso lorem</p>
</body>
</html>
Failure.
Now why is that ?
Well the html isn't high enough, the 50% works in relation to that low height now (due to it having position) and then the negative margins pushes it off of the screen.
Adding height:100% to html fixes it for some browsers (opera & safari), but oddly enough not for FF3 (I'm not sure why, seems as if the min-height is ignored for positioning while it is actually used to create scrollbars)
But not all is lost, there is another -some might say cleaner- way to center elements: position:absolute, a specified top and bottom and a set height and auto margins. The browser will ten calculate the margins to center it.
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: teal;
/* To create scrollbars if too small for the body to fit */
height: 100%;
min-height: 768px;
min-width: 1024px;
/* to gain position */
position: relative;
}
body {
background-color: white;
width: 1024px;
height: 768px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<p>Ipso lorem</p>
</body>
</html>
It'll fail miserably in IE6, so we'll need to fix that by adding some conditional comments, but for now it works in FF3, safari and opera and is untested in IE7.
Also if the content is too large it'll overflow, but I suppose that's not your biggest concern in a project with a fixed height requirement.
I have had success with centering a web page by putting all my content in a wrapper div and giving that div a margin-left: auto; and a margin-right: auto;
This centers my pages left to right in whatever resolution a viewer has. (I have tested it in several, including 1024 x 768) However, I have not tried centering anthing top to bottom.
IMHO using min-height or min-width is a recipe for cross browser problems
It's a sure way to get IE6 to show it's ugly side, but that's the only in use browser that you need to worry about.
Anyway even for IE6 there are a number of ways to fix this, I'll come back to it as I've time.
About fixing the height:
This is something websites were never designed for (vertical scrollbar and text-wrapping, yo!), and is one of the things that has really messed up my online navigation experience, among other things.
Most of the websites I've visited that are fixed height are flash sites. Everyone knows how inaccessible, among other things, flash sites are, but how fares html? Definately better, but I find one of the major issues will be fitting content in the small container. you see when someone like me that's running 1920x1440 resolution comes and visits a webpage that is nearly 4 times smaller than my screen, I cannot read or see anything comfortably, and I am still youthful and not disabled. To make it so that every page I visit (and i do mean virtually every page) I don't have to scale up the font size because the stupid designers don't go off browser's font size... my browser (FF) uses the nifty function called "minimum font size", which increases the text to the size I want to read it at.
What's the problem? imagine suddenly fitting text twice as large into your fixed pixel height and width design. The page would become unreadable due to overflow problems (whether it's hidden or visible).
Realize that designers sometimes have very little idea what's best for them, and just want something to be "cool". I urge you to discuss the fixed height issue (and even the fixed width, but that's not as bad) with the designers and/or superiors, that it should not be done, not only because it may be difficult to implement well, but that it's quite inaccessible too.
One of the great things about divs that you're getting into now, is that they are a bit more flexible for layouts. It's not hard to use ems for the widths of containers if you wanted, to ensure certain text will always remain on the same line, regardless of font size and text wrapping.
I think the path the modern browsers are choosing is to let the user zoom without changing the layout. E.g.FF3 does this nicely.
FWIW: I use a 1920px wide screen too, but virtually never let a browser have more than half of the width of the screen...
As for why this website is designed this way, our company offers one-touch automation of home electronics; the emphasis is ease-of-use. So the site designer thought with would be best if the site contained no scrolling whatsoever. The product is a website without a single drop of fluidity. Instead, the website is basically a 1024x768 photo with buttons and contents, etc., placed atop the photo. While it certainly sounds silly, the design itself is actually really nice, though the technical portion of it seems to be a total nightmare.
To further complicate things, our computer network is a cross between Macs and PCs so we've got Safari, Firefox 2 & 3, and Internet Explorer 7 (there may be one or two IE6 terminals). So I get the wonderful task of enforcing compatibility with browsers.
At any rate, are there any possible workarounds for this nightmare or a design request? One other thing that sorta complicates the centering of the site is that there's a shadow image that sits behind the 1024x768 site; the shadow is a hair larger both vertically and horizontally, and essentially shadows all sides of the website, so basically it would be a centered DIV of about 1050x780 centered on a screen with another DIV of about 1024x768 centered within it...
So am I correctly picking up that there is not decently-compatible way of doing this? Aye yay yay.
Basically I post these things not as "here is a solution" but far more as a here is a path to one of the possible solutions. To me the journey is more important than the destination itself as the journey is where it's easier to learn (for myself just as well as for those reading it).
Let's look at fixing it for IE7
It looks bad: not centered at all.
It looks good: nothing goes off screen and I get scrollbar if it is too small.
Now the way of centering I used in the last incarnation isn't something IE likes a lot (but I wasn't expecting IE7 to bark about it
So let's use a conditional comment and try to give IE7 code it does like better.
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: teal;
/* To create scrollbars if too small for the body to fit */
height: 100%;
min-height: 768px;
min-width: 1024px;
/* to gain position */
position: relative;
}
body {
background-color: white;
width: 1024px;
height: 768px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<!--[if IE 7]>
<style type="text/css">
body {
bottom: auto; /* reset to default */
top: 50%;
margin-top: -386px; /* half the height */
right: auto; /* reset to default */
left: 50%;
margin-left: -512px; /* half the width */
}
</style>
<![endif]-->
</head>
<body>
<p>Ipso lorem</p>
</body>
</html>
This makes it center properly if the window is large enough, but it still fails when the window gets too small. I'm a bit out of inspiration on how to make it behave better. I looked at scripted help (IE8.js) but it wasn't a help.
Maybe an expression to make sure it doesn't get margins that push it off of the screen could be a solution that warrants further exploration.
But let's first look at the damage in IE6.
surprisingly it behaves exactly the same as IE7 (mostly it is far worse), and the same fix works as well.
So:
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: teal;
/* To create scrollbars if too small for the body to fit */
height: 100%;
min-height: 768px;
min-width: 1024px;
/* to gain position */
position: relative;
}
body {
background-color: white;
width: 1024px;
height: 768px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {
bottom: auto; /* reset to default */
top: 50%;
margin-top: -386px; /* half the height */
right: auto; /* reset to default */
left: 50%;
margin-left: -512px; /* half the width */
}
</style>
<![endif]-->
</head>
<body>
<p>Ipso lorem</p>
</body>
</html>
Is a good start, but I'd look at expressions a bit deeper to make sure the negative margin for IE doesn't get less than 50% of the viewport's size.
Now IE6 doesn't understand min-height and min-width, but it seems like IE7 is exhibiting the same problems while it does do min-width etc.
There is another thing: I styled both <html> and <body> and well IE doesn't always like that, but adding a wrapper div and moving it all one level own doesn't seem to help either (if you do let html keep the 100% height).
So back to the expressions and with my limited JavaScript and DOM knowledge I concocted these.
margin-top:expression(this.parentNode.clientHeight < 768 ? -this.
parentNode.clientHeight/2+"px" : "-386px");
margin-left:expression(this.parentNode.clientWidth < 1024 ? -this
.parentNode.clientWidth/2+"px" : "-512px");
I'm sure somebody more fluent in DOM and JavaScript will have better but they do work for both IE7 and IE6.
Putting it together it yields:
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background-color: teal;
/* To create scrollbars if too small for the body to fit */
height: 100%;
min-height: 768px;
min-width: 1024px;
/* to gain position */
position: relative;
}
body {
background-color: white;
width: 1024px;
height: 768px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {
bottom: auto; /* reset to default */
top: 50%;
margin-top:expression(this.parentNode.clientHeight < 768 ? -this.
parentNode.clientHeight/2+"px" : "-386px");
right: auto; /* reset to default */
left: 50%;
margin-left:expression(this.parentNode.clientWidth < 1024 ? -this
.parentNode.clientWidth/2+"px" : "-512px");
}
</style>
<![endif]-->
</head>
<body>
<p>Ipso lorem</p>
</body>
</html>
