Hello, I am working on a website where I have made custom buttons that are images in div's. The images overlap each other and they look good on 1280X1024 or 1280X800 resolutions but anything other than that causes them to move. I have the rest of my page adjusting to different resolutions by putting the content in a div and making the width 100%. I am using CSS and HTML. Any advice is appreciated! Here is my CSS code: #box {border:0px solid; width:100%; height:400px;position:relative;} #home {float:left position:relative; top:131px; center:50%; z:index:10;} #how {float:left position:relative; top:131px; center:50%; z:index:10;} #why {float:left position:relative; top:131px; center:27.5%; z:index:10;} #price {float:left position:relative; top:256px; center:-21.75%; z:index:5;} #contact {float:left position:relative; top:256px; center:6.2%; z:index:5;} body { margin: 0; padding: 0; font-size: 13px; color: e0e0c2; background-color: #E0E0C2; background-repeat: no-repeat; background-position: center top; } body, th, td, input, textarea, select, option { text-transform: capitalize; font-family: Papyrus; } h1, h2, h3 { font-weight: normal; color: #F8FBEC; } h1 { letter-spacing: normal; font-size: 3em; } h2 { letter-spacing: -1px; font-size: 2em; } h3 { font-size: 1em; } p, ul, ol { line-height: normal; } blockquote { padding-left: 1em; } blockquote p, blockquote ul, blockquote ol { line-height: normal; font-style: italic; } a { } a:hover { text-decoration: none; color: #e0e0c2; } img{ border: 0; } #wrapper { } /* Header */ #header { width: 760px; height: 288px; margin: 0 auto; background: url(images/img02.jpg) no-repeat right top; } #header h1, #header p { margin: 0; color: #9CBC1E; } #header h1 { padding: 100px 0 0 70px; } #header p { padding-left: 73px; margin-top: -10px; } #header a { color: #E6B715; } /* Page */ #page { width: 760px; margin: 0 auto; } /* Content */ #content { float: right; width: 470px; margin: 0; } .post { padding: 0 0 20px 0; } .title { margin: 0; padding-bottom: 5px; border-bottom: 2px solid #B7D24D; } .byline { margin: 0; color: #646464; } .meta { text-align: left; color: #646464; padding: 10px 10px; height: 48px; background: url(images/img06.gif) no-repeat left top; } .meta .more { padding-left: 20px; } .meta .comments { padding-left: 20px; } .meta a { color: #003300; } /* Sidebar */ #sidebar { float: left; width: 230px; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { } #sidebar li ul { padding: 15px 15px; } #sidebar li li { border-bottom: 1px dotted #000000; padding-left: 15px; } #sidebar h2 { margin: 0; padding: 10px 0 0 40px; height: 40px; background: url(images/img04.gif) no-repeat left 60%; } #sidebar a { text-decoration: none; } #sidebar a:hover { } /* Footer */ #footer { clear: both; width: 760px; height: 40px; margin: 0 auto; padding: 20px 0 0 0; background: url(images/img05.gif) no-repeat left top; text-align: center; font-size: smaller; color: #52640A; } #footer a { color: #003300; } Here is my HTML from the page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License Name : Substance Description: A two-column, fixed-width design. Version : 1.0 Released : 20080208 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Personalized Discount Cards</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"> <!-- #Layer1 { position:absolute; width:100%; height:190px; z-index:1; top: 4px; left: 14px; margin-left: auto; } #Layer2 { position:absolute; width:785px; height:215px; z-index:2; left: 165px; top: 56px; background-color: #9BBB59; margin-left: auto; } .style28 { color: #76923C; font-size: 18px; font-weight: bold; } .style29 {color: #000000; font-size: 18px; } .style30 {color: #76923C; font-size: 18px; } .style31 { font-size: 10px; color: #000000; } .style32 { font-size: 30px; font-family: "Times New Roman", Times, serif; color: #000000; font-style: italic; font-weight: bold; } .style33 { font-size: 24px; font-family: "Times New Roman", Times, serif; color: #000000; font-style: italic; font-weight: bold; } --> </style> </head> <body> <div id="Layer8" style="position: absolute; left: 3px; top: 182px; width: 100%; height: 200px; z-index: 14; font-weight: bold"> <div id="box"> <img src="home-button.gif" alt="" name="home" width="180" height="140" id="home" /> <img id="how" alt="" src="how-it-works-button.gif" height="140" width="180" /> <img src="why-it-works-button.gif" alt="" name="why" width="180" height="140" id="why" /> <img src="contact-button.gif" alt="" name="contact" width="180" height="140" id="contact" /> <img id="price" alt="" src="pricing-button.gif" height="140" width="180" /> </div> </div> <div id="Layer3" style="position: absolute; left: 0px; top: 611px; width: 100%; height: 472px; z-index: 8"> <CENTER><p class="style30">A <em>Personalized Discount Card</em> features your group or organization logo and/or information on the entire front cover of your personalized card. <br /> The cards of the size of a credit card so it fits conveniently in any wallet. <br /> The cards feature businesses in the area which will offer discounts on products and services to the cardholders. </p> <p class="style30">The cards are full color and reusable so it offers continuous savings to each cardholder<br /> The <em>Personalized Discount Cards</em> are available in different quantities to meet the needs of your organization, 250, 500, 750, 1000, 1500, 2000 and more. These cards will benefit small organizations to very large organizations. </p> <p class="style30"> </p> <p class="style28">That is why we call it PERSONALIZED! </p> <p class="style29"> </p> <p> </p> </CENTER> <div id="footer"> <p>©2009 Theirdomainname.comAll Rights Reserved • Design by <a href="http://www.freecsstemplates.org/"> Huntsdoitall.com </a></p> </div></div> <div align="center"></div> <div class="style31" id="Layer6" style="position: absolute; left: 0px; top: 58px; width: 100%; height: 103px; z-index: 18; vertical-align: middle; font-weight: bold"> <h1 align="center" class="style32">PERSONALIZED </h1> <h1 align="center" class="style32">Discount Cards</h1> <h1 align="center" class="style33">Fundraising Opprutunity </h1> <h1 align="center" class="style33">We Design Your Card For You!! </h1> </div> <div id="Layer9" style="position: absolute; left: -12px; top: 0px; width: 100%; height: 284px; z-index: 1; vertical-align: middle; font-weight: bold"><img src="image002.gif" alt="" width="100%" height="278" /></div> </body> </html> Thanks again for your help!
Ew, center tags! Your problem is completely due to all the "positioning". You will need to redo all of those buttons with regular margins and floats. Positioning everything with "position: something" and coordinates is like riding a horse while trying to set where each footstep goes. It makes for a slow, bumpy ride.