I am trying to center all my content using one parent "div" I've named "div.container" within CSS. For some reason this is the only tag that is not working. I notice any type of style i try to apply to the "div.container" tag will not apply the desired change to the content, so i tried to create a border to see if that even appeared. It doesnt. Once I know that the style is effective I will then use it to center everything within the body. Here is the code.
<!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.container {
width: 9000px;
height: 1100px;
border-style: solid;
border-color: black;
border-width: thick;
}
div.welcome {
position: absolute;
width:400px;
top: 360px;
left: 10px;
margin-left: 70px;
}
div.slideshow {
position:absolute;
left: 525px;
top: 375px;
width: 400px;
height: 250px;
}
div.upcoming {
position: absolute;
top: 668px;
left: 10px;
margin-left: 70px;
}
div.tournament {
position: absolute;
left: 520px;
top: 660px;
text-align:right;
width: 400px;
background-color:#E8E8E8 ;
padding: 12px;"
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align:center;>
<div class="container">
<h1>
<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>
<img class="backdrop" src="backdrop.jpg" width="920" height="1125" alt="" border="0">
</div>
<div class="welcome">
<img src="welcome1.jpg" width="200" height="51" alt="" border="0">
<p> Thank you for visiting Team Nelson Boys and showing interest in our fishing tournaments. Please keep
checking back as we are always entering new fishing tournaments trying to stay on top! You can also check out what kind of
fish we have been getting into outside of the tournaments at <a href="http://cyberangler.com/fishing-reports/florida/destin/">
Cyber Angler</a> to check out our frequently updated fishing reports! If you are interested in booking a fishing trip with
Captain Blake shoot him an email at <a href="mailto:mail@captainblake.com">mail@captainblake.com</a> or check out his site at
<a href="http://www.captainblake.com">www.captainblake.com</a>. If you have any questions or just want to drop us a line
please email us at <a href="mailto:mail@teamnelsonboys.com">mail@teamnelsonboys.com</a>
<hr />
</div>
<div class="slideshow">
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0
src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyND
k5NDc5ODMyNjEmcHQ9MTI*OTk*ODA*OTk4MiZwPTE3MjcyMSZkPSZnPTImbz*wYzRmNTZiOTk1ZDE*MG
U4OGEwMjcxZThhMDEyZGJhYiZvZj*w.gif" />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="effect221970"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"
type="application/x-shockwave-flash" width="400" height="250" align="middle"
data="http://www.effectgenerator.com/1.0.7/EffectMovie.swf"><param name="allowScriptAccess" value="always" />
<param name="movie" value="http://www.effectgenerator.com/1.0.7/EffectMovie.swf" /><param name="quality" value="high" />
<param name="FlashVars" value="id=221970" /><param name="wmode" value="opaque" /><param name="bgcolor" value="#ffffff" />
<embed src="http://www.effectgenerator.com/1.0.7/EffectMovie.swf" quality="high" bgcolor="#ffffff" width="400" height="250"
align="middle" play="true" loop="false" quality="high" wmode="opaque" allowScriptAccess="always" FlashVars="id=221970"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object>
</div>
<div class="upcoming">
<img src="upcoming.jpg" width="383" height="41" alt="" border="0">
</div>
<div style="position: absolute; left: 520px; top: 660px; text-align:right; width: 400px; background-color:#E8E8E8 ;
padding: 12px;">
<p><b>Emerald Coast Redfish Club (Destin, FL)
<br />
April 25, 2009
<br />
2nd Place
<br /><br /><br />
IFA Redfish Tour (Bay St. Louis, MS)
<br />
May 2, 2009
<br />
8th place</b>
<br />
<br />
<br />
</p>
<p style="text-align: center;">
We have had tournaments for the past two weekends. We fished a local club tournament on the 25th of April, had a fun day
fishing our local honeyholes. We caught about 18 redfish and ended up finishing 2nd. We fished the 2nd tournament in Bay St.
Louis, which was the 2nd stop for the IFA Gulf Coast Division. We had a fun time prefishing for the tournament. Caught about
20 reds on Friday and got into some fun bull drums later in the day. Found a couple nice reds on the day of the tournament
and we pulled out 17.6 lbs, which gave us an 8th place finish.
</p>
</div>
</div>
</body>
</html>
Full Version: Style problems
QUOTE(pandy @ Aug 20 2009, 09:48 PM) 
Ok, so I centered the body tag and added some margins. When I added the margins, the content would not center. But I wanted to keep the margins for the body element so all the the child elements within it will adhere to those margins. When the margins are not set on the body the welcome.div will not stay within the margins when I expand the window. I want to keep the body centered and have all the child elements within it stay positioned inside it proportionally when the browser window is expanded. What do you think?
I added my new code..
<!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.container {
width: 9000px;
height: 1100px;
border-color: black;
border-width: thick;
}
div.welcome {
position: absolute;
width:400px;
top: 360px;
left: 60px;
margin: inherit;
}
div.slideshow {
position:absolute;
left: 525px;
top: 375px;
width: 400px;
height: 250px;
}
div.upcoming {
position: absolute;
top: 668px;
left: 10px;
margin-left: 70px;
}
div.tournament {
position: absolute;
left: 520px;
top: 660px;
text-align:right;
width: 400px;
background-color:#E8E8E8 ;
padding: 12px;"
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align:center; width: 916px; margin-left:20px; margin-right:20px;">
<h1>
<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>
<img class="backdrop" src="backdrop.jpg" width="920" height="1125" alt="" border="0">
</div>
<div class="welcome">
<img src="welcome1.jpg" width="200" height="51" alt="" border="0">
<p> Thank you for visiting Team Nelson Boys and showing interest in our fishing tournaments. Please keep
checking back as we are always entering new fishing tournaments trying to stay on top! You can also check out what kind of
fish we have been getting into outside of the tournaments at <a href="http://cyberangler.com/fishing-reports/florida/destin/">
Cyber Angler</a> to check out our frequently updated fishing reports! If you are interested in booking a fishing trip with
Captain Blake shoot him an email at <a href="mailto:mail@captainblake.com">mail@captainblake.com</a> or check out his site at
<a href="http://www.captainblake.com">www.captainblake.com</a>. If you have any questions or just want to drop us a line
please email us at <a href="mailto:mail@teamnelsonboys.com">mail@teamnelsonboys.com</a>
<hr />
</div>
<div class="slideshow">
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0
src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyND
k5NDc5ODMyNjEmcHQ9MTI*OTk*ODA*OTk4MiZwPTE3MjcyMSZkPSZnPTImbz*wYzRmNTZiOTk1ZDE*MG
U4OGEwMjcxZThhMDEyZGJhYiZvZj*w.gif" />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="effect221970"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"
type="application/x-shockwave-flash" width="400" height="250" align="middle"
data="http://www.effectgenerator.com/1.0.7/EffectMovie.swf"><param name="allowScriptAccess" value="always" />
<param name="movie" value="http://www.effectgenerator.com/1.0.7/EffectMovie.swf" /><param name="quality" value="high" />
<param name="FlashVars" value="id=221970" /><param name="wmode" value="opaque" /><param name="bgcolor" value="#ffffff" />
<embed src="http://www.effectgenerator.com/1.0.7/EffectMovie.swf" quality="high" bgcolor="#ffffff" width="400" height="250"
align="middle" play="true" loop="false" quality="high" wmode="opaque" allowScriptAccess="always" FlashVars="id=221970"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object>
</div>
<div class="upcoming">
<img src="upcoming.jpg" width="383" height="41" alt="" border="0">
</div>
<div style="position: absolute; left: 520px; top: 660px; text-align:right; width: 400px; background-color:#E8E8E8 ;
padding: 12px;">
<p><b>Emerald Coast Redfish Club (Destin, FL)
<br />
April 25, 2009
<br />
2nd Place
<br /><br /><br />
IFA Redfish Tour (Bay St. Louis, MS)
<br />
May 2, 2009
<br />
8th place</b>
<br />
<br />
<br />
</p>
<p style="text-align: center;">
We have had tournaments for the past two weekends. We fished a local club tournament on the 25th of April, had a fun day
fishing our local honeyholes. We caught about 18 redfish and ended up finishing 2nd. We fished the 2nd tournament in Bay St.
Louis, which was the 2nd stop for the IFA Gulf Coast Division. We had a fun time prefishing for the tournament. Caught about
20 reds on Friday and got into some fun bull drums later in the day. Found a couple nice reds on the day of the tournament
and we pulled out 17.6 lbs, which gave us an 8th place finish.
</p>
</div>
</body>
</html>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.