Вот: http://jsfiddle.net/cmnw3j3s/ Туда не получается все вставить, так что вот архив http://rghost.ru/private/6PCzP5pq5/9c5b64fd87f33a6650712a99ad3d1313 Хотел бы что бы оценили по: 1. семантике, надо ли что то менять? 2. названия классов, говорят надо называть правильно и есть стандартные для некоторых ситуация, у меня правильно? 3. 34 строка main.css, мне пришлось делать псевдоэлементом, clearfix не получается, скажите: 3.1 Так нормально вообще? 3.2 Если нормально, то как исправить все на странице shop (в архиве, как на jsFiddle сделать пару страниц не знаю) а то там же тоже будет все плыть (точнее уже заголовок не правильно стоит) тоже создавать классы и делать им псевдоэлемент? 3.3 Как правильно все таки пользоваться clear. Пробовал и в родительском элементе и в низу доп. элемент с clear both, но не получается, как правильно то, уже 3 день не могу вникнуть? Пожалуйста помогите, писал в других местах, не кто не хочет объяснять! Ну и если еще есть замечания, пишите. P.S. В файле css немного брадка, как и в названии классов (то через тире, то слитно) это я пока выбираю себе стиль, смотрю как удобнее и т.д.
Вот добавил сайт на хостниг, что бы удобнее было http://primer-primer.esy.es/shop.html + еще вопроы 1. Почему в header плывет заголовок с меню, в "магазине" если смотреть с хрома? 2. Я же загрузил на хостинг сайт, почему же не корректно в лисе отображаются шрифты с гугл фонтс? 3. В вкладке "магазин", между ползунком и ценой в инпутах стоит марджин боттом и из-за этого разрыв, как его убрать?
У меня нормально Roboto отображается (Firefox 41, Ubuntu 14.04). Главное, чтоб по названию класса было понятно назначение блока, либо назначение класса (если класс нужен для дополнительной стилизации, например, сделать весь шрифт в блоке курсивом и т.д.). Есть несколько названий, которые в основном используются в id, а не в классах, назначение которых стало общепринятым стандартом (header, footer, wrapper, container). Это свойство действует только на текущий элемент и указывает на способ его обтекания. Его поведение зависит от габаритов и положения элемента, к которому свойства применяется, а так же от положения, габаритов и css свойств его соседей. Наибольшее влияние на него оказывает float. Как маржин убрать? Удалять пробовали?
Ну вот у меня в header есть блоки с float, я писал класс в header clearfix, а в css, давал clear both. И элементы в main, все равно не видели это и выстраивались под ним (так же прописывал и main и footer и они все равно не реагировали). Потом пробовал перед закрытием header, делать пустой элемент и ему тоже? clear both, не помогло, хотя в курсе и так и так делают, а у меня то что не так? Помогает только псевдоэлемент! Да нет же, мне нужно расстояние между ними, но марждин разрывает страницу (что бы понять, что я имел в виду перейдите на сайт во вкладке магазин и увидете) как это исправить?
Я видел, потому и не понял. Ответ ведь очевиден и не требует глубоких познаний в вёрстке: надо задавать фон не у каждого блока в отдельности, а у wrapper. Не вижу там нигде никакого clearfix. Кстати, у вас главная страница пропала.
У меня работает, сервер наверно тупит, говорят он не очень хороший (как в прочем и все бесплатные) Ну так не сработало и я поменял опять на псевдоэлемент, написал же про это в первом сообщении, но если вы не верите что я пробовал, давайте опять помеяю и увидете. Я исходил из того, что когда трудная верстка будет и мне нужен будет свой цвет для header, footer, main. И допустим надо все центровать, а в wrapper будет картинка? как например на сайте киного --- Добавлено, 9 окт 2015 --- P.S. поствил clearfix для header и main (пробовал и для болков в main раньше тоже не работало) вот все и полетело, в css правило для clearfix поставил перед стилями для header.
Нет, у меня в тот момент 404 было. Сейчас всё работает и не тупит. Там тупить нечему, это ж чистый html. Мне не нужно верить, мне нужно видеть. Я не могу ничего посоветовать, если не вижу, что не работает. Я не могу понять, зачем вы используете clear: both; там, где используете. header, footer, main - это блоки на всю ширину, они и так не обтекаются. Для подстраховки можно задать им ширину 100%. А плывёт всё потому, что вы пренебрегаете overflow: hidden; Без этого свойства у блоков нет стенок, только сквозные рамы, потому контент и выползает при возможности.
Я имел в виду сам их сервер. (хостера) Писали люди что у них на работающей странице 404 иногда появляется. Ну вот, а я думал что надо так, что бы все нормально отображалось. Если вам не трудно, напишите куда и как надо было ставить clearfix (или что то другое) что бы все нормально было. Да и вообще что бы вы советовали поменять и можно ли как то решить ту проблему: И вообще как я сделал псевдоэлементом after, это нормально или не профессионально так делать? Я хочу понять на будущее как мне то писать? Да уж, начал его вставлять "overflow: hidden" и у меня часть пропадает. Правила вроде выучил, а правильно применять пока не получается. :(
--------------------- update --------------------overflov hidden и padding-bottom сделали чудо http://primer-primer.esy.es/shop.html Еще раз спасибо Dotrox
1. https://validator.w3.org/nu/?doc=http://primer-primer.esy.es/shop.html 2. http://prntscr.com/8pu2y9 3. <header class="clearfix"> - ни разу не видел такого применения стилей 4. Зачем на h1 вешать класс? 5. Это по людски обернуть нужно, а не <br/> ставить http://prntscr.com/8pu3o3 6. Нет дополнительного атрибута http://prntscr.com/8pu4az 7. http://prntscr.com/8pu4wx 8. http://prntscr.com/8pu52m 9. http://jigsaw.w3.org/css-validator/...ng=0&uri=http://primer-primer.esy.es/main.css Резюмируя: Оценивать верстку сложно, т.к. ничего еще не готово к оценке. На данный момент ошибки все выше. Нет единого стиля верстки, нет блочного логического понимания верстки. Читать css код очень сложно.
alex_storm, Спасибо за такую критику, вот это конечно плохо: Посмотрел пока один курс, надеюсь после просмотра других и еще практики исправлю это. Английский не очень знаю, по строчкам конечно понятно что больше всего ругается на role, но его lynda советует использовать. А чем плохо вот это не понял img src="img/icon-vk.png" то что alt нет что ли? Так как я не знаю JS вот и не работает, а в курсе что на css это можно сделать, не говорят! Хе-хе, вот и я не знал почему это не работает, меня Dotrox попросил вернуть как я ставил, вот я и опять поставил, но что это не работает понял уже пару дней назад! Так как в вкладке "Магазин" надо очень большой заголовок, а в других местах я думаю такой не понадобиться. Как? В html 5 можно же так или я ошибаюсь? Так как я пока h3 не использовал и он на других страницах нужен будет (а может и нет, там посмотрим) ОК Большинство ошибок что нет в css 2.1, ну так я 3 использовал или мне нельзя ставить ::after, opacity, :checked, :nth-child и т.д.? То что не единого стиля, где одно правило или легко разобрать, в глоабльных например, делал в одну строку. Может не правильно (и где то было в одну строку не с одним правилом, это да) тогда буду все расписывать на несколько строк и отдельно для себя копия как мне удобно.
На самом деле не всё так плохо, если валидировать по CSS3: http://jigsaw.w3.org/css-validator/...usermedium=all&warning=1&vextwarning=&lang=en Но задавать вес шрифта числами нельзя: у шрифта может не быть версии именно с такой толщиной. Отсутствие пробелов между атрибутами. Мозилла этот тег даже в исходном коде подсвечивает красным. Всё, что там можно было на CSS сделать, вы уже сделали. Без js этот ползунок работать не будет. Там не чему работать. Как я уже написал выше, clear: both; бессмысленно использовать для блоков на всю ширину. Спецификация HTML5 рекомендует использовать type. Кроме того, он гарантирует, что браузер правильно поймёт содержимое файла. Обычно, паддинг используется только когда надо увеличить объём элемента, а для отступов всегда используется маржин. Кстати, это же касается гигантских паддингов по бокам блоков контента. В процессе вёрстки всё нужно разбивать на отдельные строки. При выкате в продакшн можно минифицировать файл и подключить такую версию. Если вёрстка делается на заказ - всегда разбивка на строки и никакой минификации. Дальше сами разберуться.
Фух, ну хорошо что более менее нормально, а то alex_storm так написал, как будто я вообще зря за верстку взялся Ну и по всему остальному спасибо, буду знать. Может alex_storm и прав, что рановато выложил на оценку, но я хотел знать в правильном ли направлении я иду. Так как переучиваться сложнее, чем начать заново пока не поздно. Как я понял иду правильно, но с ошибками, а так как все их делают в начале обучения, думаю не чего страшного. ----------------- update ------------------- Поменял padding на margin и вот что получилось http://primer-primer.esy.es (а мне надо именно что бы сбоку был отступ, как раньше)
Не надо тут Я написал по реальным замечаниям, которые мелкие) Но они ж то есть.... header, main, footer { margin: 0 160px; } Странный стиль. Есть же родитель. Зачем присваивать дочерям такие стили? Вот так кстати симпотнее http://prntscr.com/8q4gzf Если нужен отступ от внешнего края к внутреннему, то только padding .
Вижу, вы не визуализируете вёрстку в голове, иначе б такие вопросы не возникали. У вас есть wrapper (кстати, это лучше сделать id, а не классом), добавьте ему белый фон. А у header и footer должен быть дополнительный вложенный контейнер с нужным фоном. Вообще, такие блоки должны быть двойными: внешний контейнер на всю ширину и внутренний, нужной ширины. А общая обёртка (сейчас это wrapper) немного лишняя. Её отсутствие делает вёрстку намного более гибкой.
По моему не очень что есть пустое место справа, может и для большинства так лучше будет, а мне не очень. Ну если справа там виджеты или меню или еще что то, то другое дело. Ну общую картину да, сложно пока, но отдельные детали во время работы пытаюсь. Спасибо за подсказку, возьму на вооружение и попытаюсь в следующем проекте сделать (если он это будет подразумевать) А я думал наоборот так не надо, типо слишком много лишних блоков это плохо + как бы одним блоком задал ширину, подумал так лучше. И еще вопрос тогда по такой схеме с двойными контейнерами, допустим для шапки (ну и соответственно для main и footer) делать внешний блок div а внутренний header (main, footer) или наоборот, для семантики? Так как по урокам lynda я понял что если хочу быть профессионалом, надо не только ставить блоки правильно для их обработки css, а и хорошая семантика важна!
Плохо. Но тут вопрос рациональности. В данном случае, один лишний тег на каждую часть страницы даст много преимуществ. Наоборот. Семантические блоки должны быть на самом высоком уровне. Не стоит полагаться на уроки. Очень часто их делают как раз не профессионалы. В данном случае, профессионал - это тот, кто зарабатывает вёрсткой. а не обучением вёрстке (и так в любой сфере). Вот здесь можно почитать уроки и статьи от профессионалов: https://css-tricks.com/ http://www.html5rocks.com http://html5doctor.com/ Вот, кстати, статья от одного из редакторов стандартов W3C о том, что чаще всего добавление role или aria-* бессмысленно: http://html5doctor.com/on-html-belts-and-aria-braces/
Dotrox, спасибо. Да нужно максимально быстро подтягивать уровень английского, даже в верстке оказывается уже проблемы от не знания языка :(
