In my document, I have a styled div under the class "links". It basically contains a small picture that says links and some text underneath it. Everything else in the document is centered within the body, but for some reason this one element will not center and I dont know what to do. Here is what my html looks like. Any help will really be appreciated, thanks!
Oh i should also mention the margins are set at auto, I've tried inherit... it doesn't make any difference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Nelson Boys</title>
<style type="text/css">
<!--
div.backdrop {
position: absolute;
margin-left:inherit;
margin-right:inherit;
width:916px;
z-index: -1;
border:1px solid black;
}
div.links {
font-family: "century gothic";
position: absolute;
top: 361px;
width: 50%;
margin-left: auto;
margin-right:auto;
left: 4px;
}
table.linkstable {
position: absolute;
margin-left: inherit;
margin-right:inherit;
margin-top: 200px;
text-align: center;
width: 916px;
left: 3px;
top: 326px;
}
div.whitespace {
position:absolute;
left:3px;
top: 1625px;
margin-left: inherit;
border-top: 1px;
}
div.lastcast {
position: absolute;
left: 675px;
top: 1650px;
}
div.cyber {
position: absolute;
left: 325px;
top: 1700px;
}
div.footer {
position:absolute;
left: 3px;
top:1835px;
}
div.nicks {
position:absolute;
left: 25px;
top: 1650px;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="position: relative; text-align:center; width: 916px; margin-left:auto; margin-right:auto;">
<h1 style="margin-left:auto; margin-right:auto; width:916px;">
<img src="header.jpg" class="resize" width="916" height="302" alt="" USEMAP="#header" border="0" />
<map name="header">
<area name="home" shape="rect" coords="371,208,449,235" href="index.htm" alt="" title="">
<area name="bios" shape="rect" coords="459,210,516,236" href="bios.htm" alt="" title="">
<area name="links" shape="rect" coords="524,210,595,235" href="links.htm" alt="" title="">
<area name="photo gallery" shape="rect" coords="602,209,767,237" href="photo.htm" alt="" title="">
<area name="contact" shape="rect" coords="775,206,903,240" href="contact.htm" alt="" title="">
<area name="tournaments" shape="rect" coords="371,251,523,281" href="tournaments.htm" alt="" title="">
<area name="sponsors" shape="rect" coords="535,250,653,279" href="sponsors.htm" alt="" title="">
<area name="captblake" shape="rect" coords="669,247,906,280" href="www.captainblake.com" alt="" title="">
</map>
</h1>
<div class="backdrop">
<img src="backdrop.jpg" width="914" height="1595" alt="" border="0">
</div>
<div class="links">
<img src="links.jpg" width="128" height="65" alt="" border="0" /></a><br />
<br />
<p>
This page is dedicated to advertise some organizations and businesses we support. Please take the time to check out some
of these websites. You'll be glad you did!
</p>
</div>
<table rows="4" cols="2" class="linkstable">
<tr>
<td colspan="2"><a href="http://www.captainblake.com"><img src="lastcast1.jpg" width="256" height="147" alt="Click here to for
the best rates!" border="0"></a>
<br />
<a href="http://www.captainblake.com"> www.captainblake.com</a></td>
</tr>
<td width="454" style="padding:40px">
<a href="http://www.mofishin.biz/"><img src="mofishin.jpg" width="177" height="176" alt="" border="0"></a>
<br />
<a href="http://www.mofishin.biz/">www.mofishin.biz</a>
</td>
<td width="373" style="padding:40px">
<a href="http://www.theredfishclub.com/"><img src="redfishclub.jpg" width="255" height="110" alt="Red Fish Club" border="0"></a>
<br />
<a href="http://www.theredfishclub.com/">www.theredfishclub.com</a>
</td>
</tr>
<tr>
<td style="padding: 40px">
<a href="http://www.redfishtour.com/"><img src="redfishtour.jpg" width="85" height="66" alt="IFA Redfish Tour" border="0">
</a>
<br />
<a href="http://www.redfishtour.com/">www.redfishtour.com</a>
</td>
<td style="padding: 40px">
<a href="http://www.nicksseafoodrestaurant.com/"><img src="nicks.jpg" width="229" height="120" alt="" border="0"></a>
<br />
<a href="http://www.nicksseafoodrestaurant.com/">www.nicksseafoodrestaurant.com</a>
</td>
</tr>
<tr>
<td style="padding: 40px;">
<a href="http://www.destincruise.net/"><img src="destin cruise.jpg" width="300" height="200" alt="Cruise Destin in style
with you privately chartered boat with an experienced captain" border="0"></a>
<br />
<a href="http://www.destincruise.net/">www.destincruise.net</a>
</td>
<td style="padding: 40px;">
<a href="http://www.abcmarine.biz/"><img src="abc marine.jpg" width="295" height="108" alt="Boat Service Specialists" border="0"></a>
<br />
<a href="http://www.abcmarine.biz/">www.abcmarine.biz</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Full Version: uncooperative style
You have positioned it absolute, so that's what you get. Centering with auto margins won't move a positioned box.
div.links {
font-family: "century gothic";
position: absolute;
top: 361px;
width: 50%;
margin-left: auto;
margin-right:auto;
left: 4px;
}
CODE
div.links {
font-family: "century gothic";
position: absolute;
top: 361px;
width: 50%;
margin-left: auto;
margin-right:auto;
left: 4px;
}
oh ok that makes sense. I was trying to make the shadow effect that you get by positioning the outside parent element (in my html is the body element) relative and everything within absolute. Does this make sense?
No. How do you mean that would create a shadow effect? Aren't you think of when you have two boxes of the same size and position one behind the other and a little to the side of it?
I always thought that if you made the parent element relative, that all absolute child elements would flow inside it like a "shadow". Even when you adjusted the browser, etc. I know I read it somewhere, but it could be totally wrong.
We must mean different things with shadow.
Yes, the absolute childs will be positioned relative the edges of the relative parent box. It's usually not a good thing to position everything inside body that way.
But what is this shadow effect you are after?
Yes, the absolute childs will be positioned relative the edges of the relative parent box. It's usually not a good thing to position everything inside body that way.
But what is this shadow effect you are after?
I am trying to keep everything in proportion while windows expand and collapse.
ok i took out the positioning on this and just went with the margins, however "bottom-margin" or "top-margin" will not cooperate. Don't know what to do!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Nelson Boys</title>
<style type="text/css">
<!--
div.backdrop {
position: absolute;
margin-left:inherit;
margin-right:inherit;
width:916px;
z-index: -1;
border:1px solid black;
}
div.links {
font-family: "century gothic";
width: 75%;
margin-left: inherit;
margin-right: inherit;
margin-bottom: 200px;
}
table.linkstable {
position: absolute;
margin-left: inherit;
margin-right:inherit;
margin-top: 200px;
text-align: center;
width: 916px;
left: 3px;
top: 326px;
}
div.whitespace {
position:absolute;
left:3px;
top: 1625px;
margin-left: inherit;
border-top: 1px;
}
div.lastcast {
position: absolute;
left: 675px;
top: 1650px;
}
div.cyber {
position: absolute;
left: 325px;
top: 1700px;
}
div.footer {
position:absolute;
left: 3px;
top:1835px;
}
div.nicks {
position:absolute;
left: 25px;
top: 1650px;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="position: relative; text-align:center; width: 916px; margin-left:auto; margin-right:auto;">
<h1 style="margin-left:auto; margin-right:auto; width:916px;">
<img src="header.jpg" class="resize" width="916" height="302" alt="" USEMAP="#header" border="0" />
<map name="header">
<area name="home" shape="rect" coords="371,208,449,235" href="index.htm" alt="" title="">
<area name="bios" shape="rect" coords="459,210,516,236" href="bios.htm" alt="" title="">
<area name="links" shape="rect" coords="524,210,595,235" href="links.htm" alt="" title="">
<area name="photo gallery" shape="rect" coords="602,209,767,237" href="photo.htm" alt="" title="">
<area name="contact" shape="rect" coords="775,206,903,240" href="contact.htm" alt="" title="">
<area name="tournaments" shape="rect" coords="371,251,523,281" href="tournaments.htm" alt="" title="">
<area name="sponsors" shape="rect" coords="535,250,653,279" href="sponsors.htm" alt="" title="">
<area name="captblake" shape="rect" coords="669,247,906,280" href="www.captainblake.com" alt="" title="">
</map>
</h1>
<div class="backdrop">
<img src="backdrop.jpg" width="914" height="1595" alt="" border="0">
</div>
<div class="links"><img src="links.jpg" width="128" height="65" alt="" border="0" /></a><br />
<br />
<p>
This page is dedicated to advertise some organizations and businesses we support. Please take the time to check out some
of these websites. You'll be glad you did!
</p>
</div>
<table rows="4" cols="2" class="linkstable">
<tr>
<td colspan="2"><a href="http://www.captainblake.com"><img src="lastcast1.jpg" width="256" height="147" alt="Click here to for
the best rates!" border="0"></a>
<br />
<a href="http://www.captainblake.com"> www.captainblake.com</a></td>
</tr>
<td width="454" style="padding:40px">
<a href="http://www.mofishin.biz/"><img src="mofishin.jpg" width="177" height="176" alt="" border="0"></a>
<br />
<a href="http://www.mofishin.biz/">www.mofishin.biz</a>
</td>
<td width="373" style="padding:40px">
<a href="http://www.theredfishclub.com/"><img src="redfishclub.jpg" width="255" height="110" alt="Red Fish Club" border="0"></a>
<br />
<a href="http://www.theredfishclub.com/">www.theredfishclub.com</a>
</td>
</tr>
<tr>
<td style="padding: 40px">
<a href="http://www.redfishtour.com/"><img src="redfishtour.jpg" width="85" height="66" alt="IFA Redfish Tour" border="0">
</a>
<br />
<a href="http://www.redfishtour.com/">www.redfishtour.com</a>
</td>
<td style="padding: 40px">
<a href="http://www.nicksseafoodrestaurant.com/"><img src="nicks.jpg" width="229" height="120" alt="" border="0"></a>
<br />
<a href="http://www.nicksseafoodrestaurant.com/">www.nicksseafoodrestaurant.com</a>
</td>
</tr>
<tr>
<td style="padding: 40px;">
<a href="http://www.destincruise.net/"><img src="destin cruise.jpg" width="300" height="200" alt="Cruise Destin in style
with you privately chartered boat with an experienced captain" border="0"></a>
<br />
<a href="http://www.destincruise.net/">www.destincruise.net</a>
</td>
<td style="padding: 40px;">
<a href="http://www.abcmarine.biz/"><img src="abc marine.jpg" width="295" height="108" alt="Boat Service Specialists" border="0"></a>
<br />
<a href="http://www.abcmarine.biz/">www.abcmarine.biz</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Nelson Boys</title>
<style type="text/css">
<!--
div.backdrop {
position: absolute;
margin-left:inherit;
margin-right:inherit;
width:916px;
z-index: -1;
border:1px solid black;
}
div.links {
font-family: "century gothic";
width: 75%;
margin-left: inherit;
margin-right: inherit;
margin-bottom: 200px;
}
table.linkstable {
position: absolute;
margin-left: inherit;
margin-right:inherit;
margin-top: 200px;
text-align: center;
width: 916px;
left: 3px;
top: 326px;
}
div.whitespace {
position:absolute;
left:3px;
top: 1625px;
margin-left: inherit;
border-top: 1px;
}
div.lastcast {
position: absolute;
left: 675px;
top: 1650px;
}
div.cyber {
position: absolute;
left: 325px;
top: 1700px;
}
div.footer {
position:absolute;
left: 3px;
top:1835px;
}
div.nicks {
position:absolute;
left: 25px;
top: 1650px;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="position: relative; text-align:center; width: 916px; margin-left:auto; margin-right:auto;">
<h1 style="margin-left:auto; margin-right:auto; width:916px;">
<img src="header.jpg" class="resize" width="916" height="302" alt="" USEMAP="#header" border="0" />
<map name="header">
<area name="home" shape="rect" coords="371,208,449,235" href="index.htm" alt="" title="">
<area name="bios" shape="rect" coords="459,210,516,236" href="bios.htm" alt="" title="">
<area name="links" shape="rect" coords="524,210,595,235" href="links.htm" alt="" title="">
<area name="photo gallery" shape="rect" coords="602,209,767,237" href="photo.htm" alt="" title="">
<area name="contact" shape="rect" coords="775,206,903,240" href="contact.htm" alt="" title="">
<area name="tournaments" shape="rect" coords="371,251,523,281" href="tournaments.htm" alt="" title="">
<area name="sponsors" shape="rect" coords="535,250,653,279" href="sponsors.htm" alt="" title="">
<area name="captblake" shape="rect" coords="669,247,906,280" href="www.captainblake.com" alt="" title="">
</map>
</h1>
<div class="backdrop">
<img src="backdrop.jpg" width="914" height="1595" alt="" border="0">
</div>
<div class="links"><img src="links.jpg" width="128" height="65" alt="" border="0" /></a><br />
<br />
<p>
This page is dedicated to advertise some organizations and businesses we support. Please take the time to check out some
of these websites. You'll be glad you did!
</p>
</div>
<table rows="4" cols="2" class="linkstable">
<tr>
<td colspan="2"><a href="http://www.captainblake.com"><img src="lastcast1.jpg" width="256" height="147" alt="Click here to for
the best rates!" border="0"></a>
<br />
<a href="http://www.captainblake.com"> www.captainblake.com</a></td>
</tr>
<td width="454" style="padding:40px">
<a href="http://www.mofishin.biz/"><img src="mofishin.jpg" width="177" height="176" alt="" border="0"></a>
<br />
<a href="http://www.mofishin.biz/">www.mofishin.biz</a>
</td>
<td width="373" style="padding:40px">
<a href="http://www.theredfishclub.com/"><img src="redfishclub.jpg" width="255" height="110" alt="Red Fish Club" border="0"></a>
<br />
<a href="http://www.theredfishclub.com/">www.theredfishclub.com</a>
</td>
</tr>
<tr>
<td style="padding: 40px">
<a href="http://www.redfishtour.com/"><img src="redfishtour.jpg" width="85" height="66" alt="IFA Redfish Tour" border="0">
</a>
<br />
<a href="http://www.redfishtour.com/">www.redfishtour.com</a>
</td>
<td style="padding: 40px">
<a href="http://www.nicksseafoodrestaurant.com/"><img src="nicks.jpg" width="229" height="120" alt="" border="0"></a>
<br />
<a href="http://www.nicksseafoodrestaurant.com/">www.nicksseafoodrestaurant.com</a>
</td>
</tr>
<tr>
<td style="padding: 40px;">
<a href="http://www.destincruise.net/"><img src="destin cruise.jpg" width="300" height="200" alt="Cruise Destin in style
with you privately chartered boat with an experienced captain" border="0"></a>
<br />
<a href="http://www.destincruise.net/">www.destincruise.net</a>
</td>
<td style="padding: 40px;">
<a href="http://www.abcmarine.biz/"><img src="abc marine.jpg" width="295" height="108" alt="Boat Service Specialists" border="0"></a>
<br />
<a href="http://www.abcmarine.biz/">www.abcmarine.biz</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Please post a URL. There are images in there and no one will create dummy images just to see how the page behaves. Well, maybe Frederiek. 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.