Hello, I’m new to all this and today I was trying to figure out tables. The code below makes the table but then it is misaligned to the far left of the screen when in my style code the logo and main text is p {margin:0 auto 14px;width:700px} but after the table everything is left aligned. Any help in the code so that I can have the table aligned within the p boundaries?
I put the main concerns in bold text.
Much thanks!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Health and Body Revolution - Bootcamp - A True Lifestyle Change
for a Better Life</title>
[B]<style type="text/css" media="all">
body {font-family: "Times New Roman", Arial, Calibri, "Arial Black", sans-serif;
background: #D4ECFB;}
#main {width:700px; margin:0 auto 12px;}
img {border: none; padding-left:10px}
li img {vertical-align: middle;}
a:link, a:visited {color: #83002C}
a:focus, a:hover, a:active {color: #83002C, text-decoration:none; font-weight:bold}
p {margin:0 auto 14px;width:700px}
p#logo {text-align: center;}
</style>[/B]
</head>
<div class="main">
<center><img src="logo_homepage.jpg" alt="The Health and Body Revolution" width="700" height="200"
/></center>
</div>
<center>
<div class="nav_bar1">
<i>
<a href="index.html">HOME</a>
<a href="personal-training.html">PERSONAL TRAINING</a>
<a href="profiles.html">PROFILES</a>
<a href="mission.html">MISSION</a>
</i></div></center>
<h1><center><b>Bootcamp Training</b></center></h1>
<p>
<i>The Health and Body Revolution Bootcamps</i> are designed to be fun, challenging, and specifically geared
towards fat loss and body re-shaping!
Whether you have never done anything before, haven't trained in years, wanting to lose that last 10 pounds or are
the type that lives in the gym, <i>The Health and Body Revolution</i> will help you reach your goals.
[B]<table border="1">
<tr>
<td><b>Uptown Location</b></td><td align="center">Monday</td><td align="center">Wednesday</td><td
align="center">Friday</td>
</tr>
<tr>
<td>Davisville & Yonge</td><td>11am-12pm</td><td>11am-12pm</td><td>11am-12pm</td>
</tr>
<tr>
<td>Davisville & Yonge</td><td align="center">1pm-2pm</td><td align="center">1pm-2pm</td><td
align="center">1pm-2pm</td>
</tr>
</table>
<br /><br />
<table border="1">
<tr>
<td><b>Downtown Location</b></td><td align="center">Tuesday</td><td align="center">Thursday</td>
</tr>
<tr>
<td>Queen & Bathurst</td><td>4:30pm-5:30pm</td><td>4:30pm-5:30pm</td>
</tr>
<tr>
<td>Queen & Bathurst</td><td align="center">4:30pm-5:30pm</td><td align="center">4:30pm-5:30pm</td>
</tr>
</table> [/B]
<br /><br />
<a href="BOOTCAMP-FLYER.jpg">
<img HEIGHT=250 WIDTH=250 src="BOOTCAMP-FLYER.jpg">
</a>
</p>
<center><div class="nav_bar">
<p>
<a href="index.html">HOME</a>
<a href="personal-training.html">PERSONAL TRAINING</a>
<a href="profiles.html">PROFILES</a>
<a href="mission.html">MISSION</a>
</p>
</div></center>
</body>
</html>
ralph.m, I’m not quite clear, I removed all the center tags and everything aligns left. Logo, nav bar, header, etc.
By saying put everything in the main div, am I removing something, expanding the main div at the end </div> I tried the latter and didn’t work. Thanks!
John Betong, thanks, I tried that but it didn’t come out.
I’m assuming that you want all elements on the page to have the same width as the #main div, so I just removed the </div> tag of <div id=“main”> and moved it to near the end of the document, giving this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>The Health and Body Revolution - Bootcamp - A True Lifestyle Change for a Better Life</title>
<style type="text/css" media="all">
/*<![CDATA[*/
a:link, a:visited {color: #83002C}
a:focus, a:hover, a:active {color: #83002C, text-decoration:none; font-weight:bold}
body {font-family: "Times New Roman",Arial,Calibri,"Arial Black",sans-serif; background:#D4ECFB}
#main {width:700px; height:200px; margin:0 auto 12px;}
img {border: none; padding-left:10px}
li img {vertical-align: middle;}
p {margin:0 auto 14px;width:700px}
p#logo {text-align: center;}
table,
.navbar {margin:0 auto;text-align:center}
#flyer {display:block; width:250px; height:250px; margin:0 auto}
.navbar {background:#cfc none;color:#f00; height:2em; line-height:2em}
.center {margin:0 auto; text-align:center}
p,
div,
img {outline:dotted 2px #f00}
/*]]>*/
</style>
</head>
<body>
<div id="main" > <!-- [COLOR="Red"]start main div[/COLOR] -->
<img src="logo_homepage.jpg" alt="The Health and Body Revolution" width="700" height="200" />
<div class="navbar">
<i><a href="index.html">HOME</a> <a href="personal-training.html">PERSONAL TRAINING</a> <a href="profiles.html">PROFILES</a> <a href="mission.html">MISSION</a></i>
</div>
<h1><b>Bootcamp Training</b></h1>
<p>
<i>The Health and Body Revolution Bootcamps</i> are designed to be fun,
challenging, and specifically geared towards fat loss and body re-shaping!
Whether you have never done anything before, haven't trained in years, wanting
to lose that last 10 pounds or are the type that lives in the gym, <i>The
Health and Body Revolution</i> will help you reach your goals.
</p>
<div>
<br /><br />
<table border="1" summary='#'>
<tr>
<td><b>Uptown Location</b></td>
<td align="center">Monday</td>
<td align="center">Wednesday</td>
<td align="center">Friday</td>
</tr>
<tr>
<td>Davisville & Yonge</td>
<td>11am-12pm</td>
<td>11am-12pm</td>
<td>11am-12pm</td>
</tr>
<tr>
<td>Davisville & Yonge</td>
<td align="center">1pm-2pm</td>
<td align="center">1pm-2pm</td>
<td align="center">1pm-2pm</td>
</tr>
</table>
<br /><br />
<table border="1" summary='#'>
<tr>
<td><b>Downtown Location</b></td>
<td align="center">Tuesday</td>
<td align="center">Thursday</td>
</tr>
<tr>
<td>Queen & Bathurst</td>
<td>4:30pm-5:30pm</td>
<td>4:30pm-5:30pm</td>
</tr>
<tr>
<td>Queen & Bathurst</td>
<td align="center">4:30pm-5:30pm</td>
<td align="center">4:30pm-5:30pm</td>
</tr>
</table>
<br /><br />
<a href="BOOTCAMP-FLYER.jpg" id='flyer'>
<img src="BOOTCAMP-FLYER.jpg" alt='alt: BOOTCAMP-FLYER.jpg' />
</a>
</div>
<div class="navbar">
<a href="index.html">HOME</a>
<a href="personal-training.html">PERSONAL TRAINING</a>
<a href="profiles.html">PROFILES</a>
<a href="mission.html">MISSION</a>
</div>
</div> <!-- [COLOR="Red"]end main div[/COLOR] -->
</body>
</html>
I should stress that I’m not endorsing the code here (with all the <center> elements etc.), but just showing how to enclose everything inside the main div.
That’s actually pretty wicked. The only thing is that it is a little daunting to me as I’m not entirely sure yet what all that is/does.
I was curious about the red border?
I really appreciate this! Much thanks!!
The red border is an outline used for debugging. It can be easily switched off by toggling the 2px to 0px and deleting if and when you have eventually finished your design
An outline is different from a border. The latter adds pixels to the outside whereas an outline keeps retains the specified dimensions. It is very useful when positioning blocks.
is placing padding on the left of your images, which is causing the misalignment.
The forums have a new SEO plugin, which grabs the title from the page being linked to and replaces the raw URL with that. (Guess it makes the links a little more meaningful.)
