Дырка между меню и баннером

yosinya · June 24, 2014

Доброго дня! Создала выпадающее меню, после прикрепила картинку, и между меню и картинкой теперь дырка. Как исправить? Все файлы в прикрепленном архиве. Буду благодарна!

http://files.mail.ru/4301B607D8F24C9D89AEA1CF887B7F6D

npofopr · June 24, 2014

http://htmlforum.ru/index.php?showtopic=18446

yosinya · June 24, 2014

Доброго дня! Создала выпадающее меню, после прикрепила картинку, и между меню и картинкой теперь дырка. Как исправить? Буду благодарна!

<!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;}

Edited June 24, 2014 by yosinya

Sign In

Дырка между меню и баннером

Question

yosinya

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

yosinya

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information