Member Avatar for skygrrrl

Hi, I am trying to have my landing page center in the browser when it resizes, with css yet and I'm confused. Right now its all flush left and i want it to center in any browser if possible.

Maybe could someone please add the code in red so i can see it and it will make sense. but i don't know what i am talking about. :D

here's my code (flush left now).

<!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>Dave Hekhouse and Jesse Benenati Realtors Santa Barbara I Montecito I Summerland Real Estate</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:124px;
height:38px;
z-index:2;
left: 819px;
top: 685px;
}
#apDiv3 {
position:absolute;
width:1042px;
height:42px;
z-index:3;
left: 12px;
top: 1250px;
}
</style>
</head>

<body>
<img src="realmontecitojpgs/homerealmontecito.jpg" width="1044" height="1224" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="631,494,706,521" href="https://en.wordpress.com/signup/" target="_blank" />
<area shape="rect" coords="552,494,629,520" href="Mailto:davidhekhouse@gmail.com" target="_blank" />
<area shape="rect" coords="475,493,552,520" href="realmontecitopages/realmontecitoaboutus.html" target="_blank" />
<area shape="rect" coords="397,493,475,521" href="http://www.santabarbaraca.gov/" target="_blank" />
<area shape="rect" coords="239,496,316,521" href="" target="_blank" />
<area shape="rect" coords="85,494,241,521" href="" target="_blank" />
<area shape="rect" coords="711,746,915,769" href="mailto:jessebenenati@gmail.com" target="_blank" />
<area shape="rect" coords="713,717,920,739" href="mailto:davidhekhouse@gmail.com" target="_blank" />
<div id="apDiv2">
<h3>(805) 455-2113</h3>
</div>
<area shape="rect" coords="680,824,970,1071" href="" target="_blank" />
<area shape="rect" coords="375,825,664,1069" href="" target="_blank" />
<area shape="rect" coords="72,822,359,1075" href="" target="_blank" />
<area shape="rect" coords="76,1156,969,1188" href="http://www.laurendiscipio.com" target="_blank" alt="lauren discipio" />
</map>
<p>&nbsp;</p>
</body>
</html>
Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
  • 3 Contributors
  • 2 Replies
  • 200 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Short version: keep the page inside a centered wrapper and make that wrapper the positioning context so your image, map and any absolutely-positioned overlays stay aligned while the whole block sits in the middle of the browser.

A minimal example tailored to your 1044px image (put this around the image, map and the overlay divs):

<!-- inside <body> -->
<div id="pageWrap">
  <img src="realmontecitojpgs/homerealmontecito.jpg" width="1044" height="1224" usemap="#Map" alt="landing">
  <map name="Map" id="Map">
    <!-- area definitions go here (leave as you have them) -->
  </map>

  <div id="contactBadge">
    <h3>(805) 455-2113</h3>
  </div>
</div>
body { margin:0; padding:0; }

#pageWrap {
  width:1044px;          /* match the image width */
  margin:0 auto;         /* centers the whole block horizontally */
  position:relative;     /* makes absolute children position relative to this box */
}

#pageWrap img { display:block; border:0; }

#contactBadge {
  position:absolute;
  left:819px;            /* keeps your pixel-precise placement */
  top:685px;
  z-index:2;
}

Why this works: centering is done with margin: 0 auto on a fixed-width block. Making that block position: relative turns it into the reference for any position: absolute children, so the overlays and your existing pixel map coordinates will continue to line up.

Notes and troubleshooting: use display:block on the image to avoid inline gaps; ensure the wrapper width equals the image width; reset body margins (note CSS uses colons, not equals). If you want the page to scale for mobile, image-map coordinates won’t resize automatically — consider converting the map to SVG or to percentage-based overlays or use a small responsive-image-map script. Thanks to and for the pointers above; this keeps your current layout intact while centering it for all browsers.

Recommended Answers

All 2 Replies

Member Avatar for simplypixie

In your css:

body {
margin = 0;
padding = 0;
text-align: center;
}
Member Avatar for drjohn

First, STOP using position:absolute as that sets the position to be in a fixed place on the screen. So centering just will not work!

And as for using an area map - well I have serious doubts about anything like that to create links. It is an extremely old-fashioned way to work. Almost everyone uses an unordered list to make their menu.


Anyway.
Add a wrapper div around all your code between the opening and closing body tags, like this
<body>
<div id="wrapper">

all the other stuff you have on the page

</div>
</body>

Then in your css, set a suitable width for the div, and set margin:auto;

Using text-align:center with center the text, which is a bad idea except for a one line header, but I am guessing that you want your content to be centered, such as in the sites in my signature below. Have a look at them and resize your browser window.

I don't think it will work with position:absolute however, so you'll have to recode your stuff the way the rest of the web design world works.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.