Шаблон сайта не подходит правильно

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. х) его из-за того, что вы не заходящие cellpadding и cellspacing к 0

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

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

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

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

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

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

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

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

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

Удачи вам! :)

Answer 3

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

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

НТН

Answer 4

Попробуйте это:

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

Если он не работает, то, возможно, это обивка в <td> «S:

Затем сделать:

td { 
    padding: 0; 
} 

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

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

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