Нужна помощь, буду признателен за оценку верстки
403 сообщения
#12 лет назад
Здравствуйте.
Пожалуйста, оцените верстку.
Сейчас нет доступного хостинга, поэтому HTML + CSS выкладываю в посте + архив в портфолио
ссылка
Буду очень благодарен за комментарии, рекомендации или обнаруженные ошибки.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media="screen"
type="text/css">
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/slides.jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>HTML + CSS + JS</title>
</head>
<body>
<div id="header" class="overflow">
<div class="w980">
<a href="#" class="left"><img src="images/logo_319x97.png" alt="Designprog"></a>
<form class="right overflow">
<label for="search" class="left"><input id="search"
value="Search:"></label> <input type="image"
src="images/icon_search.png" alt="Search">
</form>
</div>
</div>
<div id="navigation" class="overflow">
<div class="w980">
<ul id="menuHeader" class="overflow">
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Blog</span></a></li>
<li><a href="#"><span>Clients</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>
</div>
</div>
<div id="slides">
<div class="w980" id="slider">
<img src="images/left_arrow_35x36.png" class="prev" alt="Previous"> <img
src="images/right_arrow_35x36.png" class="next" alt="Next">
<div class="slides_container overflow">
<div class="item">
<img src="images/slide1_485_427.png" alt="slide1">
<div class="right">
<h1>We create beautiful websites and graphics for the web!</h1>
<ul>
<li>Sed congue, dui vel tristique mollis.</li>
<li>Morbi eget sem. Nam mollis.</li>
<li>Donec sed velit ut tellus fermentum.</li>
</ul>
<a href="#"> <img src="images/button_request_288x34.png"
alt="Request a FREE Quote Today">
</a>
</div>
</div>
<div class="item">
<img src="images/slide2_485_427.png" alt="slide2">
<div class="right">
<h1>Lorem Ipsum is simply dummy text of the printing</h1>
<ul>
<li>Esistono innumerevoli variazioni dei passaggi del.</li>
<li>In genere, i generatori di testo segnaposto disponibili
su.</li>
<li>Il testo così generato è sempre privo di ripetizioni.</li>
</ul>
<a href="#"> <img src="images/button_request_288x34.png"
alt="Request a FREE Quote Today">
</a>
</div>
</div>
<div class="item">
<img src="images/slide3_485_427.png" alt="slide3">
<div class="right">
<h1>Molti software di impaginazione e di web design
utilizzano</h1>
<ul>
<li>Molte versioni del testo sono state prodotte negli anni.</li>
<li>Al contrario di quanto si pensi.</li>
<li>In genere, i generatori di testo segnaposto.</li>
</ul>
<a href="#"> <img src="images/button_request_288x34.png"
alt="Request a FREE Quote Today">
</a>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="w980">
<div class="w475 left">
<h2>Featured Services</h2>
<p class="subTitle">Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
<p>Suspendisse adipiscing rhoncus massa, sit amet sollicitudin
quam vulputate non. In non turpis nisl. Curabitur purus mi,
pharetra vitae viverra et, mattis sit amet nunc.</p>
<div id="servicesTable">
<div class="w220 left">
<img src="images/icon_emailbook_44x47.png" class="left" alt="">
<h3>Featured Service</h3>
<p>Vestibulum sit amet neque eu neque suscipit consequat</p>
</div>
<div class="w220 right">
<img src="images/icon_bag_48x40.png" class="left" alt="">
<h3>Featured Service</h3>
<p>Vestibulum sit amet neque eu neque suscipit consequat</p>
</div>
<div class="w220 left clear">
<img src="images/icon_earth_48x48.png" class="left" alt="">
<h3>Featured Service</h3>
<p>Vestibulum sit amet neque eu neque suscipit consequat</p>
</div>
<div class="w220 right">
<img src="images/icon_round_48x48.png" class="left" alt="">
<h3>Featured Service</h3>
<p>Vestibulum sit amet neque eu neque suscipit consequat</p>
</div>
</div>
</div>
<div class="w475 right">
<h2>What We Do</h2>
<p class="subTitle">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui off icia deserunt mollit anim id est
laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p>
</div>
<div class="w475 left clear" id="events">
<h2>News & Events</h2>
<p>
<a href="#"><strong>5th / April / 2009 Integer mauris.</strong>
<span>Cras iaculis viverra dolorqw. Nulla suscipit. Proin
eu sapien ac sem fermentum sollicitudin.</span></a>
</p>
<p>
<a href="#"><strong>5th / April / 2009 Integer mauris.</strong><span>Cras
iaculis viverra dolorqw. Nulla suscipit. Proin eu sapien ac sem
fermentum sollicitudin.</span></a>
</p>
<a class="left" href="#"><img src="images/more_new_80x24.png"
alt="More news"></a>
</div>
<div class="w475 right">
<h2>What my clients are saying</h2>
<p id="quotes">It is a long established fact that a reader will
be distracted by the readable content of a page when looking at its
layout.Content here, content here', making it look like readable
English.</p>
<p class="quotesAuthor">-John Smith, webdesigner</p>
</div>
</div>
</div>
<div id="footer" class="overflow">
<div class="w980">
<a href="#" class="left"><img src="images/logo_bottom_257x23.png"
alt="DesignPro"></a>
<div class="right">
<p>© Copyright 2009. Your Site Name Dot Com. All Rights
Reserved</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">RSS</a></li>
</ul>
<span class="right">Design by DreamTemplate</span>
</div>
</div>
</div>
</body>
</html>
/* ссылка
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*start of css */
html {
overflow: auto;
}
body {
font: 12px Arial, Verdana, sans-serif;
color: black;
min-width: 1024px;
}
.w980 {
width: 980px;
margin: 0 auto;
}
.w475 {
width: 475px;
}
.w220 {
width: 230px;
}
.overflow {
overflow: hidden;
}
.right {
float: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
#header {
height: 97px;
background: #191919;
}
#header form {
padding: 32px 0 0 0;
}
#search {
color: #9c9c9c;
background: url(../images/bkg_search_input_198x34.png) no-repeat;
width: 188px;
height: 34px;
border: none;
padding: 0 5px;
font: 12px Arial, Helvetica, sans-serif;
}
#navigation {
height: 49px;
border-top: 1px solid #56c4ad;
background: #2fb59b;
border-bottom: 1px solid #268d78;
}
#menuHeader {
padding: 7px 0 0 0;
}
#menuHeader li {
display: block;
float: left;
}
#menuHeader li a {
text-decoration: none;
font: bold 12px/34px Arial, Helvetica, sans-serif;
color: black;
height: 34px;
display: block;
}
#menuHeader li a:hover {
color: white;
}
#menuHeader li span {
padding: 0 25px;
display: block;
height: 34px;
}
#menuHeader li.active {
background: url(../images/bkg_nav_button_38x102.png) no-repeat left -34px;
}
#menuHeader li.active a {
background: url(../images/bkg_nav_button_38x102.png) no-repeat right -68px;
color: white;
}
#menuHeader li.active a span {
background: url(../images/bkg_nav_button_38x102.png) no-repeat center top;
}
#slides {
max-height: 375px;
border-top: 1px solid #82dec4;
background: #53d1af url(../images/bkg_slider_980x385.jpg) no-repeat center top;
border-bottom: 1px solid #2d6455;
}
#slider {
margin: 0 auto;
}
img.prev, img.next {
cursor: pointer;
position: relative;
top: 178px;
}
img.prev {
float: left;
}
img.next {
float: right;
}
.slides_container {
position: relative;
width: 910px;
height: 420px;
top: 25px;
}
.item .right {
position: relative;
width: 325px;
margin: 65px 33px 70px;
}
.item .right h1 {
font: bold 34px/36px Arial, Helvetica, sans-serif;
color: white;
}
.item .right ul {
margin: 30px 0;
}
.item .right ul li {
display: block;
font: 12px/20px Arial, Helvetica, sans-serif;
color: white;
padding-left: 20px;
background: url(../images/bkg_feauters_list_14x13.png) no-repeat left;
}
#content {
background: url(../images/bkg_content_5x773.png) repeat-x;
min-height: 773px;
}
#content .w980 {
padding-top: 100px;
}
#content .w980 h2 {
font: bold 18px/20px Arial, Helvetica, sans-serif;
color: #0b0b0b;
border-bottom: 1px solid #dcdcdc;
padding: 0 0 18px 5px;
}
#content .w475 p.subTitle {
font: 11px/20px Arial, Helvetica, sans-serif;
color: #b0b0b0;
padding: 14px 0 30px 0;
}
#content .w475 p {
color: #6d6d6d;
font: 12px/20px Arial, Helvetica, sans-serif;
padding-bottom: 30px;
}
#content .w220 img {
padding: 10px 15px 0 5px;
}
#content .w220 h3 {
font: bold 11px/20px Arial, Helvetica, sans-serif;
color: #b0b0b0;
}
#content .w220 p {
font: normal 11px/20px Arial, Helvetica, sans-serif;
color: #b0b0b0;
}
#content #events p {
padding: 25px 0 0 0;
}
#content #events a {
text-decoration: none;
color: #6d6d6d;
}
#content #events a:hover {
text-decoration: underline;
}
#content #events a strong {
font-weight: bold;
display: block;
}
#content #events a strong span {
display: block;
}
#content #events img {
margin-top: 17px;
}
#content #quotes {
padding: 50px 0 0 25px;
background: url(../images/quotes_36x31.png) no-repeat left 30px;
}
#content p.quotesAuthor {
font-weight: bold;
padding: 14px 0 0 24px;
}
#footer {
min-height: 192px;
border-top: 1px solid #dddddd;
background: #ececec;
color: #868686;
font-size: 11px;
}
#footer .w980 {
padding-top: 25px;
}
#footer .w980 p {
padding-bottom: 5px;
}
#footer .w980 ul li {
display: block;
float: left;
}
#footer .w980 ul li:last-child a {
border: none;
}
#footer ul li a {
text-decoration: none;
color: #868686;
font-size: 11px;
border-right: 1px solid #868686;
padding-right: 2px;
margin-left: 2px;
}
#footer ul li a:hover {
text-decoration: underline;
}
/* end of css */
167 сообщений
#12 лет назад
Хорошая, чистая верстка. но цсс-ку на основе ИД я б не писал.UPD: не тестил. картинок то нет
403 сообщения
#12 лет назад
Цитата ("Bob301"):А картинки нам от куда брать?
Я хотел архив прикрепить с сайтом, но в форум архив не крепится. Прикрепил скриншот. Меня больше интересовали комментарии по структуре, синтаксису, возможно рекомендации по технике.
Цитата ("fastimus"):
Хорошая, чистая верстка. но цсс-ку на основе ИД я б не писал.
UPD: не тестил. картинок то нет
Пожалуйста, обоснуй (буду очень благодарен за примеры, статьи) почему не стоит использовать id, ведь id используются только для уникальных элементов.
403 сообщения
616 сообщений
#12 лет назад
Неплохо, но есть ошибки.Использование таких id/классов - w980,w220 - не правильно с точки зрения семантики. Приведу простой пример:
заказчик захочет изменить ширину блока, в css найдет:
.w980{
width:980px;
}и изменить ширину
.w980{
width:1000px;
}Получается недоразумение какое-то, в html разметке видим - w980, а на деле у нас ширина 1000px
пример может и не лучший, но в общем неправильно это.
Также касательно семантики, у вас есть цитата в верстке, для этого нужно использовать спец тег - <blockquote>
Соглашусь частично с fastimus и дополню, слишком много id используется в разметке, лучше используйт class. id - не повторяющиеся элементы на странице, class - повторяющиеся. К примеру у нас одна цитата - <blockquote id="a">, заказчик захочет еще одну добавить, дублирует код, в итоге ошибка - не валидный документ на выходе. А вот если мы использовали бы классы, то ошибки не возникнет.
<li class="active"><a href="#"><span>Home</span></a></li> - зачем еще и в span обернули? не нужно было.
Такая конструкиця в вашем css:
font: normal 11px/20px Arial, Helvetica, sans-serif;
А именно - 11px/20px - не валидно
вот тут еще:
<input id="search"
value="Search:">
не совсем корректно прописывать value, лучше placeholder
из css можно удалить след код:
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
У вас в разметке же не используются html5 теги
935 сообщений
#12 лет назад
Цитата ("art-apple"):А именно - 11px/20px - не валидно
И почему? (сто раз так писал, и ни разу валидатор не возмущался)
ссылка - вот, мои аргументы)
Кстати, Цитата ("art-apple"):
font: normal 11px/20px Arial, Helvetica, sans-serif;можно сократить так:
font: 11px/20px Arial, Helvetica, sans-serif;
normal - и так по-умолчанию браузеры делают
Отсутствует поддержка старых IE, например:
Цитата ("tuls"):
#footer .w980 ul li:last-child a {не поймут IE6-8Цитата ("tuls"):
min-width: 1024px;не поймет IE6
Кое-где избыточные код, например:
Цитата ("tuls"):
font: bold 34px/36px Arial, Helvetica, sans-serif;везде пишите Arial, Helvetica, sans-serif, а зачем, если в body он один раз написан и будет применен ко всем элементам и так. (Можно было оставить только bold 34px/36px)
или везде пишите у ссылок:
Цитата ("tuls"):
#content #events a {
text-decoration: none;
color: #6d6d6d;
}
#content #events a:hover {
text-decoration: underline;
}
а можно было один раз написать (в самом вверху) стиль подчеркивания всех ссылок:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
но специально в каком-то месте (у вас в li a) только лишь один раз отменить подчеркивание:
li a:hover {
text-decoration: none;
}
тоже касается и слишком часто повторяющихся цветов
И о html5 раз уж у вас:
Цитата ("tuls"):
<!DOCTYPE html>
и тем более раз не забыли о:
Цитата ("tuls"):
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
то почему уже тогда не использовать правильные (в плане семантики) теги типа:
<header>, <nav>, <footer>
вместо такой подделки:
Цитата ("tuls"):
<div id="header" class="overflow">Цитата ("tuls"):
<div id="navigation" class="overflow">Цитата ("tuls"):
<div id="footer" class="overflow">
403 сообщения
#12 лет назад
Цитата ("art-apple"):http://jigsaw.w3.org/css-validator/
ссылка
Эти ссылки должны быть твоими любимыми
Спасибо за комментарии, по обеим ссылкам проверил и html и css - валидацию проходят.
Цитата ("radar0080"):
normal - и так по-умолчанию браузеры делают
Отсутствует поддержка старых IE, например:
Цитата (tuls):
#footer .w980 ul li:last-child a {
не поймут IE6-8
Цитата (tuls):
min-width: 1024px;
не поймет IE6
Спасибо за анализ, какими решениями пользуетесь для совместимости с IE?
P.S. Может быть я строю иллюзии, но IE6 (~ 5% пользователей и падает) я поддерживать в верстке не планирую, мне кажется , в почти 2013 это подразумевается, да и заказов с требованиями IE6 не так много.
403 сообщения
#12 лет назад
Цитата ("art-apple"):<li class="active"><a href="#"><span>Home</span></a></li> - зачем еще и в span обернули? не нужно было.
Честно говоря, посчитал это изящным и достаточно находчивым решением, резиновая кнопка, использующая один файл для фона, какое решение используете вы?
935 сообщений
#12 лет назад
Цитата ("tuls"):какими решениями пользуетесь для совместимости с IE?пишу исключения на javascript (если заказчику требуется поддержка)
но... чтобы не удлинять кол-во часов верстки javascript-поддержкой стараюсь не использовать (если возможно) :last-child (IE 9+), когда можно его заменить :first-child (IE7+ чего обычно заказчику достаточно)
я делаю поддержку начиная с IE7 (на IE6 давно забил)
Но если вам пока сложно писать
935 сообщений
#12 лет назад
А и еще, если у вас:Цитата ("tuls"):<!DOCTYPE html>то опять же зачем тут
Цитата ("tuls"):
<link rel="stylesheet" href="css/style.css" media="screen"
type="text/css">
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/slides.jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
нужен атрибут type="text/javascript" а так же type="text/css"?
403 сообщения
#12 лет назад
radar0080, последнее сообщение понять не смог, какой-то ребус получился из-за формы изложения...
616 сообщений
#12 лет назад
Прошу прощения за Цитата ("radar0080"):И почему? (сто раз так писал, и ни разу валидатор не возмущался)
font: 11px/20px Arial, Helvetica, sans-serif;
Извиняюсь за дезинформацию. Но богом клянусь, раньше(год назад примерно) валидатор ругался на такую запись и с тех пор я перестал так писать. Может баг валидатора был тогда, ХЗ...
Цитата ("tuls"):
radar0080, последнее сообщение понять не смог, какой-то ребус получился из-за формы изложения...
Попробую перефразировать
type="text/javascript" а так же type="text/css" не обязательны если у вас доктайп html5, в более ранних доктайпах этот атрибут type обязателен, в вашем случае можно сократить код