Оцените, пожалуйста код вёрстки
Укажите на все ошибки, особенно по семантике
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кухонный двор</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div id="background">
<div id="content">
<div id="logo"></div>
<div id="phone"></div>
<!-- Верхнее меню -->
<div id="top_menu_wrapper">
<ul>
<li><a href="javascript:void(0)" class="top_menu_item1">Каталог</a></li>
<li><a href="javascript:void(0)" class="top_menu_item2">Адреса салонов</a></li>
<li><a href="javascript:void(0)" class="top_menu_item3">Акции</a></li>
<li><a href="javascript:void(0)" class="top_menu_item4">Сотрудничество</a></li>
</ul>
<div class="bg_arrow1"></div>
<div class="bg_arrow2"></div>
<div class="bg_arrow3"></div>
<div class="bg_arrow4"></div>
</div>
<!-- Левое меню -->
<div id="left_menu_wrapper">
<ul>
<li><a href="javascript:void(0)">О компании</a></li>
<li><a href="javascript:void(0)">Спецпредложения</a></li>
<li><a href="javascript:void(0)">Контакты</a></li>
<li><a href="javascript:void(0)">Услуги</a></li>
<li><a href="javascript:void(0)">Контакты</a></li>
</ul>
</div>
<h2 id="information">Единая справочная:</h2>
<!-- Среднее меню с иконками -->
<div id="icon_menu_wrapper">
<ul>
<li><a href="javascript:void(0)" id="bg_online_payment">On-line<br>расчёт</a></li>
<li><a href="javascript:void(0)" id="bg_designer_call">Вызов<br>дизайнера</a></li>
<li><a href="javascript:void(0)" id="bg_write_to_director">Напиши<br>директору</a></li>
<li><a href="javascript:void(0)" id="bg_credit">Кредит</a></li>
<li><a href="javascript:void(0)" id="bg_answer_question">Вопрос-<br>ответ</a></li>
<li><a href="javascript:void(0)" id="bg_discount_program">Дисконтная<br>программа</a></li>
<li><a href="javascript:void(0)" id="bg_coupon"> Купон</a></li>
</ul>
</div>
<!-- Серые квадраты -->
<div id="squares_wrapper">
<div id="square1"></div>
<div id="square2"></div>
</div>
<!--Слайдер и новости-->
<div id="content_location">
<h1 id="novelty">Новинки</h1>
<a href="javascript:void(0)" class="prev"></a>
<div id="slider">
<ul>
<li><a href="javascript:void(0)"><img src="images/preview1.png" alt="" width="175" height="124" ></a></li>
<li><a href="javascript:void(0)"><img src="images/preview2.png" alt="" width="176" height="124" ></a></li>
<li><a href="javascript:void(0)"><img src="images/preview3.png" alt="" width="162" height="124" ></a></li>
</ul>
</div>
<a href="javascript:void(0)" class="next"></a>
<h1 id="news">Новости</h1>
<div id="date1"></div>
<div id="date2"></div>
<p id="text1">
Уважаемые клиенты! В условиях
мирового финансового кризиса,
который отразился на всех рынках
и сферах деятельности, нам
</p>
<p id="text2">
Уважаемые клиенты! В условиях
мирового финансового кризиса,
который отразился на всех рынках
и сферах деятельности, нам
</p>
<a href="javascript:void(0)" id="allnews">Все новости</a>
</div>
</div>
<div id="white_and_schemes"></div>
</div>
<div id="footer">
<div id="small_rectangle"></div>
<div id="footer_text">© Кухонный двор<br>
<a href="javascript:void(0)" style="color: #28166f; text-decoration: underline;">
Кухни на заказ</a>, стильные кухни, кухонная мебель</div>
</div>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
outline: medium none;
}
html {
background-color: white;
height: 100%;
width: 100%;
}
body{
background: white;
}
h1{
font: 26px Arial;
margin-left: 50px;
margin-bottom: 20px;
}
h2{
position: absolute;
top: 570px;
left: 750px;
font: 16px "Trebuchet MS";
}
p{
position: relative;
float: left;
width: 230px;
font: 14px Arial;
color: #656362;
}
a{
font: italic 16px "Trebuchet MS";
text-decoration: underline;
}
li{
margin-left: 5px;
margin-right: 5px;
}
img{
border: 0px;
display: block;
}
#novelty{
text-decoration: underline;
}
#news{
margin-left: 50px;
}
#background{
position: relative;
margin: 0 auto;
width: 100%;
height: 1322px;
background: #f6e8d3 url(images/main_cut.png) center top no-repeat;
}
#logo{
position: absolute;
top: 28px;
left: 16px;
width: 266px;
height: 168px;
background: url(images/logo.png) center top no-repeat;
}
#phone{
position: absolute;
left: 760px;
top: 474px;
width: 202px;
height: 151px;
background: url(images/phone.png) center top no-repeat;
}
#white_and_schemes{
position: relative;
margin: 0 auto;
width: 100%;
top: 650px;
height: 684px;
background: url(images/white_area.png) center no-repeat;
}
/* Верхнее меню */
#top_menu_wrapper{
position: absolute;
top: 30px;
left: 300px;
}
#top_menu_wrapper ul li{
display: inline;
}
#top_menu_wrapper ul li a {
position: relative;
float: left;
padding-left: 30px;
padding-right: 30px;
padding-top: 3px;
padding-bottom: 5px;
color: white;
background: url(images/bg_menu.png) repeat-x;
}
#top_menu_wrapper ul li a:hover{
background: url(images/bg_menu.png) repeat-x;
color: white;
}
.bg_arrow1{
position: relative;
float: left;
height: 8px;
width: 126px;
background: url(images/arrow.png) center no-repeat;
}
.bg_arrow2{
position: relative;
float: left;
height: 8px;
width: 178px;
}
.bg_arrow3{
position: relative;
float: left;
height: 8px;
width: 105px;
}
.bg_arrow4{
position: relative;
float: left;
height: 8px;
width: 190px;
}
.arrow{
background: url(images/arrow.png) center no-repeat;
}
/* Меню c иконками */
#icon_menu_wrapper{
position: relative;
top: 500px;
}
#icon_menu_wrapper ul li{
display: inline;
}
#icon_menu_wrapper ul li a{
position: relative;
float: left;
padding-top: 70px;
margin-right: 35px;
width: 75px;
color: #443521;
}
#bg_online_payment{ background: url(images/online_payment.png) no-repeat;}
#bg_designer_call{ background: url(images/online_payment.png) no-repeat;}
#bg_write_to_director{ background: url(images/write_to_director.png) no-repeat;}
#bg_credit{ background: url(images/credit.png) no-repeat;}
#bg_answer_question{ background: url(images/answer_question.png) no-repeat;}
#bg_discount_program{ background: url(images/discount_program.png) no-repeat;}
#bg_coupon{ background: url(images/coupon.png) no-repeat;}
/* Левое меню */
#left_menu_wrapper{
position: absolute;
top: 330px;
left: 16px;
width: 150px;
height: 125px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.5;
background: url(images/left_menu.png);
}
#left_menu_wrapper ul li{
display: block;
}
#left_menu_wrapper ul li a{
color: #443521;
}
#content{
position: relative;
margin: 0 auto;
left: 0px;
width: 945px;
z-index: 1;
}
#squares_wrapper{
position: absolute;
top: 690px;
left: 68px;
}
#square1{
position: relative;
width: 240px;
height: 240px;
margin-bottom: 10px;
background: #f1f1f1;
}
#square2{
width: 240px;
height: 200px;
background: #f1f1f1;
}
#content_location{
position: absolute;
top: 690px;
left: 310px;
}
#slider{
position: relative;
float: left;
height: 124px;
margin-bottom: 20px;
}
.prev{
position: relative;
float: left;
width: 20px;
height: 124px;
margin-left: 25px;
background: url(images/arrow_prev.png) left center no-repeat;
}
.next{
position: absolute;
z-index: 2;
top: 51px;
left: 602px;
width: 20px;
height: 124px;
background: url(images/arrow_next.png) right center no-repeat;
}
#date1{
position: relative;
float: left;
width: 250px;
height: 25px;
margin-left: 50px;
margin-bottom: 10px;
background: url(images/date.png) left no-repeat;
}
#date2{
position: relative;
float: left;
width: 250px;
height: 25px;
margin-left: 20px;
margin-bottom: 10px;
background: url(images/date.png) left no-repeat;
}
#text1{
margin-left: 50px;
margin-bottom: 10px;
padding-right: 20px;
border-right: 1px dashed #656362;
}
#text2{
margin-bottom: 10px;
padding-left: 20px;
}
#allnews{
position: relative;
float: left;
font: 14px Arial;
color: #28166f;
margin-left: 50px;
padding-right: 12px;
text-decoration: underline;
background: url(images/allnews_arrow.png) right no-repeat;
}
#footer{
position: relative;
margin: 0 auto;
height: 120px;
width: 100%;
}
#small_rectangle{
position: absolute;
top: 45px;
left: 495px;
width: 85px;
height: 30px;
margin-bottom: 20px;
background: #f1f1f1;
}
#footer_text{
position: absolute;
top: 45px;
left: 695px;
margin-bottom: 20px;
font: 14px Arial;
}
|