Привет, хочется услышать какие то слова напутствия, критики, может похвалите 
.
Это моя первая самостоятельная вёрстка. Знания HTML и CSS пока довольно поверхностные. Хочется на начальном этапе понять, что делаю не так, что бы сразу исправить.
http://cssdeck.com/labs/full/0owliss6
- !DOCTYPE не HTML5 почему-то… Поясните, пожалуйста.
- Исправьте сначала ошибки, которые покажет валидатор (кстати в связи с выбранным типом документа, проверка будет гораздо строже. Возможно всё же стоит исправить на
<!DOCTYPE html>)
Потом я посмотрю всё остальное.
Да c HTML5 налажала, каюсь.
Ошибки исправила, кстати большое спасибо за такой полезный сайт, обязательно буду пользоваться!
Ваш код посмотрю завтра с утра. Можете почитать похожую тему пока что, возможно захотите еще что-то поправить.
P.S. Ссылку забыла добавить сначала.
- div.text-header имеет нулевую высоту. И вот почему.
- Блок .text1 Текст капсом делается с помощью css-свойства text-transform: uppercase; В разметке все буквы одинаковы.
- В блоке text-header четыре заголовка и все h1 (то есть одинаковой степени важности). Не забывайте, что для текста оберткой может быть еще тег
<p>,<span>к примеру. - Кнопка записи на прием. submit здесь никак не подходит. input type=“submit” - это кнопка отправки введенных данных. Никакие данные пока не вводятся. Скорее всего предполагается, что при нажатии на кнопку сама форма появится или пользователь перейдет на отдельную страницу записи. Поэтому в данном случае здесь больше подходит тег
<a>, замаскированный под кнопку. Фон кнопки у меня к сожалению не загрузился и получилась неприятность - белая надпись на белом фоне. Об этом стоит позаботиться, добавив надписи кнопки темную текстовую тень. Тогда текст будет различим на любом фоне (и при его отсутствии). - Блок div.clear - пустые блоки в разметке это плохо. Воспользуйтесь лучше псевдораспоркой. Кстати, если из div.clear вы хотели сделать распорку, то он должен был находиться внутри .text-header. Иначе не работает.
- Блок меню. Высоту блока лучше задать как min-height. Флоаты для li здесь будут лишними. С пробелами между блочно-строчными элементами можно справиться другими методами. Размеры пунктов меню лучше задавать ссылкам, а не пунктам li и с помощью padding, а не width и height. Еще в вашем коде не хватает стилей для оформления состояния ссылок меню.
- Блок .content имеет фиксированную высоту. Здесь тоже лучше использовать min-height.
- Для блока .text3 высоту лучше убрать совсем, а то не влезает текст параграфа. Свойство display: block; здесь лишнее, ведь div и так блок, по умолчанию. Стили, относящиеся к оформлению текста (шрифт, размер шрифта, высота текста и т.д.) лучше задавать непосредственно для текста, то есть в данном случае для тега
<p>. - В блоке .text3 есть два пустых параграфа. Зачем они?
- Блок .foto - лишнее свойство display. Не прописаны размеры фотографии (ни в html, ни в css). Также хотелось бы обратить ваше внимание, что для разметки этого блока как нельзя лучше подошли бы теги HTML5
<figure>и<figcaption>. Почитайте о них. И о других семантических тегах тоже (header, footer, section, article, aside…). Будет хорошо, если вы найдете им применение на своей странице. - Еще один блок clear. Не буду повторяться. Вы уже знаете, что с ним делать.
- Блок .knop (названиям классов уделите отдельное внимание, только английские слова и никакого транслита) Здесь снова заголовок первого уровня. Скорее всего будет h2 уже.
- Блок .knopki - здесь тоже больше подходит тег
<a>, но никак не button type=“submit”. Про белые буквы на белом фоне я уже говорила. - Блок .temy - заголовки первого уровня снова. Над иерархией заголовков надо поработать.
- Блок .zap2 - см п. 4.
- Блок .footer - фиксированную высоту заменить на min-height, padding-top: 10px; лучше задать для .footer, чтобы не повторяться для каждого вложенного блока. Три блока .p не поместились в одну строку. Скорее всего придется уменьшить размер шрифта.
- div.clear - см. п. 5.
- Шрифт MIinion Pro по-моему не подключен. Проверьте.
Ох, много получилось. Надеюсь, информация окажется полезной.