Paul,
Regarding the JavaScript… I did find a method or fashion that is browser compatible.
Thanks for helping me with a JavaScript solution : geee:
However Im still researching how to call a stylesheet based on the user’s resolution.
Have a good weekend and Regards,
Team 1504 
Hmm Kind of… regarding the having content on both left and right sides and having to scroll what ever way to see it… (The second part of your post: From the quote onwards)
I see, with your explanation, why it wouldn’t work. Couldn’t I though not display that part of the site for smaller solutions. It is just an image and I could remove the lifesaver and flag and save it as a new image.
Isn’t there a way that I can call on a CSS stylesheet based on the user’s resolution?
So could I then do something like…
@ resolution less than or equal to 1024 X 768{
backround:iceberg_alternate.png;}
Sorry if i was confusing.
I have added the proper Doctype so that it works in IE8 and I did remove the align=“center” in the instance of that div tag.
if it helps anymore with what I am trying to do, here are some images…
So here is what, ideally, I want the user to see. Because 76% use higher than 1024x768 according to this in [URL=“http://www.sitepoint.com/forums/attachment.php?attachmentid=54375&stc=1&d=1276259885”]ideally.png
Here is what I currently see on my 1024 X 768 screen in whatIsee.png
But, then, here is what I want the user to see if they have 1024 x 768 or less in whatIWantToSee.png
[URL=“http://www.sitepoint.com/forums/attachment.php?attachmentid=54376&stc=1&d=1276259903”]
Here is a map of my div tags and what they hold, im sorry if it is messy in map.png
I hope my images help!
Thanks for everything Paul!
And as always reply with any questions or concerns.
Regards,
Team 1504!
Paul is being polite and trying to help you silver bullet fix it, but he’s implying a lot of things I’m going to come right out and say. Please keep in mind I am trying to help steer you down the right path rather than slap the rose coloured glasses on your head and tell you everything is alright when it isn’t.
In general, you need to get your head out of the “but I can do it in photoshop” mentality as this layout is completely undeployable real world. It makes no provisions for screen size, is knee deep in “gee ain’t it neat” javascripted nonsense, and is saddled with outdated/outmoded and just plain wrong methodologies. There’s no images off graceful degradation, no scripting off accessibility - and to top it all off, at over a megabyte in size nobody is going to voluntarily want to visit it in the first place!
There’s a reason you don’t see layouts like this very often with the monstrous graphics - you’ve been heading yourself down the path to failure. 90% of those graphics NEED to go - not only on their raw size as a waste of bandwidth but also backwards compatibility issues
I mean seriously, you are chewing 1.2 megabytes right now to deliver 2.4k of plaintext. If that doesn’t spell out just how flawed the current approach is, I don’t know what does.
Even just the markup - 17k for 2.4k of content. Broken heading orders, FRAMESETS (what is this, 1998?), endless unnecessary classes and ID’s, static scripting inlined in the markup, javascript doing CSS’ job or worse bloating out the page with “gee ain’t it neat” animations for no good reason…
There is NOTHING on that page I would advise you to even TRY to salvage. Throw it ALL out, start over with semantic markup, design a semi-fluid or fluid layout using the CSS, THEN boot up the goofy paint program to make graphics to hang on it.
Remember, people don’t visit websites for the fancy graphical nonsense and animations - they visit for the CONTENT… and frankly for 90%+ of users out there I would be assuming your graphical nonsense and animations is getting in the way of that.
NOT trying to be harsh, just telling you what I see.
Just open and close the browser window to see what the page will look like at different sizes (drag the edge of the browser window). Very few people have their browser maximised so resolution means nothing :).
Absolutely possible. @media is very handy… especially for something like the iPhone.
There is a nice A List Apart article on this from a few weeks ago:
You could just scroll the page to the center with some js so that the middle part is showing in smaller windows and that would allow you to still scroll left or right.
Something like this (but it doesn’t work in ie6/7 or safari though so you would need a better script):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
#wrap {
width:1300px;
margin:auto;
padding:20px;
border:1px solid #000;
background:#ffc;
}
#content {
width:900px;
background:red;
margin:auto;
}
h1 {text-align:center;}
</style>
</head>
<body>
<div id="wrap">
<h1><a href="#content">test</a></h1>
<div id="content">
<p>the content the content the content the content the content the content the content the content </p>
</div>
</div>
<script type="text/javascript">location.hash = "content";</script>
</body>
</html>
You could just scroll the page to the center with some js so that the middle part is showing in smaller windows and that would allow you to still scroll left or right.
Something like this (but it doesn’t work in ie6/7 or safari though so you would need a better script):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
#wrap {
width:1300px;
margin:auto;
padding:20px;
border:1px solid #000;
background:#ffc;
}
#content {
width:900px;
background:red;
margin:auto;
}
h1 {text-align:center;}
</style>
</head>
<body>
<div id="wrap">
<h1><a href="#content">test</a></h1>
<div id="content">
<p>the content the content the content the content the content the content the content the content </p>
</div>
</div>
<script type="text/javascript">location.hash = "content";</script>
</body>
</html>
What I was thinking of Paul is how one can i have a style sheet for @media type or @print
I believe that i read some article you could do it per @screenResolution. Unfortunately i cannot find this article i was hoping you could help me figure out how to detect the users screen resolution then link to a specific style sheet correspondingly
Hear from you soon and Thanks in advance!
Paul,
Regarding the JavaScript… I did find a method or fashion that is browser compatible.
Thanks for helping me with a JavaScript solution : geee:
However Im still researching how to call a stylesheet based on the user’s resolution.
Have a good weekend and Regards,
Team 1504
Hi,
Ok I understand what you are saying now (I think :)) and this could be accomplished but the content that is hidden off the left side of the monitor cannot be reached because the browser doesn’t scroll that way.
If you are happy that your dock cannot be reached then just center the page like this:
#container{
width:1400px;
background:url(../../media/images/iceberg.png);
background-repeat:no-repeat;
[B] position:absolute;
left:50%;
margin-left:-700px;[/B]
height:1098px;
}
This will allow the left edge to slide off the screen but is a bit of an accessibility issue unless the left side content is not really needed for navigating your site.
You could achieve a slightly better result using the method from a previous css quiz which allows a centred section to contain left and right banners that do not interfere with the main page content.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#page {
width:760px;
margin:auto;
text-align:left;
background:red;
position:relative;
z-index:2;
}
#adholder {
width: 100%;
overflow: hidden;
position: absolute;
top: 20px;
left: 0;
}
#adinner {
width:760px;
margin:auto;
}
.adright,.adleft {
width:160px;
position: relative;
margin:0;
float:left;
height:600px;
overflow: hidden;
background:#52b502;/* for testing */
z-index:99;
}
.adright{float:right;left:170px;}
.adleft{left:-170px}
</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
<div class="adright">Advert goes here</div>
<div class="adleft">Advert goes here</div>
</div>
</div>
<div id="page">
<h1>Centred page content goes here</h1>
<p><a href="#">test</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
Hi,
The page isn’t working in any version of IE because you have no doctype and all versions of IE will behave much like IE5 and you lose any enhancements made to the browser this century. Always use a full valid doctype with uri.
I didn’t really understand what issue you were to trying to solve but I notice the text in the middle is centred due to the deprecated align=“center” atttribute that you are using.
You should not mix presentational mark up with css as there is a chance that they will conflict or not agree. Just use css.
Remove the align-“center” from here:
<div id="mainContent" [B]align="center"[/B]>
If the element is a fixed with and auto margins are used then it will be centred.
Add the doctype and then remove the above code and then we’ll take it from there.
Could someone please help me style my div tags so that only the container which holds the content, id=“mainContent”, is centered. and then if one’s screen resolution is not big enough then one would have to scroll left to see the lifesaver and vertical dock, or right to see the iceberg and flag.
It should make more sense if one visits my site
You can’t scroll left and right (unless you have first scrolled to reach the hidden content). It only works in one horizontal direction.
In a left to right environment you can only scroll to the right. The width of the page is the sum of the widths of the horizontal content and if that is centred in a parent container then that’s the min-width of your page. You can’t just have an isolated middle section in the middle and then scroll either left or right as browsers aren’t built that way (If that’s what you meant?)
so ralph,
then should I be able to do this
if I want to display a styling for viewports 1024 width and below
@media screen and (max-device-width: 1024px) {
/* CSS for stylesheet for smaller site for smaller viewports goes here */
}
}
How would I also add the condition of a max height of 768px?
Also could I do something like this <link rel=“stylesheet” type=“text/css”
media=“screen and (max-device-width: 1024px)”
href=“alternate.css” />
to just link to an alternate stylesheet for smaller viewports.
Thanks for all your help!