фон у шапки

humb1t · June 9, 2012

Не работает background-image у header, хотя с footer'ом все отлично. Не могу понять в чем дело!

<!DOCTYPE html>
<html>
	<head>
<!--[if lt IE 9]> 
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->
		<meta charset="utf-8">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/main.css" type="text/css" />
		<link rel="stylesheet" href="css/menu.css" type="text/css" />
		<title>Кондиционеры</title>
	</head>

	<body> 	
	<div id="wrap">
		<section align="center">
			<header>
				<div id="logo" height="100%"><h1>Кондиционеры AVT<br>т.8(927)602-33-44</h1></div>
				<div align = "left" class="example">
					<ul id="my_slider">
						<li><img src="data_images/pic1.jpg" alt="" /></li>  
						<li><img src="data_images/pic2.jpg" alt="" /></li>  
						<li><img src="data_images/pic3.jpg" alt="" /></li>  
						<li><img src="data_images/pic4.jpg" alt="" /></li>  
						<li><img src="data_images/pic5.jpg" alt="" /></li>  
						<li><img src="data_images/pic6.jpg" alt="" /></li>  
						<li><img src="data_images/pic7.jpg" alt="" /></li>  
						<li><img src="data_images/pic8.jpg" alt="" /></li>  
						<li><img src="data_images/pic9.jpg" alt="" /></li>  
						<li><img src="data_images/pic10.jpg" alt="" /></li>  
					</ul>
				</div>
			</header>
			<div class="clearing"> </div>
		</section>

		<section>
			<div id="vmenu" align="center">
				<ul id="menu">
					<li><button class='toi toivmd'><a href="index.html">Как выбрать?</a></button></li>
					<li><button class='toi toivmd'><a href="index.html">Услуги</a></button><ul>
							<li><button class='toi toivmd'><a href="index.html">Монтаж</a></button></li>
							<li><button class='toi toivmd'><a href="index.html">Сервис</a></button></li>
							</ul></li>
					<li><button class='toi toivmd'><a href="index.html">Цены</a></button><ul>
							<li><button class='toi toivmd'><a href="index.html">Прайс-лист</a></button></li>
							<li><button class='toi toivmd'><a href="index.html">Оплата</a></button></li>
							</ul></li>
					<li><button class='toi toivmd'><a href="index.html">Контакты</a></button></li>
				</ul>
			</div>
		</section>

		<section align="center">
			<aside>
				<h2>Типы кондиционеров</h2>
				<hgroup>
				<ul>
					<li>Тип кондиционнера 1</li>
					<li>Тип кондиционнера 2</li>
					<li>Тип кондиционнера 3</li>
					<li>Тип кондиционнера 4</li>
				</ul>
				</hgroup>
			</aside>
		</section>

		<section>
		<div id="content">

			<article>
				<h2>Новость</h2>
				<figure>
					<img src="img/hb.jpg"/>
					<figcaption>Подпись</figcaption>
				</figure>
			</article>
		<div class="clearing"> </div>
		</div>
		</section>

		<section>
			<footer>
				<a href="index.html"> <img src="img/home.png" style="float: left" /></a>
				<div align="right"><p> Никита Пузанков и Ко. www.nikita-puzankov.ru  2012</p></div>
			</footer>
		</section>
	</div>
	</body>
</html>

и css

body{

font: 16px/1.8 sans-serif;

background-image: url("http://127.0.0.1/cond/img/back.png");

background-repeat: repeat repeat;

}

#wrap{

padding: 0% 10%;

}

#logo{

position: absolute; left:50%;

}

header {

display: block;

text-shadow: white 1px 1px 2px, black 0 0 1em;

background: url("http://127.0.0.1/cond/img/hb.png");

padding: 0;

margin: 0 0 10px 0;

}

#content{

width:100%;

display: block;

padding: 5px;

margin-left:35%;

}

footer{

display: block;

clear: both;

width:100%;

background: url("http://127.0.0.1/cond/img/foot.png");

padding-right: 1px;

font-size:60%;

text-shadow: white 1px 1px 1px, black 0 0 1em;

}

aside{

display: block;

float: left;

width: 20%;

margin: 0 0 0 5px;

border: 1px double;

}

aside > hgroup

{

}

aside ul{

}

article{

display: block;

margin: auto;

}

.clearing {

height: 0;

clear: both;

}

h1 {

font: 35px/1 "Impact";

text-transform: uppercase;

margin: 0;

color: #00BFFF;

}

h2 {

font-size:100%;

margin-top: 0;

color: #00008B;

}

Modestes · June 9, 2012

потому что блок header пустой

не смотря на то там там логотип, у него абсолютное позиционирование.

или пропишите текст для меню, или вместо absolute примените relative к logo

или задайте шапке width, height

Edited June 9, 2012 by Modestes

humb1t · June 9, 2012

потому что блок header пустой
не смотря на то там там логотип, у него абсолютное позиционирование.
или пропишите текст для меню, или вместо absolute примените relative к logo
или задайте шапке width, height

Спасибо.

Sign In

фон у шапки

Question

humb1t

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Modestes

Link to comment

Share on other sites

humb1t

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information