Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > В чем ошибка урока верстки?

Автор: Wowann 2.10.2013, 17:18

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

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

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

Код такой:

Код


<!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:30

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

Автор: CruorVult 2.10.2013, 17:59

Не

Код


.menu ul lu a {

Код


.menu ul li a {

Автор: ksnk 2.10.2013, 18:00

в правило .menu нужно вставить

Код


    display:table;
    width:100%;

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

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