Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> В чем ошибка урока верстки? 
:(
    Опции темы
Wowann
Дата 2.10.2013, 17:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 31.7.2013

Репутация: нет
Всего: нет
Смотрю видеоурок по верстке и скрупулезно воспроизвожу каждый шаг. Но получается так, что на экране вижу одно, а на деле получается другое!

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

Это нерабочий код или же я что-то напутал?
(сличал с максимальной точностью).

Код такой:
Код

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Верхнее меню</title> 

<style> 
*{ 
    margin: 0; 
    padding: 0; 
} 


.menu { 
    min-width:400px; 
    max-width:1000px; 
    margin: 20px auto; 
} 

.menu ul { 
    background: #EAA742; 
    display:table-row; 
} 

.menu ul li { 
    display:table-cell; 
    width:auto; 
    height:50px; 
    text-align:center; 
    vertical-align:bottom; 
} 

.menu ul lu a { 
    color: #C00; 
    font-family:Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    font-size: 15px; 
    display:table-cell; 
    width:1000px; 
    vertical-align:middle; 
} 

.menu ul li a:hover{ 
    text-decoration:none; 
} 
     
     

</style> 


</head> 

<body> 

<div class="menu"> 
<ul> 
    <li><a href="#">Обучение</a></li> 
    <li><a href="#">Видео уроки</a></li> 
    <li><a href="#">Статьи</a></li> 
    <li><a href="#">Графика</a></li> 
    <li><a href="#">Форум</a></li> 
</ul> 
</div>  



</body> 
</html>  


Это сообщение отредактировал(а) Wowann - 2.10.2013, 17:19

Присоединённый файл ( Кол-во скачиваний: 4 )
Присоединённый файл  25.jpg 7,05 Kb
PM MAIL   Вверх
Wowann
Дата 2.10.2013, 17:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 31.7.2013

Репутация: нет
Всего: нет
В меню, созданное в видео уроке, выглядит как, как во вложении (я у себя только фон изменил, поскольку такого графического файла не было).

Присоединённый файл ( Кол-во скачиваний: 1 )
Присоединённый файл  menu.gif 5,44 Kb
PM MAIL   Вверх
CruorVult
Дата 2.10.2013, 17:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28
Не
Код

.menu ul lu a { 


а 

Код

.menu ul li a { 
PM MAIL Skype   Вверх
ksnk
Дата 2.10.2013, 18:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
в правило .menu нужно вставить 
Код

    display:table;
    width:100%;


А потом поразмышлять о верстке дивами и таблицами, и о разнице между ними  smile

Добавлено через 4 минуты и 43 секунды
CruorVult, Да, видимо, так и было задумано. Хотя width:1000px - это сильно похоже на хак. 



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0464 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.