Middle align issue with 800x600

[son]

I have a container div to center images on page. Now testing the page with different browser/resolution I noticed that for 800x600 the image is not shown complete, but it starts lower down. This is due to minus margins that I applied. The complete CSS for container is:#container {height:600px;width:800px;margin-top:-300px;margin-left:-400px;}How do you deal with those issues? Can you have a better version of CSS to achieve the affect without having the problem with low resolution or is there a way to check for resolution and serve appropriate css for #container via JavaScript?Son

[S@m]

Try this out:CSS:

body {margin:0 auto; padding:0; text-align:center}#container {margin:0 auto; text-align:left;}

That should center everything for you. If you give your container a width and/or a background color, you will see its boundries.- hope that helps!

[son]

Try this out:CSS:

body {margin:0 auto; padding:0; text-align:center}#container {margin:0 auto; text-align:left;}

That should center everything for you. If you give your container a width and/or a background color, you will see its boundries.- hope that helps!

Thanks for your reply. I just noticed I left out important info. Not only should the images be centered, but also be middle aligned. Is there a way to achieve that without them hidding away at the top?Son

[jlhaslip]

Can you post your page code, please.Do you want the Image smack dab in the middle of the viewport?http://www.jlhaslip.trap17.com/samples/mis...entereddiv.html

[rzea]

The complete CSS for container is: #container {height:600px;width:800px;margin-top:-300px;margin-left:-400px;}

Do this:

#container {  width:800px;  height:600px;  position:absolute;  top:50%;  left:50%;  margin-left:-400px;  margin-top:-300px;}

However, you should WATCH OUTfor the width:800px; height:600px; because a screen at 800x600 DOES NOT show exactly 800x600 but instead something like 767x450 aprox.I suggest you make the width and height of the #container div the SAME as the image inside of it; the CSS will take care of the resolution issues showing your image(s) in the center and middle of the browser window.

[son]

Thanks to both of you (and sorry for late reply - just recovered from a horrible flu attack). Both solutions would still cause the same problem (as they are very similar in how I did it). I cannot influence the image size as they are my friends and he wants them at least 500px high (and in a way have to agree as they look already quite smallish with larger resolutions). We do not mind having user of 800x600 scroll, but it is not great to have the top hidden (which happens with those solutions to center and middle align the container). Is there no other way to center and middle align, which would not hide things away when container is say 800x600?Thanks,Son

[rzea]

Then I don't understand what you're saying, I'd need to see the problem to help you better.Do you have a link?EDIT--I am working on a website and this temporary page with the image of the logo is centered horizontally and vertically, and it shows perfectly at 800x600 res., not sure if you're trying to do something like this, that's why I say I don't understand what you're saying. Check it out though: http://www.pearlmax.net/

[son]

Then I don't understand what you're saying, I'd need to see the problem to help you better.Do you have a link?EDIT--I am working on a website and this temporary page with the image of the logo is centered horizontally and vertically, and it shows perfectly at 800x600 res., not sure if you're trying to do something like this, that's why I say I don't understand what you're saying. Check it out though: http://www.pearlmax.net/

Sorry, that I was not more clear. Unfortunately, I cannot show you the code yet as site is not live. But the website you showed me does it perfectly, but only because the container is smaller than the resolution as such. On the website I am working with for 800x600 the user would need to scroll down to see all the content as images would need more space (which I am fine with). Just for larger resolutions it should be centered and middle-aligned. Currently my code centers and middle aligns. Only that it hides the top section for 800x600. You can try this by having the centered and aligned div lets say 900x750 with one word top aligned. YOu won't see it. Hope this makes more sense... Son

[jlhaslip]

Use javascript to read the viewport size and re-size the image accordingly??? Sorry, I don't do javascript, but someone might be along to point you to a solution.

[son]

Use javascript to read the viewport size and re-size the image accordingly??? Sorry, I don't do javascript, but someone might be along to point you to a solution.

Thanks for input. Unfortunately is my JavaScript knowledge not the best. Would be great to have a solution like this. Still, I have been reminded that I (again) have not shown any of my code.The HTML code is:<!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 profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>London Photos</title><link href="Assets/Styles.css" type="text/css" rel="stylesheet" media="all" /><link href="Assets/Photos.css" type="text/css" rel="stylesheet" media="all" /><script type="text/javascript" src="js/main.js"></script><script type="text/javascript" src="js/slideshow.js"></script><script type="text/javascript">document.write('<'+'style type="text/css">ul.slides li {display:none;}'+'<'+'/style>');</script></head><body><div id="container"><ul class="slides"> <li><img src="London/London Photos_1.JPG" alt="London/London Photos_1.JPG" ></li><li><img src="London/London Photos_10.JPG" alt="London/London Photos_10.JPG" ></li><li><img src="London/London Photos_11.jpg" alt="London/London Photos_11.jpg" ></li><li><img src="London/London Photos_12.jpg" alt="London/London Photos_12.jpg" ></li><li><img src="London/London Photos_13.jpg" alt="London/London Photos_13.jpg" ></li><li><img src="London/London Photos_14.JPG" alt="London/London Photos_14.JPG" ></li><li><img src="London/London Photos_15.jpg" alt="London/London Photos_15.jpg" ></li></ul><div id="back"><a href="Overview.php" title="Back to overview page"><img src="Assets/General/Back.gif" alt="Back" width="74" height="32" /></a></div></div></body></html>The relevant css is:#container {position:absolute;top:50%;left:50%;} (in Styles.css)#container {height:600px;width:800px;margin-top:-300px;margin-left:-400px;} (in Photos.css)Maybe this gives a clue where I am going wrong. Like I said I do not mind if user of 800x600 have to scroll down to see the photo (although it would be great if you could resize with JavaScript accordingly), it is only a problem that the top bit of image is hidden. It all looks fine in better resolutions...Son

[thescientist]

would percentages help?

[rzea]

Well, I copied and pasted the code in a new page, tried it and everything looks Ok to me.I'm sorry but you're going to have figure out a way to show us a screen shot of the problem to really understand you.

[son]

Well, I copied and pasted the code in a new page, tried it and everything looks Ok to me.I'm sorry but you're going to have figure out a way to show us a screen shot of the problem to really understand you.

I have a screen shot, just no place to upload it too:-( Will try if I can sort sth out...Son

[rzea]

Here (c'mon, you could've done this one at least):imageshack.usfreeimagehsoting.netwww.upload-images.netAnd of course, the results from using Google for "upload images for free": upload images for free

[thescientist]

Here (c'mon, you could've done this one at least):imageshack.usfreeimagehsoting.netwww.upload-images.netAnd of course, the results from using Google for "upload images for free": upload images for free

[son]

Always wanted to sign up with Facebook.com anyway. Search for 'Son Ikbuma'. For now I uploaded the photo in there...Son

[rzea]

Are you serious?

[son]

¬¬

???Son

[Synook]

¬¬

Little-used emoticon roughly equivalent to T.T?

[Kingy]

I believe it's more like a 'what the ######' emoticon as opposed to tears streaming down face.

[rzea]

TOTALLY Offtopic:No, it means "Are you serious?".So... Are you serious? (Post above has been edited too)--Reply to the post below this one:Uh, NO. The 'dry' smiley does not fit the "What the ####!" expression.

[Kingy]

Same difference, both inquisitive to the seriousness of something.

[son]

Same difference, both inquisitive to the seriousness of something.

Why, what is wrong with my picture? It shows the problem, doesn't it?Son

[Kingy]

Sorry son that was just off topic discussion about emoticons, didn't say there was anything wrong with your work!

[son]

Sorry son that was just off topic discussion about emoticons, didn't say there was anything wrong with your work!

Sorry, Kingy, had a reply to your post instead of a general reply to topic... Appreciate your input:-)Son