Критика css, html кода
9 сообщений
#10 лет назад
Здравствуйте, я начинающий верстальщик, из интернета взял psd шаблон и сверстал его. Обращаюсь к вам с просьбой сказать или показать какие ошибки я совершил или где можно сокращать код.Спасибо!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<meta name="keywords" content="" >
<meta name="description" content="" >
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<div class="up"></div>
<div id="wrapper">
<div id="header">
<div class="email">
<p align="right">***</p>
</div>
<div class="logo"><img src="images/logo_top.png" alt="creative studio" width="307px" height="100px"></div>
<div class="menu">
<ul>
<li><a href="" >HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">PORTFOLIO</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT US</a></li>
</ul>
</div>
<div class="imag">
<div class="topimg"><p>here's some nice work <a href="#">view portfolio<b>→</b></a></p>
</div>
</div>
</div>
<div id="content">
<div class="info">
<div class="aboutus">
<h1><b>→</b> about us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
<p><b>→</b><a href="#" >read</a></p>
</div>
<div class="ourbenef">
<h1><b>→</b>our benefits</h1>
<ul>
<li><img src="images/checkbox.png" alt="check box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa.</p>
</li>
<li><img src="images/checkbox.png" alt="check box"><p>Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat</p>
</li>
<li><img src="images/checkbox.png" alt="check box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa.</p>
</li>
</ul>
</div>
<div class="testimonial">
<h1><b>→</b>testimonial</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque.</p>
<i>Rafi, Graphicsfuel.com</i>
</div>
</div>
<div class="ourportf">
<h1><b>→</b>our portfolio</h1>
<div class="portfolio">
<img src="images/portfolio1.jpg" alt="scvoresnic.ru" class="portfolleft">
<p><a href="#">view<b>→</b></a></p>
</div>
<div class="portfolio">
<img src="images/portfolio2.jpg" alt="drealand.ru" class="portfolleft">
<p><a href="#">view<b>→</b></a></p>
</div>
<div class="portfolio">
<img src="images/portfolio3.jpg" alt="sodol.ru" class="portfolleft">
<p><a href="#">view<b>→</b></a></p>
</div>
<div class="portfolio">
<img src="images/portfolio4.jpg" alt="moving.ru">
<p><a href="#">view<b>→</b></a></p>
</div>
</div>
<div class="blogup">
<div class="blogupdate">
<h1><b>→</b>blog updates</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
</div>
<div class="connectus">
<h1><b>→</b>connect us</h1>
<ul>
<li class="facebook"><a href="#"></a></li>
<li class="twitter"><a href="#"></a></li>
<li class="google"><a href="#"></a></li>
<li class="rss"><a href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="down">
<div class="centr">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">Blog</a></li>
<li class="end"><a href="">Contact Us</a></li>
</ul>
<img src="images/logo_bottom.png" alt="creative studio">
<p>© 2010 CreativeStudio. All Rights Reserved</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Правильный CSS!" />
</a>
</p>
</div>
</div>
</body>
</html>
/* reset browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
/* end reset browser styles */
html,body{
font-family: Arial, Helvetica, sans-serif;
color: #858585;
width: 100%;
height: 100%;
background-color: #f4f4f4;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
Body {
font-size: 0.9375em;
}
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #090909;
font-weight: bold;
}
/*Start Sprites*/
.arow, .checkbox, .facebook, .google, .rss, .twitter{
background: url(images/sprites.png) no-repeat;
}
.arow{
background-position: -43px -71px ;
width: 11px;
height: 6px;
}
.checkbox{
background-position: -7px -69px ;
width: 16px;
height: 16px;
}
.facebook{
background-position: -33px -33px ;
width: 32px;
height: 32px;
}
.google{
background-position: 0 -33px ;
width: 32px;
height: 32px;
}
.rss{
background-position: -33px 0;
width: 32px;
height: 32px;
}
.twitter{
background-position: 0 0;
width: 32px;
height: 32px;
}
/*End Sprites */
/* Start Wrapper*/
.up{
width: 100%;
height: 17px;
background-color: #090909;
}
.down{
width: 100%;
min-height: 100px;
background-color: #e2e2e2;
}
#wrapper{
width: 960px;
min-height: 100%;
margin: 0 auto;
/*border: 1px dashed black;*/
}
* html #wrapper{ /* хак для ie6 */
height: 100%; /* для ие6, т.к. не понимает min-height */
}
#footer{
height: 100px;
clear: both;
}
/* End Wrapper*/
/*Start Header*/
.email {
/*border: 1px dashed red;*/
margin-top: 1em;
width: auto;
}
.logo{
width: 307px;
height: 100px;
padding-bottom: 27px;
float: left;
overflow: hidden;
}
.logo img{
width: 183px;
height: 100px;
}
/*Start MEnu*/
.menu ul{
margin: 0;
padding: 0;
text-align: center;
display: block;
margin-top: 40px;
/*border: 1px dashed red;*/
}
.menu li{
margin-left: 32px;
display: inline;
width: 105px;
/*border: 1px dashed green;*/
list-style-type: none;
zoom: 1;
}
.menu li a{
text-decoration: none;
font-weight: bold;
color: #fe9b00;
}
.menu li a:hover{
color: #090909;
}
/*End Menu*/
.imag{
margin-top: 56px;
border-top: 1px solid #c0c0c0;
}
.imag .topimg{
background-image: url(images/top_img.png);
background-repeat: no-repeat;
width: 960px;
height: 380px;
margin-top: 18px;
position: relative;
}
.imag .topimg p{
background-color: #090909;
border: 1px solid black;
width: 430px;
text-transform: uppercase;
padding: 16px 6px 16px 12px;
font-size: 15px;
font-weight: bold;
margin-left: 31px;
position: absolute;
bottom: 45px;
}
.imag .topimg p a{
margin-left: 65px;
text-decoration: none;
color: #999898;
}
.imag .topimg p a b{
font-size: 20px;
font-weight: bold;
margin-left: 6px;
}
.imag .topimg p a:hover{
color: #fe9b00;
}
/*End Header*/
/*Start content*/
#content .info{
margin-top: 18px;
width: 100%;
border-bottom: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
overflow: hidden;
}
.info .aboutus, .info .ourbenef, .info .testimonial{
margin-top: 18px;
width: 283px;
/*border: 1px dashed red;*/
padding-bottom: 57px;
float: left;
}
.info .aboutus h1, .info .ourbenef h1, .info .testimonial h1{
padding-top: 25px;
/*padding-bottom: 12px;*/
border-bottom: 7px solid black;
text-transform: uppercase;
width: 283px;
height: 20px;
}
.info .aboutus h1 b, .info .ourbenef h1 b, .info .testimonial h1 b{
padding-right: 18px;
padding-left: 5px;
}
.info .aboutus p, .info .testimonial p{
padding-top: 18px;
}
.info .aboutus p a{
text-transform: uppercase;
text-decoration: none;
color: #fe9b00;
font-weight: bold;
}
.info .aboutus p b{
color: black;
padding-right: 18px;
}
.info .ourbenef, .info .testimonial{
margin-left: 55px;
}
.info .ourbenef li{
font-size: 12px;
list-style: none;
padding-top: 18px;
/*background: url(images/checkbox.png) no-repeat;*/
}
.info .ourbenef li img{
float: left;
padding-right: 17px;
}
.info .ourbenef li p{
overflow: hidden;
}
.info .testimonial p{
padding-bottom: 30px;
}
.info .testimonial i{
color: black;
}
.ourportf{
border-bottom: 1px solid #c0c0c0;
clear: both;
overflow:hidden;
}
.ourportf h1{
/*border: 1px dashed green;*/
padding-bottom: 21px;
padding-top: 21px;
text-transform: uppercase;
font-weight: bold;
}
.ourportf h1 b{
padding-right: 18px;
padding-left: 5px;
}
.ourportf .portfolio{
/*border: 1px dashed red;*/
position: relative;
float:left;
clear: none;
overflow:hidden;
margin-bottom: 40px;
}
.ourportf .portfolio img{
position: relative;
z-index: 1;
}
.ourportf .portfolio p {
position: absolute;
display: block;
width: 100%;
bottom: 0;
left: 0;
z-index: 2;
text-align: left;
padding-left: 152px;
}
.ourportf .portfolio p a{
text-decoration: none;
background-color: #fe9b00;
color: #090909;
text-transform: uppercase;
font-weight: bold;
padding: 5px;
}
.portfolleft{
padding-right: 33px;
}
.blogup{
overflow: hidden;
}
.blogupdate{
float: left;
overflow: hidden;
}
.blogupdate h1, .connectus h1{
padding-bottom: 21px;
padding-top: 21px;
text-transform: uppercase;
font-weight: bold;
}
.blogupdate h1 b, .connectus h1 b{
padding-right: 18px;
padding-left: 5px;
}
.blogupdate p{
width: 710px;
padding-bottom: 48px;
}
.connectus{
margin-left: 33px;
float: left;
overflow: hidden;
width: 186px;
}
.connectus li{
display: inline-block;
margin-right: 10px;
}
.connectus a{
padding: 0 17px 13px 16px;
}
/*End content*/
/*Start Down*/
.down .centr {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.down .centr li{
margin-top: 30px;
margin-bottom: 5px;
list-style-type: none;
display: inline-block;
padding: 0 5px;
border-right: 1px solid #808080;
}
.down .centr li a{
text-decoration: none;
color: #808080;
font-size: 12px;
}
.end{
border-right: 0px solid #808080;
}
.down .centr img{
float: right;
padding-bottom: 19px;
margin-top: -30px;
}
/*End Down*/
11416 сообщений
#10 лет назад
Вы серьезно? 
11416 сообщений
#10 лет назад
Выложите на хостинг, так будет понятнее 
330 сообщений
#10 лет назад
1) Переходите на html5 - он уже хорошо поддерживается браузерами. 2) Используйте семантические теги header, footer, nav и тп.
3) Заголовок первого уровня h1 должен быть один на странице, замените их на h3 к примеру.
4) Не пишите стили в html:Цитата:
< p align="right"5) Добавляйте классы стили для родителей, избавитесь от многих лишних классов. К примеру предыдущая цитата убирается добавив к .email{text-align:right}
6) Много лишних стилей к примеру:
.logo {
/*width: 307px;*//*height: 100px;*//*padding-bottom: 27px;*/- float: left;
/*overflow: hidden;*/
добавив для меню text-align:right
.connectus {
margin-left: 33px;float: left;overflow: hidden;width: 186px;- float: right; добавить
.menu ul {
margin: 0;padding: 0;text-align: center;display: block;- margin-top: 40px;
И таких примеров достаточно много.
7) Опять лишние классы: aboutus, ourbenef, testimonial - они же одинаковы, замените одним.
8) Зачем центральную картинку задавать через фон и создавать специальный класс со стилями, если можно просто вставить картинку в html, все равно параграфу задано position: absolute; так что ничего и не изменится.
9) Такое class="facebook" лучше применять непосредственно к ссылкам, и не придется им падинги добавлять.
10) Что-бы не было такого: ссылка
добавляйте min-width? в данном примере 960px
9 сообщений
#10 лет назад
FLAKE_MDM, спасибо за то что уделили время, значит при верстке надо быть по внимательным.
330 сообщений
#10 лет назад
vovka-morkovka, не поленился, скачал и посмотрел. Конечно получше но не сказать идеальный.