Шаблон сайта не соответствует друг другу

Question

Я разрабатываю сайт и работаю над простой панелью навигации."дом, галерея, о нас и т. д." *

В любом случае, когда я начинаю кодировать панель навигации, между ссылками "дом, галерея, о нас и т. д. ..." есть пробелы. "когда предполагается, что не должно быть пробелов и быть подключенным от начала до конца. Итак, мой вопрос: почему это происходит? предполагается, что это выглядит так:

  ----------------------------------
  |home|about us|gallery|contact us|
  ----------------------------------

Вместо этого я получаю:

   -----   ----------  -------- -----------
   |home   |about us|  gallery| contact us|
   -----   ----------  -------- -----------

Это лучшее, что я могу сделатьбез показа реальной страницы, так что, надеюсь, этих примеров достаточно.Я перепробовал все, все кнопки имеют размер 128 x 58 пикселей, и я попытался установить ширину и высоту стола, а также разными способами, я просто не знаю, почему я получаю эти пробелы. Что я мог сделать не так? Просто чтобы сделать вещи более понятными и понятными, здесь есть ссылка на мою панель навигации.http://krat0s.x10.mx/

вот код: http://pastebin.com/4Dsv0ish

Answer 1

Html

<ul id="menu">
    <li>home</li>
    <li>about us</li>
    <li>gallery</li>
    <li>contact us</li>    
</ul>

Css

#menu li { float:left; width:128px; height:58px; background:red; text-align:center; }
#menu li:hover { background:green; cursor:pointer; }

Пример: http://jsfiddle.net/DrUhA/

Answer 2

Использование вашей ссылки, которую вы разместили в комментарии выше (krat0s.x10.mx), связано с тем, что вы не устанавливаете cellpadding и cellspacing в 0

Для своей таблицы, содержащейна панели навигации измените тег открываемой таблицы на этот

<table width="55%" height="58" cellspacing="0" cellpadding="0">

Это быстрое решение, но я, вероятно, рекомендую вам не использовать таблицы для макета, если вы не собираетесь отображать табличные данные в том виде, как они есть.Плохая практика, и если большинство веб-дизайнеров ее осуждают, обратите внимание на использование делений <div> и списков:

<ul>
    </li></li>
<ul>

Подобно тому, что предложил Самич, может потребоваться больше времени, чтобы научиться кодировать таким образом.но это гораздо лучший метод.

Некоторые ссылки для вас

W3 школы - научит вас большинству различных тегов и их использованиюа также некоторые базовые учебные пособия.

Tizag - я использовал это больше для практики PHP, но у них есть несколько учебных пособий по HTML.

Извините, я не могу предоставить большессылки, как я узнал мой HTML и CSSкак в основном из случайных уроков, так и следов и ошибок, и это было много лет назад.Для макетов без таблиц вы захотите взглянуть на такие вещи, как свойства CSS: float clear и position.Быстрый поиск в Google вызывает кучу учебников, которые вы можете попробовать!

Удачи!:)

Answer 3

Попробуйте:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Если это не сработает, то, вероятно, это заполнение <td>:

Затем выполните:

td {
    padding: 0;
}

Если это не решит проблему, примените все из них:

table, td {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
}

Как указано Rawb92 , избегайте использования таблиц для разметки.В вашем случае список - это больше семантически правильной разметки в вашей навигации.

Answer 4

Я бы просто попытался добавить cellspacing="0" и cellapdding="0" в тег таблицы. Это должно в фокусе

 <table width="55%" height="58" cellspacing="0" cellpadding="0">

НТН