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="http://m.realmontecito.com" target="_blank" />
<area shape="rect" coords="85,494,241,521" href="http://m.realmontecito.com" 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="http://www.villagesite.com/properties/detail/mls_id/11-194" target="_blank" />
<area shape="rect" coords="375,825,664,1069" href="http://www.villagesite.com/properties/detail/mls_id/11-3273" target="_blank" />
<area shape="rect" coords="72,822,359,1075" href="http://www.villagesite.com/properties/detail/mls_id/11-2817" 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
  • 182 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drjohn
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.