Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2011, 12:24
Аспирант
Отправить личное сообщение для OlegALL Посмотреть профиль Найти все сообщения от OlegALL
 
Регистрация: 23.01.2010
Сообщений: 90

Оцените, пожалуйста код вёрстки
Укажите на все ошибки, особенно по семантике


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">&copy; Кухонный двор<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;
}

Последний раз редактировалось OlegALL, 19.07.2011 в 13:45.
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2011, 12:27
Профессор
Отправить личное сообщение для ваый Посмотреть профиль Найти все сообщения от ваый
 
Регистрация: 29.06.2011
Сообщений: 445

отформатируйте код, чтобы было удобнее оценивать (javascript.ru/formatting)
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2011, 15:54
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

вёрстку не могу оценить, но этот html плох

<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>


я про href у ссылок
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2011, 16:06
Аспирант
Отправить личное сообщение для OlegALL Посмотреть профиль Найти все сообщения от OlegALL
 
Регистрация: 23.01.2010
Сообщений: 90

Это чтобы не скроллилось при нажатии по ссылкам
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2011, 16:09
Профессор
Отправить личное сообщение для ваый Посмотреть профиль Найти все сообщения от ваый
 
Регистрация: 29.06.2011
Сообщений: 445

На первый взгляд нормально, однако есть явные косяки.

1. Если даете элементу id, то внутренние блоки лучше стилизовать через класы, не надо столько id, на каждый элемент.

2. <a href="javascript:void(0)" style="color: #28166f; text-decoration: underline;"> За такое надо бить по почкам.

3. пора уже и на пятый доктайп можно переходить <!doctype html>
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2011, 16:19
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

В стилях я вижу только один шрифт "Trebuchet MS", а если его у пользователя не окажется то каким шрифтом отобразит весь текст браузер?
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2011, 16:26
Профессор
Отправить личное сообщение для ваый Посмотреть профиль Найти все сообщения от ваый
 
Регистрация: 29.06.2011
Сообщений: 445

h2 {position: absolute; top: 570px; left: 750px; ...

это вообще плохо
Ответить с цитированием
  #8 (permalink)  
Старый 19.07.2011, 16:41
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Цитата:
charset=windows-1251
некавайно, utf-8 ку!
И отцентрировать сайт непомешало бы.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #9 (permalink)  
Старый 19.07.2011, 21:10
Аспирант
Отправить личное сообщение для OlegALL Посмотреть профиль Найти все сообщения от OlegALL
 
Регистрация: 23.01.2010
Сообщений: 90

Сообщение от ваый Посмотреть сообщение
h2 {position: absolute; top: 570px; left: 750px; ...

это вообще плохо
почему?
Ответить с цитированием
  #10 (permalink)  
Старый 19.07.2011, 21:18
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Некошерно писать стилевые свойства на одной строчке с селекторами) Делайте так:
h2 {
 position: absolute;
 top: 570px;
 left: 750px;
}


Плюс пропускайте строчку между блоками. Так глаз лучше "выхватывает" блоки.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сайт туристических предложений. Пожалуйста, оцените! alex_G Ваши сайты и скрипты 14 25.01.2011 15:30
Пожалуйста оцените сайт JsEditor Ваши сайты и скрипты 8 16.10.2010 18:54
Пожалуйста оцените мой сайт. DesertEagle_STALKER Ваши сайты и скрипты 13 06.04.2010 16:00
Оцените, пожалуйста, наше творение William Ваши сайты и скрипты 12 31.07.2009 10:52
Сайт для вебмастера - оцените, пожалуйста iGenek Ваши сайты и скрипты 11 14.01.2009 01:40