0

Я просто начинающий кодер и мне нужно ваше мнение о моей верстке. Желательно не щадить)) Заранее спасибо)

<code  lang="html4strict">
 <div class="center">
   <div class="photo">
           <div class="information"> 
               <img src="img/photoMan.jpg" alt="photoMan">   
               <p class="name"> Maria Bagratuni</p> 
               <p class="explanation"> (bearcouture)</p>
               <p class="town"> Украина, Николаев</p>
               <p class="count"> Кол-во просмотров - 20</p>
               <p class="hello">Добро пожаловать!</p>
          </div>
          <div class="container">
                <div class="information2">
                     <p class="say"> <a href="#">О магазине</a></p>
                     <p class="say"> <a href="#"> Отзывы </a></p>
                     <p class="say"> <a href="#"> Сообщение мастеру</a> </p>
               </div>
          </div>
   </div>
  <div class="content">
         <div class="reviews">
                <input type="submit" align="right" value="Оставить отзыв"/>
                <p class="master">Отзывы мастера Анна Герасимова</p>
                  <div class="coment1">
                         <div class="pic">
                             <img src="img/icon.jpg" alt="Фото пользователя" width="56" height="56" ><br/>
                             <p class="answer"> 63 отзыва</p>
                         </div>
                         <div class="coments">
                             <p><span class="nameMan"><a href="#">Елена Александрова</a></span></p>  
                             <p class="allReviws">Если Долина Айберджей пленила душу, то Дуэнде проникло в самое сердце! <br/>
                             Спасибо Анна, за ваше чудесное творчество!<br/>
                             <span class="date">30.10.2012</span> <br/></p>
                         </div>
                  </div>
                   <div class="coment1">
                         <div class="pic">
                             <img src="img/icon.jpg" alt="Фото пользователя" width="56" height="56" ><br/>
                             <p class="answer"> 40 отзыва</p>
                         </div>
                         <div class="coments">
                             <p><span class="nameMan"><a href="#">Елена Александрова</a></span></p>  
                             <p class="allReviws">Спасибо мастеру за удивительные ароматы) Распробовать по-настоящему еще не успела, но зато вдохновилась на покупку парфюма для мужа)) Заодно протестила несколько женских парфюмов в магазине. А на выходе с облегчением уткнулась в "Венецианскую ночь"))) Настолько живой и настоящий запах - на контрасте это было особенно заметно. А те все на одно лицо, хотя вроде бы в процессе занюхивания кажется, что разные))) <br/>
                             <span class="date">30.10.2012</span> <br/></p>
                         </div>
                  </div>
                   <div class="coment1">
                         <div class="pic">
                             <img src="img/icon.jpg" alt="Фото пользователя" width="56" height="56" ><br/>
                             <p class="answer"> 53 отзыва</p>
                         </div>
                         <div class="coments">
                             <p><span class="nameMan"><a href="#">Елена Александрова</a></span></p>  
                             <p class="allReviws">Если Долина Айберджей пленила душу, то Дуэнде проникло в самое сердце! <br/>
                             Спасибо Анна, за ваше чудесное творчество!<br/>
                             <span class="date">30.10.2012</span> <br/></p>
                         </div>
                  </div>
                   <div class="coment1">
                         <div class="pic">
                             <img src="img/icon.jpg" alt="Фото пользователя" width="56" height="56" ><br/>
                             <p class="answer"> 53 отзыва</p>
                         </div>
                         <div class="coments">
                             <p><span class="nameMan"><a href="#">Елена Александрова</a></span></p>  
                             <p class="allReviws">Спасибо мастеру за удивительные ароматы) Распробовать по-настоящему еще не успела, но зато вдохновилась на покупку парфюма для мужа)) Заодно протестила несколько женских парфюмов в магазине. А на выходе с облегчением уткнулась в "Венецианскую ночь"))) Настолько живой и настоящий запах - на контрасте это было особенно заметно. А те все на одно лицо, хотя вроде бы в процессе занюхивания кажется, что разные))) <br/>
                             <span class="date">30.10.2012</span> <br/></p>
                         </div>
                  </div>
                  <div class=listPage>
                        <ul>
                            <li><a href="#" class="previous">Предыдущая</a></li>
                            <li><a href="#" class="list1">1</a></li>
                            <li><a href="#" class="list1">2</a></li>
                            <li><a href="#" class="list1">3</a></li>
                            <li><a href="#" class="list1">4</a></li>
                            <li><a href="#" class="list1">5</a></li>
                            <li><a href="#" class="list1">6</a></li>
                            <li><a href="#" class="list1">7</a></li>
                            <li><a href="#" class="list1">8</a></li>
                            <li><a href="#" class="list1">...</a></li>
                            <li><a href="#" class="next">Следующая</a> </li>
                        </ul>

                  </div>
        </div>
  </div>
 </div>
</div>
</code>
<code  lang="CSS">
 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; outline: none;}
html { height: 101%; } /* always display scrollbars */
body { font-size: 14px; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; background: url(../img/body_bg.jpg)#f9f5e5;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }

input { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; }
*{
    margin:0;
    padding:0;
}
.wrapper{
    margin: 0 auto;
    width:1100px;
}
html {
    width: 100%;
    position: relative;
}
body {
    margin: 0 auto;
    position: relative;
    background-color: white;
}
.header {
    float: left;
    display: inline;
    }
.reviews input {
    height: 32px;
    cursor: pointer;
    padding: 2px 10px 5px 6px;
    overflow: visible;
    border: none;
    background-color: #d78183;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: white;
    font: 14px Times New Roman; 
    font-weight: 600;
    float:right; 
    display: inline

}
.reviews input {
    behavior: url(../PIE/PIE.htc);
}

                               /*Central Part*/
.center{
    margin: 8px 0 0 31px;
}
.content{
    margin-left: 21px;
}
.reviews {
   width:790px;
   margin: 0 auto;
   padding-left: 161px; 
}
.pic img {
   float: left;
   padding: 20px 0 0 35px;
   margin-bottom:7px;
   display: inline
}
.master{
   font: 24px Times New Roman;
   border-bottom: 1px solid #cacaca; 
   padding-bottom: 13px; 
   margin: 11px 0 0 6px; 
}
.nameMan{
   color:#4f8fba;
   font: 16px Times New Roman;
   line-height: 2.1;
}
.nameMan a {
    text-decoration: none;
    color:#4f8fba;
}
.nameMan a:hover {
    color:#d78183;
}
.allReviws{
    font: 14px Times New Roman;
    line-height: 1.3;
}
.text {
    margin: 0 auto;
}
.coments{
    padding-left:123px;
    padding-top:8px;
    }
.pic {
    width:101px;
    float: left;
    display: inline
}
.answer{
    padding: 21px 0 0 40px;
    font-size: 11px;
}
.date{
    font:16px Times New Roman;
}
.coment1{
    border-bottom: 1px solid #cacaca;
    padding-bottom: 18px;
}
.listPage{
    margin: 24px 0 0 235px;
    letter-spacing: 2px;
}
.listPage a{
    color:#4f8fba;
    font:14px Times New Roman;
}
.listPage a:hover{
    color:#d78183;
}
.listPage ul li {
    display: inline;
}
.previous, .next{
    text-decoration: underline;
}

.list1{
    text-decoration: none;
} 
                                /*Photo Part*/
.photo{
    width:190px;
    height: 291px;
    background-color: #eceeeb;
    float: left;
    margin: 6px 0 0 33px; 
    display: inline
  }
.information img{
   margin: -53px 0 0 7px;
}
.information{
    font-family: Times New Roman; 
    line-height: 1.5;
    text-align: center;
    width: 150px;
    margin: 0 auto;
    padding-top: 72px;
}
.name{
    font-size: 18px;
    color:#4f8fba;
    line-height: 0.8;
    padding-top: 8px;  
}
.explanation{
    font-size: 16px;
    color:#4f8fba; 
}
.town{
    font-size: 11px;
}
.count{
    font-size: 13px; 
}   
.hello{
    font-size: 14px; 
    padding-top: 19px;
}
      /*Левое меню*/
.say a:hover{
    font-size: 14px;
    background-color: #eceeeb;
    width: 300px; 
    height: 25px;
    margin-top:22px;
}
.say a{
    font-size: 14px;
    color:#4f8fba;
 }
/*.magazine1 {
    padding-left: 30px; 
    vertical-align: text-bottom;
    line-height: 1.8;
}*/
.information2{
    font-family: Times New Roman; 
    line-height: 1.5;
    width: 150px;
    margin: 0 auto;
    padding: 25px 0 19px 21px;
}
.container{
    width: 190px;
    border-bottom: 1px solid #cacaca;
    margin-bottom: 10px; 
}
</code>

4 ответа 4

2

Критика:

  • У вас избыточная структура.

    плохо    
    <div class="information2">
        <p class="say"> <a href="#">О магазине</a></p>
        <p class="say"> <a href="#"> Отзывы </a></p>
        <p class="say"> <a href="#"> Сообщение мастеру</a> </p>
    </div>
    
    можно лучше 
    <div class="information2">
        <a class="say" href="#">О магазине</a>
        <a class="say" href="#"> Отзывы </a>
        <a class="say" href="#"> Сообщение мастеру</a>
    </div>
    и соответственно в стилях сделать ссылки блочными и добавить нужные отступы.   Можно вообще обойтись без класса say, но это уже от ситуации зависит.
    
    плохо
    <p><span class="nameMan"><a href="#">Елена Александрова</a></span></p>
    
    можно лучше
    <a class="nameMan" href="#">Елена Александрова</a>
    
    нормально
    <div class=listPage>
         <ul>
         .
         .
         .
         </ul>
    </div>
    
    можно лучше
    <ul class=listPage>
         .
         .
         .
    </ul>
    
  • Атрибуты типа (align="right") прошлый век, не надо так делать.

  • Если придерживаетесь strict mode, то не забывайте <img ... />

  • Название классов должны быть осмысленными. Никаких .comment1, .information2, .say. Также, лично я бы не стал вставлять класс .container глубоко внутри html структуры. Обычно я использую (если использую) его в качестве обёртки к чему-нибудь глобальному.

По поводу CSS:

  • Нет смысла использовать для одного элемента совместно float и display: inline-block. Float перекроет inline-block и сделает его как минимум блочным, вынесет из потока и добавит обтекание.

  • Некоторые вещи можно записать короче, например:

    background-color: white; станет background: #fff;
    
    font: 14px Times New Roman; 
    font-weight: 600;
    станет:  font: bold 14px Times New Roman;
    
    font: 16px Times New Roman;
    line-height: 2.1;
    
    станет font: 16px/32px Times New Roman;
    
    и т.д.
    
  • Если вы используете для ссылок псевдокласс :hover, то лучше будет предусмотреть и :link с :visited, но это уже от задачи зависит.

0
  1. Код нужно выкладывать на jsfiddle, так будет значительно удобнее оценить его.
  2. Проверяйте вашу страницу на нескольких разрешениях экрана. На небольших разрешениях (17" мониторы и экраны нетбуков, планшетов и телефонов) страница расползается. На широких же экранах контент по центру, а меню где-то в другой вселенной. Отсюда рекомендация: сделайте ширину контейнера фиксированной. Уж лучше иметь горизонтальный скролл на странице, чем такое убожество.
  3. Сброс параметров можно (да и нужно) делать не перечислением тегов, а звёздочкой *
  4. Забудьте уже про вендорские префиксы. В нормальных браузерах всё уже и без них работает, а для IE можно сделать отдельный стиль, подключаемый через условные комментарии.
  5. Дело вкуса, конечно, но смените шрифт.
4
  • спасибо за комментарий)
    – kamila
    11 окт 2013 в 7:02
  • "Сброс параметров через звёздочку" очень сомнительный пункт. На его основе были первые reset'ы, однако сейчас так делают реже. Лучше использовать normalize.css или другие. 11 окт 2013 в 7:54
  • а какие есть еще другие типа normalize.css?
    – kamila
    11 окт 2013 в 8:10
  • cssreset.com 11 окт 2013 в 9:33
0

Для борьбы с разными разрешениями можно использовать bootstrap. Это библиотека с написаными классами css и некоторым js кодом. Довольно всё удобно. Подключение через пару файлов. Ну а те элементы, которые нужно "по своему" просто переопределяем. Когда разберетесь - Вам самому понравится).

3
  • Бутстрап целесообразно использовать для больших проектов. также если Вы используете нтмл4 - это ненужно article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
    – soledar10
    11 окт 2013 в 7:30
  • > Бутстрап целесообразно использовать для больших проектов. Обоснуйте. Что мешает использовать его в небольших проектах?
    – fori1ton
    11 окт 2013 в 7:33
  • habrahabr.ru/post/156425 почитайте это, также я написал целесообразно использовать для больших проектов, но это не значит что его нельзя использовать для маленьких сайтов
    – soledar10
    11 окт 2013 в 7:37
0

Вот результат код в песочнице http://jsfiddle.net/qx8fU/ В левой колонке у меня нижняя строка убежала с серого фона. Ну и до кучи

Отзывы мастера Анна Герасимова

Либо у вас мастер Анн Герасимов, либо правильнее было бы написать Анны Герасимовой. Точнее

Отзывы о мастере Анне Герасимовой.

Как-то так.

1
  • это же макет, т.е текст будет меняться. Поэтому на это особо внимание не обращайте. Мне просто нужно ваше мнение о моей верстке.
    – kamila
    11 окт 2013 в 8:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.