2010-03-21 5 views
2

Я использую следующий код для разработки моей домашней страницы. Выход (как показано ниже) не отображается должным образом. Вы можете видеть баннер, идущий в крайнем левом углу, а ссылки навигации имеют огромный промежуток между ними. Как это установить? Можно ли использовать только тег DIV вместо 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"> 
     <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

+0

лучше подходит для DocType? http://doctype.com/ –

ответ

6

Не видя кода очень долго - не использовать таблицы!

Я знаю, что это трудно для тех людей, которые долго развивались со столами в веб-дизайне, но верьте мне - после того, как вы научились конструировать его с помощью CSS & DIV-Tags, вы будете благодарить Бога за это!

Вот учебник для вас: http://www.colorplexstudios.com/articles/div_web_design_tutorial/

И если вы хотите получить ответ на свой код-вопрос: Это потому, что у вас есть 1 ячейку в первом ряду и 3 ячейки во втором ряду. Используйте атрибут colspan. Вы найдете здесь учебное пособие: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

1

Не используйте таблицы, используйте правильную комбинацию тегов div и атрибутов позиции. Они лучше, чем таблицы, и больше доступны для редактирования, если вам нужно внести какие-либо изменения.

1

Eek, удалите столы. Вместо этого используйте UL, с дисплеем: встроенный в него в CSS. Затем настройте его по своему вкусу (margin, padding). Поместите это внутри div и поместите его на свою страницу.

1

Как рекомендовано другими, таблицы не являются наиболее подходящим элементом для макета вашего сайта. Однако это простое исправление:

<td id="tdBanner" colspan="7"> 

Это сделает ваш баннер охватывающим всю ширину вашего стола. На боковой ноте идентификаторы на странице должны быть уникальными, поэтому, если вам нужно указать идентификатор ваших тегов td, они должны отличаться от тегов a.

Я бы рассмотрел некоторые из уроков CSS, к которым другие привязались.

Смежные вопросы