alignment issues [Archive] - WebDeveloper.com

Phalon

07-26-2006, 12:50 AM

I finally decided to switch from tables to css pages, but I'm having issues with aligning things.

I want everything to center inside the first div object, but at the moment it's slightly leaning to the left

<body background="green.jpg">
<center>
<div class="table1">
<div class="table2">
<span class="title1">Countryside Golf Club</span><br><span class="title2"> Minneota, Minnesota</span>
<hr color="red" width="100%"><nobr>
<div class="welcome">
Welcome Guest</font></div><nobr>
<a href="index.php"><span class="menuitems">Home</span></a>   <a href="links.php"><span class="menuitems">Links</span></a>   <a href="announcements.php"><span class="menuitems">Announcements</span></a>   <a href="maps.php"><span class="menuitems">Map</span></a>   <a href="login.php"><span class="menuitems">Members Area</span></a>   <span class="menuitems" onClick="go()" style="cursor:hand;">Calendar</span>
</div>
<br><center><img src="panpic.gif" height="200" width="700">

<br><br>
<a name="tabletop"></a>
<table border='1' bordercolor="#191919" cellpadding='2' cellspacing='0' align="center">
<tr><td colspan='11'><img src="course.jpg" class="image1" usemap="#coursemap"><br>*Click on various areas of the map to view photos of the area</td><td colspan='11'><b>USGA RULES APPLY EXCEPT FOR<br>THE FOLLOWING MODIFICATIONS:<br>
1. Winter rules apply. Play it as it lies on the rough or<br>in the wrong fairway.<br>
2. Observe common courtesy to faster moving<br>groups. Foursomes shall have priority.<br>
3. Ball to right of white stake is out of bounds.<br>
4. No more fivesome at anytime.</b>
</td></tr>
<tr bgcolor="black" class="stats1"><td>Hole</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>Out</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>In</td><td>Tot</td></tr>
<tr bgcolor="blue" class="stats1"><td>Blue Yardage</td><td>500</td><td>404</td><td>150</td><td>426</td><td>410</td><td>228</td><td>488</td><td>340</td><td>314</td><td>3260</td><td>500</td><td>404</td><td>150</td><td>426</td><td>410</td><td>228</td><td>488</td><td>340</td><td>314</td><td>3260</td><td>6520</td></tr>
<tr bgcolor="white" class="stats2"><td>White Yardage</td><td>477</td><td>394</td><td>135</td><td>416</td><td>401</td><td>185</td><td>475</td><td>328</td><td>302</td><td>3113</td><td>477</td><td>394</td><td>135</td><td>416</td><td>401</td><td>185</td><td>475</td><td>328</td><td>302</td><td>3113</td><td>6226</td></tr>
<tr bgcolor="gray" class="stats2"><td>Handicap</td><td>7</td><td>4</td><td>8</td><td>3</td><td>1</td><td>2</td><td>6</td><td>5</td><td>9</td><td> </td><td>7</td><td>4</td><td>8</td><td>3</td><td>1</td><td>2</td><td>6</td><td>5</td><td>9</td><td> </td><td> </td></tr>
<tr bgcolor="black" class="stats1"><td>Par</td><td>5</td><td>4</td><td>3</td><td>4</td><td>4</td><td>3</td><td>5</td><td>4</td><td>4</td><td>36</td><td>5</td><td>4</td><td>3</td><td>4</td><td>4</td><td>3</td><td>5</td><td>4</td><td>4</td><td>36</td><td>72</td></tr>
<tr bgcolor="gray" class="stats2"><td>Handicap</td><td>5</td><td>1</td><td>7</td><td>3</td><td>2</td><td>4</td><td>6</td><td>8</td><td>9</td><td> </td><td>5</td><td>1</td><td>7</td><td>3</td><td>2</td><td>4</td><td>6</td><td>8</td><td>9</td><td> </td><td> </td></tr>
<tr bgcolor="red" class="stats1"><td>Red Yardage</td><td>425</td><td>370</td><td>130</td><td>347</td><td>338</td><td>174</td><td>429</td><td>240</td><td>225</td><td>2678</td><td>425</td><td>370</td><td>130</td><td>347</td><td>338</td><td>174</td><td>429</td><td>240</td><td>225</td><td>2678</td><td>5356</td></tr>
</table>
<map name="coursemap">
<area shape="rect" coords="70,200,100,230" href="#tabletop" onClick="Javascript:window.open('picslide1.htm', '', 'theatermode, height=600, width=700');" title="Hole 1">
<area shape="rect" coords="130,220,160,250" href="#tabletop" onClick="Javascript:window.open('picslide2.htm', '', 'theatermode, height=600, width=700');" title="Hole 2">
<area shape="rect" coords="140,130,170,160" href="#tabletop" onClick="Javascript:window.open('picslide3.htm', '', 'theatermode, height=600, width=700');" title="Hole 3">
<area shape="rect" coords="200,120,230,145" href="#tabletop" onClick="Javascript:window.open('picslide4.htm', '', 'theatermode, height=600, width=700');" title="Hole 4">
<area shape="rect" coords="152,330,180,360" href="#tabletop" onClick="Javascript:window.open('picslide5.htm', '', 'theatermode, height=600, width=700');" title="Hole 5">
<area shape="rect" coords="190,400,215,425" href="#tabletop" onClick="Javascript:window.open('picslide6.htm', '', 'theatermode, height=600, width=700');" title="Hole 6">
<area shape="rect" coords="230,240,260,270" href="#tabletop" onClick="Javascript:window.open('picslide7.htm', '', 'theatermode, height=600, width=700');" title="Hole 7">
<area shape="rect" coords="305,100,340,135" href="#tabletop" onClick="Javascript:window.open('picslide8.htm', '', 'theatermode, height=600, width=700');" title="Hole 8">
<area shape="rect" coords="190,60,220,85" href="#tabletop" onClick="Javascript:window.open('picslide9.htm', '', 'theatermode, height=600, width=700');" title="Hole 9">
<area shape="rect" coords="80,55,105,85" href="#tabletop" onClick="Javascript:window.open('picslide10.htm', '', 'theatermode, height=600, width=700');" title="Club House">
</map>
<br><br><center><table>
<tr><td colspan="2" class="tbltxt1">Golf Course Details</td></tr>
<ul><tr class="tbltxt2"><td><li>Watered Fairways.</td><td><li>Soft Spikes.</td></tr>
<tr class="tbltxt2"><td><li>Practice Green.</td><td><li>Driving Range.</td></tr>
<tr class="tbltxt2"><td><li>Reduced Rates for Group Events.</td><td><li>Golf Cart Rentals Available.</td></tr>
<tr class="tbltxt2"><td><li>Cart Storage.</td><td><li>Economical Green Fees & memberships.</td></tr>
<tr class="tbltxt2"><td><li>Women's Day- Tuesday.</td><td><li>Men's Day - Wednesday.</td></tr>
<tr class="tbltxt2"><td><li>Food and beverages served.</td><td><li>Close to Marshall.</td></tr>
</ul><table>
<br><br><center>
<table border="1" Frame="void" rules="rows" bordercolor="black" cellpadding="2" cellspacing="5">
<tr><td align="center" colspan="6" class="money">Fees</td></tr>
<tr><td colspan="2" class="tbltxt1">Green Fees</td><td colspan="2"></td><td colspan="2" class="tbltxt1">  Memberships</td></tr>
<tr><td colspan="2" class="tbltxt1">Daily</td><td colspan="2" class="tbltxt1">Golf Cart Rentals    </td><td class="tbltxt2">Family</td><td class="money">$425</td></tr>
<tr><td class="tbltxt2">  9 Holes</td><td class="money">$10     </td><td class="tbltxt2">  9 Holes</td><td class="money">$12     </td><td class="tbltxt2">Couple</td><td class="money">$395</td></tr>
<tr><td class="tbltxt2">18 Holes</td><td class="money">$14     </td><td class="tbltxt2">18 Holes</td><td class="money">$20     </td><td class="tbltxt2">Single</td><td class="money">$350</td></tr>
<tr><td colspan="2" class="tbltxt1">Weekends</td><td colspan="2" class="tbltxt1">Cart Lease/Yr  </td><td class="tbltxt2">College</td><td class="money">$175</td></tr>
<tr><td class="tbltxt2">  9 Holes</td><td class="money">$14  </td><td colspan="2" class="money">        $325  </td><td class="tbltxt2">Student</td><td class="money">$100</td></tr>
<tr><td class="tbltxt2">18 Holes</td><td colspan="5" class="money">$19</td></tr>

</table>
<br><br><br>
<center>|<a href="contacts.htm"><span class="link">Contact Us</span></a>|<br>
3508 160th Avenue<br>
Minneota, MN 56264 <br>
(507) 872-6335
<br><font color="blue"><b>PAK Studios<b></center>
</div>
</center>
</body>

css page

.title1{font-family: Latha,Arial; font-size: 30; font-weight: bold; color: white; width: 700px;}
.title2{font-family: Latha,Arial; font-size: 18; font-weight: bold; color: white; width: 700px;}
.title3{font-family: Latha,Arial; font-size: 30; font-weight: bold; text-align: center;}
.menuitems{font-family: Latha,Arial; font-size: 15; color: white; text-decoration: underline; text-align: center;}
.image1{height: 440; width: 400;}
.image2{height: 200; width: 350;}
.stats1{font-family: Latha,Arial; text-align: center; font-weight: bold; color: white;}
.stats2{font-family: Latha,Arial; text-align: center; font-weight: bold; color: black;}
.date{display: block; text-align: right; font-size: 18;}
.daten{display: block; text-align: right; font-size:20; font-weight: bold; color: #f6e951;}
.money{font-family: Latha,Arial; font-weight: bold; font-size: 18; color: green;}
.tbltxt1{font-family: Latha,Arial; font-weight: bold; font-size: 18;}
.tbltxt2{font-family: Latha,Arial; font-size: 17;}
.cell{height: 125; width: 125;}
.link{font-family: Latha,Arial; font-size: 15; color: green; text-decoration: underline;}
.adate{font-family: Latha,Arial; font-weight: bold; font-size: 16; color: blue;}
.bdate{font-family: Latha,Arial; font-size: 14; color: blue;}
.bodytxt{font-family: Latha,Arial; font-size: 13;}
.table1{background-color: #feffd7; padding: 0px 5px 3px 5px; width: 700px; border-width: 2px; border-style: outset; border-color: #feffd7;}
.table2{background-color: #254100; padding: 5px 0px 5px 0px; width: 800px; border-syle: outset; border-color: red; }
.welcome{color: red; font-size: 17; font-weight: bold; text-align: left;}

for a preview go to www.minneotagolf.com

Siddan

07-26-2006, 08:46 AM

Looks very wrong in Firefox too

Table2 is wider than Table1
Adjust the width for .table1 to 800px, same as table 2

or better yet

Set table1 to a fixed width of 700 or 800px of your liking and set table2 to 100%

WebJoel

07-26-2006, 08:57 AM

There are 61 errors in the page, most are minor and unnoteworthy (missing "alt=", etc.), but line 76 has an UL inside of a TABLE. This is invalid and won't display correctly.
And there really should be a !doctype.

And without a !doctype, these multitude of size errors aren't even listed:
state the units of measure when stating declarations. Things like " font-size: 18;" are meaningless. -Is this 18 inches? 18-feet? 18 cm? Pixels (px) would be my best gues (and that is how IE probably parses it), but other browsers are left to wonder.
Any "size" declared must be given a meaningful value, such as "px" or "pt" or "em", etc. :)

Phalon

07-26-2006, 07:36 PM

i've fixed some of the errors you pointed out and things are going the way i want, except when we come to the part where you mention to use !doctype

And there really should be a !doctype.

WebJoel

that caused some issues with image sizing, as in, the image was huge and I couldn't figure out how to size it down in my style sheet. so I skipped that.

now browsing the internet i found a usefull bit of coding

this code only shows the content inbetween the tags for internet explorer only.
which helps to seperate different programming tricks i need to do to make things look right in more than one browser, but I couldn't find what the abbreviation for firefox was.

Siddan

07-26-2006, 08:49 PM

Regarding the doctype, It must be correct and it should be there. What are your images like?.. if an image is at 50 x 50 px then it is 50 x 50 px and a doctype has nothing to do about it.

it should be like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
... or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
more can be read here: (http://alistapart.com/stories/doctype)

Otherwise if you skip this IE will read your site in quirks mode by default.
The biggest difference you probably notice is the padding. It will add padding as it increases the size of the box

More can be read for this box model (http://css.maxdesign.com.au/listamatic/about-boxmodel.htm)

-----

and about those conditional comments, you don´t really need one for Firefox, since this strictly follow the standards. As anyone else would say. "make it first for FF, then tweak it for IE" by using * html [css code] for instance