Hi There, I've not used css in over a year and am trying to reteach myself how to do it, and am working on a personal project with it. I am trying to position text over an image so that it will stay in the same place despite what the monitor's resolution is set at. I am having troubles figuring out how to do this. I have an image of my current project: This is what my project looks like on my monitor currently (resized with photoshop to fit for purposes of posting). I am trying to position the text "Please Choose a Gateway" (it's an h2) in the center of the image so that it stays in the center of the image no matter the screen resolution. It looks fine on my screen but as soon as I change my resolution the text shifts down the screen and overlaps the doors on the image. I'm not sure how to fix this. I've tried switching to using relative positioning as suggested via various sites from googleing this issue, but when I do that it bumps the image down slightly further below the h1 so the image doesn't fit all on one page (even at a smaller resolution it currently fits on one page) and doesn't fix the issue as when I change resolutions again the text still moves down the page. I've posted my entire code below (as there is not much of it) and would appreciate any help with this. Thanks! <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sanctuary of Randomness</title> <link rel="stylesheet" type="text/css" href="random.css" /> </head> <body> <h1>Welcome to the Sanctuary of Randomness</h1> <div class="gateway" > <h2>Please choose a Gateway</h2> <center> <img src="../../Pictures/portals/portal_circle.gif" position="fixed" id="gate"/> </center> </div> </body> </html> ------------------------------------------------- @charset "utf-8"; /* CSS Document */ body { background-image:url('../../Pictures/backgrounds/stars/503.gif'); } h1 { color:#ffffff; text-align:center; font-family: Chiller, sans-serif; font-size:4em; } .gateway { postion:relative; width: 100%; } #gate { height:48%; width:48%; } h2 { color:#ffffff; text-align:center; font-family: Chiller, sans-serif; font-size:2.5em; position: absolute; top: 11em; left: 0; width: 100%; }
Positioning is only good for fixed measurements rather than relative measurements that will change with the size of the screen Horizontal positioning is easy, that would be: h2 { margin : 10px auto; } Code (markup): Vertical positioning is more difficult and is usually only possible with JavaScript. There are some non-JavaScript solutions here that might be of interest: http://blog.themeforest.net/tutorials/vertical-centering-with-css/