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 С этого можно начать)