Доброго дня! Создала выпадающее меню, после прикрепила картинку, и между меню и картинкой теперь дырка. Как исправить? Буду благодарна! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <link rel="stylesheet" href="style.css"> <title></title> </head> <body> <div class="layout"> <div class="header"> <img src="header1.png" width="935px;"></div> <div class="menu-wrap"> <ul class="menu"> <li><a href="">Главная</a> <ul> <li><a href="">О нас</a></li> <li><a href="">Для партнеров</a></li> <li><a href="">Для клиентов</a></li> </ul> </li> <li><a href="">Каталог товаров</a></li> <li><a href="">Прайс-лист</a></li> <li><a href="">Скидки</a></li> <li><a href="">Доставка</a></li> <li><a href="">Контакты</a> <ul> <li><a href="">Вакансии</a></li> </li> </ul> </div> <div class="content">Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег <p>). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.ВысотаС высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4). </div> <div class="sidebar">За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос. Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код. Высота С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значен</div></div> </body></html>/* CSS Document */body {background: url(fon.png); margin: 20px;}.layout { width: 980px; margin: auto; position: relative; /* Относительное позиционирование */ }.sidebar, .content { position: absolute; }.sidebar { background: #E9E9D0; /* Цвет фона */ width: 220px; /* Ширина колонки */border-radius: 10px 0 0 10px; }.content { background: #FFFFFF; /* Цвет фона */ left: 221px; /* Сдвиг вправо */ width: 700px; /* Ширина колонки */ border-radius: 0 10px 10px 0;}.menu-wrap { background-color: #7281D6; background-repeat: no-repeat; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5769CD), to(#7281D6)); background-image: -webkit-linear-gradient(#5769CD, #7281D6); background-image: -moz-linear-gradient(top, #5769CD, #7281D6); background-image: -ms-linear-gradient(#5769CD, #7281D6); background-image: -o-linear-gradient(#5769CD, #7281D6); background-image: linear-gradient(#5769CD, #7281D6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5769CD', endColorstr='#7281D6', GradientType=0); width: 937px; height: 34px; border-radius: 10px 10px 10px 10px;}ul.menu { padding: 0; display: block; height: 34px; text-align: center;}ul.menu li { list-style: none; border-right: 1px solid #5769CD; position: relative; display: inline-block; *display: block; *float: left;}ul.menu li a { color: white; display: inline-block; font-family: Arial; font-size: 13px; padding: 8px 20px 10px; ; text-decoration: none; border-right: 1px solid #5769CD; *display: block; *margin-left: 0;}ul.menu li:first-child { border-left: 1px solid #7281D6;}ul.menu li:first-child a:first-child { border-left: 1px solid #5769CD; margin-left: 0;}ul.menu li a:hover { background-color: #7281D6;}/*Выпадающее меню*/ul.menu li ul { display: none; position: absolute; padding: 0; top: 34px; left: -4px; *left: 0; border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; background-color: #7281D6; z-index: 1000;}ul.menu li:hover ul { display: block; text-align: left;}ul.menu li:hover ul li { display: block; width: 150px; border-right: none; border-top: 1px solid #5769CD;}ul.menu li:hover ul li:first-child a:first-child{ border-left: none; ;}ul.menu li:hover ul li a { border-right: none; padding: 6px 20px 8px; display: block;}ul.menu li:hover ul li a:hover { background-color: transparent; color: #B1B9E8;}.content{margin:0px 0px;padding:10px 10px;display:table;}.menu_left{float:left;width:250px;background:#888;height:400px;}
