Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: В чем ошибка урока верстки?
 
 автор: Владимир55   (02.10.2013 в 18:14)   письмо автору
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>

  Ответить  
 
 автор: Владимир55   (02.10.2013 в 18:32)   письмо автору
5.4 Кб
 
   для: Владимир55   (02.10.2013 в 18:14)
 

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

  Ответить  
 
 автор: Deed   (02.10.2013 в 20:49)   письмо автору
 
   для: Владимир55   (02.10.2013 в 18:32)
 

Говорят, "продвинутые" йоги умеют чистить зубы через нос. Но зачем??
В данном случае стили составлены не совсем, э-э, корректно.
Ну, а я бы здесь обошелся старой доброй таблицей, не смотря на мнение, что использование списка повышает семантику кода, что положительно сказывается на SEO, blah-blah-blah...
Если, уж, на то пошло, таблицу меню можно обрамить тегом <nav>, как вариант.
А если без списка - никак, то вот: http://jsbin.com/UhEkOhi/1/edit?css,output - простейший вариант.

  Ответить  
 
 автор: Владимир55   (03.10.2013 в 20:04)   письмо автору
 
   для: Владимир55   (02.10.2013 в 18:32)
 

Нашел я свою ошибку - вот она:
menu ul lu a { 

  Ответить  
 
 автор: яса1   (03.10.2013 в 01:33)   письмо автору
 
   для: Владимир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>
даже при наличии доктайпа он всё-равно нужен

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования