ar00

Поделитесь ссылкой на стандарты, если таковые имеются. И парой ссылок на профессиональные css файлы, или сайты с которых стоит брать пример в оформлении css

/*-->>Designed by OctoberStudio, do not modify<<--*/ @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Sans+Narrow:400,700|Istok+Web:400,700,400italic&subset=cyrillic,latin); *{ margin:0 0; padding:0 0; font-size:100.01% } * img{border:0px} * a:active{background:#f94c9b; color: #fff !important} body, html{min-height:320px; color: #fff} body a{color: #fff} header{ position:absolute; padding:20px 00px 0; z-index:1 } header img, .logo-mp{ width:175px; height:60px } header a:active{background: none} #wrap{ min-height:100%; height:auto !important; height:100%; position:relative; overflow:auto } #backstretch{background-color:#111} .inner-page a{ color:#fff !important; background:#450828 } .inner-page a:hover{color:#000 !important} /*———————general properties———————*/ body, html, .index, .wrapper, #blog-container, #contacts, #page404{ width:100%; height:100% } .wrapper, #humb-tray-wrap, #thumb-tray, ul#thumb-list li, .carousel .preview, #blog-container article, .comment p, #about-wrap, #contacts, #feedback .row, footer menu{ overflow:hidden } body, html, #humb-tray-wrap, footer{ min-width:480px; } #blog-container article, .comment p, #about p{ font:0.75em/1.25em 'Calibri', sans-serif } #photo-nav, #about-nav{ font:0.6875em 'Arial', sans-serif } /*———————index———————*/ .index{ margin:0 auto; position:fixed } .index .child{ position:relative; width:210px; height:210px; margin:50px auto; z-index:1 !important; border:1px solid rgba(255,255,255,.45) } .logo-mp{ position:absolute; right:0px; bottom:50px; z-index:100 } .wrapper{ position:relative; display:block } .wrapper span{ position:absolute; width:100%; display:block; z-index:1; margin:190px 0 0 -20px; padding:0px 8px 2px 0; direction:rtl; font:18px 'PT Sans Narrow', sans-serif; background:#000 } .wrapper img{ height:305px; width:305px; position:absolute; margin:-50px 0 0 -50px; z-index:0 } .child > a{text-decoration:none} /*different bg for each category*/ .about{background:url(../images/index/about-bg.png) repeat-x !important} .resources{background:url(../images/index/resources-bg.png) repeat-x !important} .blog{background:url(../images/index/blog-bg.png) repeat-x !important} .photo-bg{background:url(../images/index/photo-bg.png) repeat-x !important} .video-bg{background:url(../images/index/video-bg.png) repeat-x !important} /*end different bg for each category*/ .index .child:nth-child(1), .index .child:nth-child(14), .index .child:nth-child(27){left:-898px;top:-5px} .index .child:nth-child(2),.index .child:nth-child(15),.index .child:nth-child(28){left:-599px;top:-267px} .index .child:nth-child(3),.index .child:nth-child(16),.index .child:nth-child(29){left:-301px;top:-529px} .index .child:nth-child(4),.index .child:nth-child(17),.index .child:nth-child(30){left:-3px;top:-791px} .index .child:nth-child(5),.index .child:nth-child(18),.index .child:nth-child(31){left:295px;top:-1053px} .index .child:nth-child(6),.index .child:nth-child(19),.index .child:nth-child(32){left:593px;top:-1315px} .index .child:nth-child(7),.index .child:nth-child(20),.index .child:nth-child(33){left:891px;top:-1577px} .index .child:nth-child(8),.index .child:nth-child(21),.index .child:nth-child(34){left:-749px;top:-1690px} .index .child:nth-child(9),.index .child:nth-child(22),.index .child:nth-child(35){left:-450px;top:-1952px} .index .child:nth-child(10),.index .child:nth-child(23),.index .child:nth-child(36){left:-152px;top:-2214px} .index .child:nth-child(11),.index .child:nth-child(24),.index .child:nth-child(37){left:146px;top:-2476px} .index .child:nth-child(12),.index .child:nth-child(25),.index .child:nth-child(38){left:444px;top:-2738px} .index .child:nth-child(13),.index .child:nth-child(26),.index .child:nth-child(39){left:742px;top:-3000px} .index .child:nth-child(14){top:-3113px} .index .child:nth-child(15){top:-3375px} .index .child:nth-child(16){top:-3637px} .index .child:nth-child(17){top:-3899px} .index .child:nth-child(18){top:-4161px} .index .child:nth-child(19){top:-4423px} .index .child:nth-child(20){top:-4685px} .index .child:nth-child(21){top:-4797px} .index .child:nth-child(22){top:-5060px} .index .child:nth-child(23){top:-5322px} .index .child:nth-child(24){top:-5584px} .index .child:nth-child(25){top:-5846px} .index .child:nth-child(26){top:-6108px} .index .child:nth-child(27){top:-6220px} .index .child:nth-child(28){top:-6483px} .index .child:nth-child(29){top:-6745px} .index .child:nth-child(30){top:-7007px} .index .child:nth-child(31){top:-7269px} .index .child:nth-child(32){top:-7531px} .index .child:nth-child(33){top:-7793px} .index .child:nth-child(34){top:-7905px} .index .child:nth-child(35){top:-8168px} .index .child:nth-child(36){top:-8430px} .index .child:nth-child(37){top:-8692px} .index .child:nth-child(38){top:-8954px} .index .child:nth-child(39){top:-9216px} .index .child:nth-child(40){top:-9478px; left:1040px} .index .child:nth-child(41){top:-9590px; left:-898px} /*———————photo & portfolio———————*/ /*photo navigation*/ #prevslide, #nextslide{ position:fixed; height:43px; width:43px; top:45%; margin-top:-21px; z-index:1000 } #prevslide{left:15px; background:url(../images/back.png)} #nextslide{right:15px; background:url(../images/forward.png)} #prevslide:active, #nextslide:active{margin-top:-19px} #prevslide:hover, #nextslide:hover{cursor:pointer} #slidecounter{font-size:48px} #photo-nav menu li, #about-nav li{margin:0 1em 0 0} #photo-nav a:hover, #about-nav a:hover{text-decoration:underline} #photo-nav menu li:last-child:after, #about-nav li:last-child:after{content:''!important} #photo-nav{ width:100%; position:fixed; bottom:30px; z-index:2 } #photo-nav menu, #slidecounter{margin:0 15px 5px} #photo-nav menu li, #about-nav li, footer menu li{ display:inline-block; text-transform:uppercase } #photo-nav a, #about-nav a{text-decoration:none} #photo-nav menu li:after{ content:url(../images/disk.png); margin-left:0.85em; display:inline-block } #humb-tray-wrap{ width:100%; background:url(../images/photo-bg.png) repeat; padding:10px 0; text-align:center; line-height:1px } #thumb-tray{ max-width:70%; margin:0 auto; display:inline-block } .button-left, .button-right{ width:26px; height:80px; display:inline-block; vertical-align:top } .button-left{ background: url(../images/left.png) no-repeat 50%; margin:10px 20px 0 0 } .button-right{ background: url(../images/right.png) no-repeat 50%; margin:10px 0 0 20px } .button-left:hover, .button-right:hover{cursor:pointer} #show-hide{ position:absolute; font-size:16px; cursor:pointer; margin:10px 0 0; right:15px; z-index:500 } ul#thumb-list{ display:block; list-style:none; position:relative; left:0px; padding:0 0px; height:90px } ul#thumb-list li{ list-style:none; display:block; margin-right:15px; float:left; max-height:90px; width:150px } ul#thumb-list li img{ width:150px; height:auto; } ul#thumb-list li:hover{cursor:pointer} .portfolio-humb-tray{background:url(../images/portfolio--bg.png) repeat !important; } /*—————————video————————*/ #video{ max-width:640px; margin:120px auto 0; padding:0 20px 250px; position:relative } #video h1{ color:#efdddd; text-transform:uppercase; letter-spacing:1px; font:24px 'PT Sans Narrow', sans-serif } #video iframe{ width:100%; height:360px } #video #comments{padding:80px 0 0 0 !important} .video-humb-tray{background:url(../images/video-bg.png) repeat !important} .carousel{ max-width:70%; margin:0 auto; display:inline-block } .carousel li{ width:140px; margin:0 25px 0 0; text-align:left; padding:5px } .carousel img{ height:95px; display:inline-block } .carousel span{ margin:5px 0 0; display:block; line-height:12px } .carousel .preview{ width:140px; height:95px; background:#000; text-align:center; } .carousel .current-video{ background:#fff; color: #000 } /*—————————resources————————*/ #resources{ position:relative; margin:120px 0 0; padding:0 0 0 10px } #resources{max-width:800px} #resources span{ font:1.5em 'PT Sans'; background:#fff; line-height:2em } #resources a{ color:#000; text-decoration:none; margin-right:30px; padding:0 0.3125em } .facebook:hover{background:#141c5d} .vkcom:hover{background:#597DA3} .youtube:hover{background:#c4302b} .geo:hover{background:#58999b} .google:hover{background:#C3553C} .twitter:hover{background:#6ECFEF} .spring:hover{background:#3f88cb} .facebook:hover , .vkcom:hover, .youtube:hover, .geo:hover, .google:hover, .twitter:hover, .spring:hover{color:#fff !important} /*—————————blog————————*/ #blog-container{ position:relative; margin:120px 0 0; padding-bottom:80px; overflow:auto } #blog-container > div:first-child{border-top:1px solid #000} #blog-container > div, #pagination{ position:relative; padding:25px 0 25px 20px; border-bottom:1px solid #000; text-transform:uppercase } #blog-container > div:hover{cursor:pointer} #blog-container div, #pagination, #blog-container div h2, .comment > .name, #comments .form{font:1em 'PT Sans Narrow', sans-serif} #blog-container div h2, .comment > .name, .comment > p{margin:0 0 0 50px} .date{font:.625em 'PT Sans Narrow', sans-serif; margin:.56em 0 0; position:absolute} #blog-container article, .comment p{ max-width:760px; text-transform:none !important; margin:10px 0 0 50px; padding:0 20px 0 0; display:block } #blog-container > div article{display:none} #blog-container article p{margin:10px 0 0} .show-more, #comments .button{ display:block; float:right; margin:20px 0 0; text-decoration:none; background:url(../images/show-more.png) repeat-x; padding:12px 15px 12px 15px; border:1px solid #011a21 } a.show-more:active{ background:url(../images/show-more-h.png) repeat-x; border: 1px solid #011116 } .current-article, .current-article:hover{cursor:pointer !important} #pagination{padding:25px 0 25px 70px} #pagination li{ display:inline-block; margin:0 10px 0 0 } #pagination > li a{ padding:3px 12px 5px; display:block; text-decoration:none } #pagination > .first{margin:0 0px 0 25px !important} /*blog-inner*/ #blog-article{ float:left; padding:0 15px } #blog-article article{margin:0.5em 0 0 !important} #blog-article p{margin:1em 0 0} #blog-article h1{ font:28px 'PT Sans Narrow', sans-serif; text-transform:uppercase } .blog-nav, .comments-title{ list-style:none; font:1.125em PT Sans Narrow, sans-serif } .blog-nav{float:left} .blog-nav li{ display:inline-block; margin:50px 35px 0 0 } .blog-nav a{text-decoration:none} .blog-nav a:hover{text-decoration:underline} .date-big{ font:100px Arial, sans-serif; display:block; float:right } /*—————————about————————*/ #about{ margin:12% 0 0; position:relative; padding:0 0 50px 15px } #about p{margin:1em 0 0} #about p:first-of-type{margin-top:25px !important} #about-nav{ width:100%; z-index:2; margin-top: 135px; color:#f46924 } #about-wrap{ width:5000px;/*——————————————————————————-*/ } .about-text{ position:relative; width:790px; height:400px; float:left; margin:5px 20px 0 0; padding:20px 40px 20px 20px; overflow:auto } .about-text h1{font:28px 'PT Sans Narrow', sans-serif} #about-nav li:after{ content:url(../images/disk-about.png); margin-left:0.85em; display:inline-block } /*—————————contacts————————*/ #contacts{ margin:120px 0 0px 15px; position:relative; color: #000; } #contacts section{ font:bold 0.75em 'calibri', sans-serif; float:none; margin:0px auto; letter-spacing:0px } #contacts-photo{ position:absolute; bottom:0; max-width:30%; max-height:30% } #links{ float:left; position:absolute } #links ul{ width:160px; list-style:none; text-transform:uppercase; margin:0 0 50px 0 } #links ul li:first-of-type, .feedback-title{ border-bottom:1px solid #000; margin-bottom:10px } #links a{ color:#000; text-decoration:none } #links a:hover{text-decoration:underline} #links #facebook:hover a{color:#141c5d !important} #links #vkcom:hover a{color:#597DA3 !important} #links #twitter:hover a{color:#6ECFEF !important} #feedback{ position:relative; width:35%; max-width:400px; right:0px; padding:0 0 0 20px } #feedback .row{ margin:0 0 10px 0; padding:0 1px 0 0 } #feedback .feedback-title{text-transform:uppercase} #feedback input , #feedback textarea{ display:block; width:99%; padding:7px 0px; border:1px solid #000; font:12px 'Arial', sans-serif; min-width:150px } #feedback textarea{ resize:none; min-height:70px } #feedback .button{ width:130px !important; margin-top:20px; font:normal 1em 'Calibri', sans-serif; float:right; background:#000; color:#fff; text-transform:none } #feedback .button:hover, #comments .button:hover{ cursor:pointer; border:1px solid #000; background:#fff; color:#000 } #feedback .button:active, #comments .button:active{ cursor:pointer; background:#fff; color:#000; border:1px solid #000; margin:21px 0 0 } .error{border:1px solid #ff0000 !important} label.error{border:none !important} label.error,.errorMessage{color:#ff0000} .errorMessage{font:italic 1em 'Calibri', sans-serif} /*—————————footer————————*/ footer{ background:#000; position:fixed; left:0px; /*For correct position*/ bottom:0px; /*For correct position*/ width:100%; z-index:3; height:30px; margin-top:-30px; font:9px 'Arial', sans-serif; letter-spacing:0px !important } footer a, footer{text-decoration:none} footer a{display:block} footer img{ width:26px; height:26px; display:block; float:left } #copy{ float:left; position:absolute; margin:4px 0 0 15px } #copy span{margin-left:6px} #copy a:hover{text-decoration:underline} footer menu{ text-align:center; height:30px; min-width:500px } footer menu li{ height:100%; margin:0 1px 0 } footer li a:hover, .current{ color:#000; background:#fff } footer li a:active{background:#f94c9b} .current, footer li a{ padding:10px 10px 5px; height:100%; } /*——————-404 page—————*/ #page404{ font:16px 'Arial', sans-serif; position:absolute; background:#333 } #page404 div{ margin:150px auto 0 auto; padding:0 0 50px; width:400px } #page404 div span{font-size:200px} #page404 a{color:#d94207} /*—————————comments————————*/ #comments{ padding:80px 0 0 15px !important; clear:both; max-width: 760px } #comments div:hover{background:none !important} #comments > .form{ margin: 50px 0 0; } .comment{ margin: 20px 0 0; padding: 0 0 25px 0 } .comment, .comments-title{border-bottom: 2px solid rgba(255, 255, 255, 0.1)} .comments-title{padding: 0 0 10px 0} #comments .row{margin: 15px 0 0} #comments .form .comments-title{border-bottom: none !important} #comments input, #comments textarea{ display: block; background: rgba(255, 255, 255, 0.25); padding: 7px 3px; border: none !important; font: 12px 'Arial', sans-serif; color: #fff; min-width: 300px } #comments textarea{ width: 100%; height: 100px; resize: none } #comments .button{ font-size: 11px; min-width: 80px !important; cursor: pointer; float: right; background: #000 } /*—————————preloader————————*/ #container{width:960px; margin:0px auto; } .preloader{ background: url(../images/89.gif) center center no-repeat #ffffff; display: block !important; }

Либо первый, либо пятый на белом фоне с жёлтой полоской.

1. <section> не предназначен(семантически) для использования в качестве врапов или визуального разбития сайта на секции, как у вас. Для этих целей существует <div>. 2. бессмысленно использовать <header> в качестве контейнера для одного лишь логотипа. 3. Бессмысленно и не семантично использовать <a> без href в качестве кнопочек. Как, например, у вас сделанны кнопки навигации в слайдере. 4. <menu> использовано не по назначению - _http://forum.htmlbook.ru/index.php?showtopic=36592 5. абсолютно не понятная логика использования вами тега - <article> 6. сомнительное использование <footer> Допустим, ну хоть синтаксическую ошибку(";") там исправьте. Или удалите, они-то(стили) у вас даже не работают) Спасибо за замечания - учту.

... <menu id="about-nav" style="position: fixed !important margin: -20px 0 0 0;"> ... <header> <a href="/"><img src="/images/logo.png" alt="Anastasia Barashkova" title="На главную страницу"></a> </header> <header> <a href="/"><img src="/images/logo.png" alt="Anastasia Barashkova" title="На главную страницу"></a> </header> 1) Можно подробнее? 2) ... 3) CSS ещё не до конца оптимизирован, связано это было с его дальнейшим редактированием. Согласен, многие свойства ещё можно сгруппировать, сделать более читабельным и удобным. 4) Библиотека UI будет использована для страницы "обо мне". 5) ... 6) а) Временное решение. б) Говорил программеру, который натягивал на CMS о данном косяке, но, как видим, он проигнорировал этот косяк.

"сильно любим наших клиентов" - Я чуть не заплакал когда увидел (посмотрите на "title" слова "любим" на нашем сайте).

На Барашковой застрял? Особенность нашей "тестовой версии" - не готов логотип, нет возможности комментировать блоги, фотографии находятся на стадии утверждения, скрыт один раздел. В готовности уверены на 99,8%. Если ты скажешь, например, что на сайте опечатка в нижнем меню - Я тебе скажу "Спасибо". 1) Несколько непривычно, согласен. Но это скорее функциональная особенность - на страницах "портфолио" и "фотографии" необходимо как можно больше свободного пространства для отображения фотографий. 2) Хм... Изначально задумка была такова: "Об их существовании догадается 1 из 10, так что пусть будут как "бонусный" элемент для самых любопытных". Но если это вводит пользователя в заблуждение (Блоки дублируют меню в футере).... Подумаем над тем что бы вообще убрать эти ссылки.. 3) Спасибо, учли - скорее всего вставим другую фотку. 4) Прерогатива заказчика. 1) В данный момент ведутся работы над новым проектом, который по концепту отличается от предыдущих работ. Но, за замечание, Спасибо. 2) Иногда случается, что попадаешь в ловушку, поскольку многие клиенты идут за определённым стилем. Спасибо. Постараемся ещё сильнее ужать картинки. Спасибо.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul > li > ul:first-child:before{ content: "+"; color: red; position: absolute; margin: -20px 0 0 -55px; } ul > li {list-style: none;} </style> </head> <body> <ul> <li>1</li> <li>2 <ul> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ul> </li> <li>3</li> <li>4</li> <li>5 <ul> <li>5.1</li> </ul> </li> <li>6</li> </ul> </body> </html> Через одно место, но работает Сохрани в html файл. P.S. ":first-child" на случай, если у родительского li будет больше чем 1 дочерний ul. В данной конструкции его можно убрать и всё будет работать.

1) Шрифт в заголовках слишком сжат. 2) Как то не очень хорошо "пришито": 3) Лучше выравнивать заголовки по левому краю. 4) Как сказано выше - "поиск" и "архив" нужно поменять местами. Так же, Я бы изменил для них шрифт. 5) "Статья полностью" - лучше так и написать. 6) а) Кривой шов, везде в разных местах относительно заголовка и на половине "статья полностью". б) Везде разное расстояние. в) Лучше выровнять по левому краю. 7) Не переноси так "Читать далее": 8) Слишком однотонная, скучная цветовая гамма. Добавить бы цвета. Контраст. 9) Этот вариант дизайна хуже чем предыдущий, потому что он менее информативный. Нет разделов, никакого разбиения на категории. 10) Не нравятся input - нужно сделать цветом, отличным от фона. 11) Кроме как title "наверх", для полоски справа можно сделать при hover другой цвет.

Это к чему здесь? 9) Общее впечатление - очень *****, прям ***** как *****. Такое ощущение что сайт был создан школьником, учащимся в 7-ом классе. Если вы такой профессионал - попробуйте сами открыть какое-то дело при минимальном бюджете. А где же ваш сайт? Покажите, как надо?

9) http://forum.htmlbook.ru/index.php?showtopic=37398 http://forum.htmlbook.ru/index.php?showtopic=39164

Адрес: barashkova.pro Что требуется оценить: дизайн, вёрстка, юзабилити. Кратко о сайте: сайт модели/телеведущей, Анастасии Барашковой. Целевая аудитория: поклонники модели/телеведущей, агенты модельных агентств, а так же потенциальные работодатели в сфере шоубизнеса. На что не обращать внимания: логотип, на главной странице не работают некоторые ссылки. Это тестовая версия сайта. Всем спасибо.

1) Автор, что такое "css сптайты"? 2) "использование табличной верстки только при необходимости" - что же за необходимость? Это когда у верстальщика руки кривые? 3) Просто слов нету, как такое можно было сотворить? 4) Автор, в твоём понимании термин "интерактив" - это когда при наведении на ссылки всё "прыгает"? 5) a) Что за отступы у второй строки текста? б) Развалилось. в) Почему такой громадный трекинг. г) Размещая данный опрос на своём сайте, ты ставишь под сомнение свои возможности, навыки, профессионализм. Так зачем же мне у такого человека заказывать что-либо? 6) Полное непонимание термина "дизайн". 7) Автор, у тебя на сайте говориться что получим чистый код на выхлопе. Это на столько же чистый как и код твоего сайта? 8) Интересный выбор имён классов: .widget, .vidget, .blok. 9) Общее впечатление - очень *****, прям ***** как *****. Такое ощущение что сайт был создан школьником, учащимся в 7-ом классе.

Мы делаем отдельные стили: style.css - включает в себя свойства, которые поддерживаются всеми браузерами. style-modern.css - css3 + свойства с вендорными префиксами. style-ie.css - IE7, IE8. Если требуется, на js дописывается костыль под IE, а также свойства типа "transition" под IE9.

Тут есть несколько "кривоватых" переводов - http://hugger-mugger.ru/blog/typography/ Хорошая книга по типографике - http://rutracker.org/forum/viewtopic.php?t=3484856 С этого можно начать)

Выбор гарнитуры - полный ******. Автор, изучай - http://www.smashingmagazine.com/tag/typography/. Размер шрифта слишком велик, если переживаешь за тех, у кого слабое зрение - укажи размер в em. Я в firebug отключил твой шрифт (следовательно начал использоваться Times New Roman) и уменьшил размер до 16px - стало значительно лучше. На внутренних страницах асайд криво работает. И опять типографика... Смотришь на заголовки и плакать хочется. Интересная особенность студии - если читать на русском, то минимальная стоимость интерактивного сайта 4500грн. ($560), а если же читать на английском то стоимость $4500. Лучше не употреблять слово "минимальный", используй "начальная стоимость", или что то в таком духе. Тел.: 063-27-64-421 ......... http://www.artlebedev.ru/kovodstvo/sections/91/ - Ты ведь дизайн делаешь? "Так что, если что - ждем ваших заявок. Для вашего сведения, список языков не особенно ограниченый." - тексты хромают. Что-то с текстом при ресайзе, а так же что за дырка? И вопрос к автору - что такое "креативный сайт"?

Article - блочный элемент. Разреши обтекание слева - float:right;

Что значит "зачем использовать старое"? Это вы уже хотите сказать, что разметка документа должна состоять из html5 тегов? HTML5, по большей части, несет в себе дополнительные теги, расширяющие семантику документа. Более того, их не особо рекомендуют использовать непосредственно для разметки и стилизации. Так что же устарело, кроме доктайпа? Я хочу сказать что нужно стараться идти в ногу со временем. Следует использовать те возможности, которые нам предоставляет html5. P.S.:Есть отдельные личности, которые до сих пор верстают таблицами...

Моя точка зрения такова - зачем использовать старое, если можно использовать новое. Это приносит дополнительный опыт (как минимум). Тем более что в ближайшие годы html5 будет практически везде использоваться. Можно выразиться так: "вёрстка на будущее".

А зачем нужны другие доктайпы (кроме частных случаев)? Почему странно, если это список тизеров? Чем его еще делать? Я к тому что если используешь DOCTYPE html, то можно использовать и HTML5 разметку - она понятней, удобней, современней. Тем более что автор предоставляет услуги по вёрстке сайтов... Не оптимизированный CSS и то что автор не использует html5 теги плохо повлияют на его репутацию как верстальщика. Да ещё и не проходит валидацию W3.org - Result: 33 Errors, 2 warning(s). В данном случае, Я бы сделал список тизеров с помощью <div>. Так же в firefox скроллер начал себя очень странно вести, и во всех браузерах наблюдается "волшебная полоска" справа.

Действительно, ой: По поводу стилей - css можно было бы сделать в 1.5 - 2 раза короче. Лучше не используй названия цветов типа "black, white". И используй общие свойства типа "font", "background". А также группируй одинаковые свойства, например: .blog-nav li:first-child:before{content: url('../images/blog-back.png');} .blog-nav li:last-child:after{content: url('../images/blog-forward.png');} .blog-nav li:first-child:before, .blog-nav li:last-child:after {opacity: 0.5; margin: 0 5px 0 2px; } .blog-nav li:first-child:hover:before, .blog-nav li:last-child:hover:after {opacity: 1 !important;} .b-header { background: black; /*лишнее - убери*/ background: rgba(0, 0, 0, 0.6); overflow: hidden; color:white; width:100%; position: fixed; z-index:10; top:-67px; } .b-header__logo { font-family: "Source Sans Pro", serif; font-size:20px; display: block; -webkit-text-shadow: 1px 1px 1px black; -moz-text-shadow: 1px 1px 1px black; text-shadow: 1px 1px 1px black; float: left; margin:6px 0 5px; color:white; text-decoration: none; } По поводу вёрстки - <!DOCTYPE HTML>, и ни одного HTML5 тега.. <ul class="b-works__list"> - делать через ul, с моей точки зрения, странно. IE 7-8 нужен фон прозрачной картинкой

http://normativ.org/study/distance-learning Не удобно что список разделов библиотеки пропадает (если это не косяк) в подразделе. На странице http://normativ.org/articles/0006 в конце статьи идёт надпись "поставьте оценку данному файлу".. Слово "файл" лучше заменить на статья или же публикация. Непонятное положение полоски относительно кружка - поправьте: Pagination - Страница 1 из 19 (найдено: 364 ) 1 2 3 4 5 ... Найдено 364 чего? Непонятно. Нужно добавить кнопочки "первая", "последняя". Ой, Я вначале подумал что разделы библиотеки сделаны деревом, а на самом деле они сделаны магическим образом - лучше дерево, ИМХО. Так же выше уже говорили про внутреннюю тень.... Лучше избавиться от неё - ужасно выглядит.

Например так: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div style="width: 500px; height:500px; background: red; position: relative;"> <img src="2.jpg" style="width: 100px; height:100px; position:absolute; right:0; top:0; z-index:1"> <p style="position:relative; z-index:2"> Текст находится над картинкой.Текст находится над картинкой.Текст находится над картинкой.Текст находится над картинкой. </p> <p style="position:relative; z-index:0"> Текст находится под картинкой. Текст находится под картинкой.Текст находится под картинкой.Текст находится под картинкой. </p> </div> </body> </html>

Хм... По поводу перевода хз) Нужно заморачиваться, смотреть как будет лучше. Можно и фиксированные размеры сделать - в каждом отдельном случае нужно делать по своему. Кстати, не хорошо делать картинку над текстом, текст невозможно выделить.