Элементы управления не выравниваются должным образом - PullRequest
Новая
       1

Элементы управления не выравниваются должным образом

2 голосов
/ 21 марта 2010

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

Ответы [ 4 ]

6 голосов
/ 21 марта 2010

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

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

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

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

1 голос
/ 21 марта 2010

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

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

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

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

1 голос
/ 21 марта 2010

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

1 голос
/ 21 марта 2010

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

...