aleksey.mrlss Posted November 2, 2014 Report Share Posted November 2, 2014 (edited) Здравствуйте! Меня зовут Алексей, я начинающий верстальщик. Это мой первый полностью сверстанный макет, и поэтому я хочу услышать по нему максимум критики и помощи. Первое, что не сходится с шаблоном, это кнопка. У нее еще должен быть 1px серый borderпо всему контуру, но я так и не смог сделать его, во всем остальном кнопка по максимуму сходится с шаблоном (в моей реальности ). В основном пытался сделать код читабельным, более менее правильным и красивым. В общем, самое главное это услышать от вас, правильный ли подход к оформлению элементов на странице у меня или нет, и почему. Выкладываю ссылку на макет и на сайт.Макет: http: //www.pictureshack.ru/images/42038_Goodware-PSD-Template.jpg (копируйте адрес, так чет переводит на главную сайта)Сайт: http://goodware.besaba.com/Goodware/ Edited November 2, 2014 by aleksey.mrlss Quote Link to comment Share on other sites More sharing options...
pangurban Posted November 2, 2014 Report Share Posted November 2, 2014 (edited) 1. Наоборот, article в section2. Элемент 'p' для параграфов!3. На начальном этапе лучше не загоняйся бэм неймингом, а придумывай подходящие имена классам. Если бэм тебе понадобится с опытом ты это поймешь.4. Зачем фон в хедере 1200x500? Делаешь 30x30 и репит. То же самое про фон слайдера и футера5. Валидатор На первый взгляд грубых ошибок не заметил. Бери шаблоны посложнее.Попробуй написать свой reset css Странности какие творятся) Edited November 2, 2014 by pangurban Quote Link to comment Share on other sites More sharing options...
aleksey.mrlss Posted November 3, 2014 Author Report Share Posted November 3, 2014 (edited) Огромное спасибо за отзыв, некоторые моменты хчоу уточнить:1. Эти article и section сбивают с толку как я понял, все правильно, только с точностью да наоборот? думал что так...ну спасибо 2. Это именно про блок в футере tweets? там у меня в <p></p> вся инфа лежит, а выделена ссылкой и спаном. Нужно сделать все отдельно? <p>, <a>, <p>?3. Где то слышал о каком то БЭМ , но писал имена классов не основываясь на нем, просто мне так удобней что-ли. Рекомендуете каждый класс не привязывать на родителя а именовать его под свою отдельную задачу?4. Посмотрел на фон хедера, так и не смог выделить повторяющийся объект, вот и решил запилить всю картинку. Приму к сведению. По поводу футера, так там простой цвет, с фона там репитится только верхний треугольник, вырезанный по размеру одного треугольника. Про слайдер то же самое, не смог выделить одинакового фрагмента 5. Про валидатор мой косяк, забыл Про reset css. Я так понял, совет написать свой reset расчитан на то, чтоб глубже вникнуть в правила css?И по поводу <br>, я так понял, надо было просто каждое составляющее комментария с твиттера оформить как отдельный элемент. Так более правильно и логично, и тогда никакие переносы не понадобятся? Буду брать макеты посложней, это был просто первый раз, я не расчитывал что и этот до конца склепаю видимо зря переживал не примите за самопохвальность если так можно сказать. Жду еще критики, очень дельные советы, спасибо! P.S. И еще, подскажите пожалуйста, как средствами css мне сделать для кнопки еще один внешний бордер. Дело в том, что у самой кнопки есть бордер+через псевдокласс я добавил еще один внешний бордер, а вот добавить бордер внешнему, который через псевдокласс добавлен незнаю как. Если родителю кнопки задать ширину и высоту, Background и бордер, все выглядет неплохо, но при увеличении/уменьшении масштаба родитель едет, при этом ломая верстку.Надеюсь объяснил проблему доходчиво. Edited November 3, 2014 by aleksey.mrlss Quote Link to comment Share on other sites More sharing options...
pangurban Posted November 3, 2014 Report Share Posted November 3, 2014 (edited) 1. Если не понимаешь, то почитай, посмотри примеры, от былды любой может нагородить.2. Тут по разному можно делать. Лично я люблю когда все семантически верно. Поэтому и говорю обратить внимание на то,что у "p" есть семантический смысл, и если какой-то блок не является параграфом, то выбираем другой элемент.3. С таким подходом, по моему, не развивается фантазия на именование классов.4. Так Свой ресет чтобы понимать дефолтные стили элементов. Edited November 3, 2014 by pangurban Quote Link to comment Share on other sites More sharing options...
aleksey.mrlss Posted November 3, 2014 Author Report Share Posted November 3, 2014 А по поводу кнопки, ничего подсказать не можете? Quote P.S. И еще, подскажите пожалуйста, как средствами css мне сделать для кнопки еще один внешний бордер. Дело в том, что у самой кнопки есть бордер+через псевдокласс я добавил еще один внешний бордер, а вот добавить бордер внешнему, который через псевдокласс добавлен незнаю как. Если родителю кнопки задать ширину и высоту, Background и бордер, все выглядет неплохо, но при увеличении/уменьшении масштаба родитель едет, при этом ломая верстку.Надеюсь объяснил проблему доходчиво. Quote Link to comment Share on other sites More sharing options...
zenw Posted November 3, 2014 Report Share Posted November 3, 2014 On 11/3/2014 at 10:50 AM, aleksey.mrlss said: А по поводу кнопки, ничего подсказать не можете? Сделайте через box-shadow, можно, например, на :after кнопки повесить тень, вот так:.button:after { box-shadow: 0 0 0 1px red;} Quote Link to comment Share on other sites More sharing options...
aleksey.mrlss Posted November 3, 2014 Author Report Share Posted November 3, 2014 к сожалению на after у меня уже весит внешний бордер, вот в это и проблема. у этого элемента в общей сложности 3 бордера Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.