Controls not aligning properly
I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
First Website
</title>
</head>
<body>
<table id="main" align="center" width="600 px">
开发者_JAVA技巧 <tr id="trBanner">
<td id="tdBanner">
<img src="../../../My Pictures/banner copy.bmp.jpg"
</td>
</tr>
<tr id="trNavLinks">
<td id="lnkHome">
<a href="" id="lnkHome" name="lnkHome">Home</a>
</td>
<td id="lnkLife">
<a href="" id="lnkLife" name="lnkLife">Life</a>
</td>
<td id="lnkTeachings">
<a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a>
</td>
<td id="lnkExperiences">
<a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a>
</td>
<td id="lnkPhotoGallery">
<a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a>
</td>
<td id="lnkReach">
<a href="" id="lnkReach" name="lnkReach">How to Reach</a>
</td>
<td id="lnkContact">
<a href="" id="lnkContact" name="lnkContact">Contact Us</a>
</td>
</tr>
</table>
</body>
</html>
alt text http://www.freeimagehosting.net/uploads/b122c4ef21.jpg
Without seeing your code very long - don't use tables!
I know it's hard for those people who developed a long time with tables in webdesign, but belive me - after you learned how to design it with CSS & DIV-Tags, you will thank god for this!
Here is a tutorial for you: http://www.colorplexstudios.com/articles/div_web_design_tutorial/
And if you want to have an answer to your code-question: It's because you have 1 cell in the first row and 3 cells in the second row. Use the colspan-attribute. You find a tutorial for this here: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
Don't use tables, use a right combination of div tags and position attributes. They're way better than tables, and more editable if you need to make any changes.
Eek, remove the tables. Use a UL instead, with display: inline on it in the CSS. Then adjust it to your liking (margin, padding). Put that inside of a div, and position it in your page.
As others have recommended, tables are not the most appropriate element for your site's layout. However, the simple fix is:
<td id="tdBanner" colspan="7">
This will make your banner span the entire width of your table. On a side note, the ids on a page should be unique, so if you need to give an id to your td tags, they should be different than the a tags.
I would check out some of the CSS tutorials that others have linked to.
加载中,请稍侯......
精彩评论