So the problem is that whenever the "Browser" is resized or the resolution (another screen) is changed my text goes to some different direction, I want it to stand at the same location even if the size of the screen changes. I know that I could just make it a "fixed" width, but I'd rather skip that since that doesn't make the website centered when someone with a small screen visits the site. So, anyway, here's the code. CSS: html { background-image: url('../images/htmlBG.png'); } body { background: black url('../images/background.jpg') no-repeat top; margin: 0 auto; font-size: 90%; font-family: helvetica, Georgia, sanserif; text-align: center; min-width: 1000px; max-width: 1960px; min-height: 1200px; } ul, li, img; { margin: 0 auto; padding: 0; list-style: none; } a { text-decoration: none; color: #002d56; } a:hover { text-decoration: underline; } a img { border: none; } h3 { color: black; margin: 0; padding: .2em .5em; text-align: center; font-weight: bold; } h2 { font-family: Georgia; } .fr { float: right; } .fl { float: left; } #header { margin: 0 auto; overflow: hidden; background-image: url('../images/header.jpg') no-repeat; width: 980px; height: 462px; } #navigation { position: relative; right: 38px; top: 297px; } #navigation1 { position: relative; left: 592px; top: 214px; } #navigation ul li { list-style: none; display: table-cell; } #navigation1 ul li { list-style: none; display: table-cell; } #tier1 { width: 929px; height: 207px; position: relative; left: 166px; bottom: 73px; } #registerNow { float: right; width: 250px; } #News { position: relative; left: 330px; width: 350px; } #tier2 { } #logos { position: relative; top: 125px; left: 160px; } #footer { background: #000 url('../images/footer.png') no-repeat; } Code (markup): 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> <title>Title :D</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script> <script src="js/scripts.js" type="text/javascript"></script> <script src="js/jquery.innerfade.js" type="text/javascript"></script> </head> <body> <div id="header"> <div id="navigation"> <ul> <li><a href="#"><img src="images/Nav1.png"alt="Sample1!"/></a></li> <li><a href="#"><img src="images/Nav2.png"alt="Sample2!"/></a></li> <li><a href="#"><img src="images/Nav3.png"alt="Sample3!"/></a></li> </ul> </div><!--end navigation--> <div id="navigation1"> <ul> <li><a href="#"><img src="images/Nav4.png"alt="Sample4!"/></a></li> <li><a href="#"><img src="images/Nav5.png"alt="Sample5!"/></a></li> <li><a href="#"><img src="images/Nav6.png"alt="Sample6!"/></a></li> </ul> </div><!--end navigation1--> </div><!--end header--> <div id="mainContent"> <div id="tier1"> <div id="registerNow"> <a href="#"><img src="images/RegisterNow.png" alt="Register Now" /></a> </div><!--end registerNow--> <div id="News"> <img src="images/NewsImage.png" alt="News" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna mi, ornare at mattis in, laoreet in arcu. Mauris magna urna, lacinia at ultrices at, porta nec libero. Mauris commodo nibh eu leo tempus eu aliquam justo congue. Curabitur sit amet leo sed mi tempor placerat. Etiam tempus lacinia interdum. Mauris ac mauris mi. Vivamus elementum molestie dui, sed ornare ipsum euismod vitae. Donec dui risus, posuere quis imperdiet id, tempor eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><small><a href="#">Read More...</a></small> </p> </div><!--end News--> </div><!--end tier1--> <div id="logos"> <img src="images/logos/logo1" alt="logo1" /> <img src="images/logos/logo2" alt="logo2" /> <img src="images/logos/logo3" alt="logo3" /> <img src="images/logos/logo4" alt="logo4" /> </div><!--end logos--> </div><!--end mainContent--> </div> </body> </html> Code (markup):
The issue is related to 2 elements, you have #header and #tier1. Your Header uses margin:0 auto to position itself, which will of course always be in the center depending on width. (So it will shift when you resize the window) However, your #tier1 element uses position:relative, which has a left and top setting applied, which means regardless of what the width of the window is, it will always be x amount from the left, so it remains fixed. To fix this I would highly recommend using a container div surrounding all your code, so that you dont have to apply the same code over and over to all your elements there within. You can do something like: <div id="container"> ALL YOUR EXISTING HTML CODE GOES HERE </div> HTML: and then set a width, and use margin:0 auto; for #container.
Yeah, I knew I could do that, but I don't want a "set" width, because the image is 1960 pixels in width =P I was trying a PSD -> XHTML/CSS/JS and the PSD is in, Width: 1960px, Height: 1200px. Thanks so much for the help btw!
Since I can't see your images, I don't know what you are trying to do. But I would suggest you simply set it as a background image and position it to the center. That way, irregardless of width of the user's window, the image and your content will always stay together. P.S. You don't need any of the max-width/max-height in your body. They won't do anything in your case.
... and I guess the bg graphic is HUGE because it is 1960x1200... waste of space if you ask me. If this all is about resizing bg image you should use a technique that really works. E.g. this one: http://xhtml-valid-websites.com/forum/Thread-full-size-background-with-jquery-navigation Background is always full size (check the CSS how to achieve that). Oh by the way ... if my resolution is only 1024x768px ... what happens then? Your CSS "starts" at 1000px width (and it's wrong usage to set min-width with the body element anyway). The graphic will get cut. Correct would be a wrapper. margin: 0 auto; Code (markup): in body does not have any effect since you do not have a fixed width/height. <img src="images/Nav1.png"alt="Sample1!"/> Code (markup): is wrong markup anyway... missing "space" between ...png" and alt. And always set width="x" height="x" in the img tags! jQuery 1.2.6 is pretty old... we have 1.4.3 now! I would upgrade to latest. (I would use jquery cycle instead of innerfade It is better to load JS at the bottom so the site will render first, otherwise the JS files will block rendering when put in head. Do you have this stuff online so I could take a look?
Just take a look at the 2 pictures taken 2 minutes ago with your code (Google Chrome 1024x768 pixels resolution) The picture "chrome.jpg" shows the "loaded" site (I do not have your graphics). You see the horizontal scroll bar (because of min-width:1000px). Now when I scroll right you will see the following (check scrolled-right-chrome.jpg). A white "border"... not good
That's just because you don't have the "htmlBG.png". if you'd have that it wouldn't look like that :]
A width more then 990px is bad anyway... a lot of good webdevs will tell you the same. A background picture with those dimensions is bad, too. Too much to download, slows down the page speed.
By the way I have similar probs on my image galleries when i use Google Chrome -- take a look at this page & image alignment (Using CHROME browser ONLY**) - bmw-m6.net/pictures-m6/ -- and let me know if you've any suggestions!