|
 7 Кб |
|
| Смотрю видеоурок по верстке и скрупулезно воспроизвожу каждый шаг. Но получается так, что на экране вижу одно, а на деле получается другое!
Ниже код, который создал преподаватель. Это просто замечательное горизонтальное резиновое меню, растянутое во весь экран, прекрасно обрабатываемое всеми браузерами и не деформируемое при сжатии (так на видео). А в реале то, что на скриншоте во вложении.
Это нерабочий код или же я что-то напутал?
(сличал с максимальной точностью).
Код:
<!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>
|
| |
|
|
|
|
 5.4 Кб |
|
|
для: Владимир55
(02.10.2013 в 18:14)
| | В меню, созданное в видео уроке, выглядит как, как во вложении (я у себя только фон изменил, поскольку такого графического файла не было). | |
|
|
|
|
|
|
|
для: Владимир55
(02.10.2013 в 18:32)
| | Говорят, "продвинутые" йоги умеют чистить зубы через нос. Но зачем??
В данном случае стили составлены не совсем, э-э, корректно.
Ну, а я бы здесь обошелся старой доброй таблицей, не смотря на мнение, что использование списка повышает семантику кода, что положительно сказывается на SEO, blah-blah-blah...
Если, уж, на то пошло, таблицу меню можно обрамить тегом <nav>, как вариант.
А если без списка - никак, то вот: http://jsbin.com/UhEkOhi/1/edit?css,output - простейший вариант. | |
|
|
|
|
|
|
|
для: Владимир55
(02.10.2013 в 18:32)
| | Нашел я свою ошибку - вот она:
| |
|
|
|
|
|
|
|
для: Владимир55
(02.10.2013 в 18:14)
| |
<style>
* {
margin: 0;
padding: 0;
}
.menu {
width: 1000px;
margin: 20px auto;
display: table;
}
.menu ul {
background-color: #EAA742;
display: table-row;
}
.menu ul li {
display: table-cell;
height: 50px;
text-align: center;
vertical-align: middle;
}
.menu ul lu a {
color: #C00;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
display: table-cell;
vertical-align: middle;
}
.menu ul li a:hover {
text-decoration: none;
}
</style>
|
и не забывайте открывающий тег <HTML>
даже при наличии доктайпа он всё-равно нужен | |
|
|
|