Подписка
Email
Fb
RSS
Twitter
Email

Уроки верстки сайтов — приступаем к CSS

верстка сайта cssРад снова приветствовать Вас, дорогие друзья на блоге DenWeb.Ru. И снова мы продолжаем изучать на примере верстку сайта из PSD макета. С HTML мы закончили и теперь плавно переходим к внешнему оформлению макета сайта, а именно к CSS.

Предлагаю Вашему вниманию очередной видеоурок, который получился сегодня довольно большим.

О том, как создать reset.css, можете прочитать в моем посте — «Сброс стилей CSS».

Итоговый код урока:

Reset.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Style.css

/*
Test Theme
Version: 1.0.0
Author Site: http://denweb.ru
*/
@import url("reset.css");
/*General Styles*/
html {
	height: 100%
}

body {
	background: #d8d8d8;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #4f5259;
	min-height: 100%;
	padding-top: 25px;
}

p {
	font-size: 14px;
	color:#4f5259;
}

a {
	text-decoration: none;
	outline:none;
	color: #868686;
	font-size:14px;
}

a:hover {
	text-decoration: underline;
	outline:none;
	color: #fff;
	font-size:14px;
}

code {
	font-family:"Courier New", Courier, monospace;
	color:#000;
}

blockquote {
	font-style:italic;
	background:#ccc;
	margin-left: 20px;
}

#wrap {
	width: 960px;
	background: #ededed;
	margin: 0 auto;
}

/*Header*/
#header {
	height: 205px;
}

#header_top {
	height:64px;
	background: #1a1e27;
}

#header_bottom {
	height:141px;
}
 /*Top navigation*/
 #header ul {
	 float:left;
	 margin: 23px 244px 0 34px;
}

#header ul li {
	float:left;
	padding-left: 10px;
}

#header ul li a {
	height: 41px;
	display:block;
}

#header ul li a:hover {
	height: 41px;
	display:block;
	text-decoration: none;
	background: url(img/nav_arrow.png) no-repeat bottom;
}

.select {
	color:#fff;
	height: 41px;
	display:block;
	text-decoration: none;
	background: url(img/nav_arrow.png) no-repeat bottom;
}

/*Search Form*/
#search {
	float:right;
	margin: 14px 32px 0 0;
	width: 191px;
	height:35px;
	background:url(img/search_bg.png) no-repeat;
}

.search_text {
	width: 137px;
	padding: 6px 0 0 25px;
	background:none;
	border: none;
	outline: none;
}

.go {
	width: 15px;
	padding: 6px 0 0 25px;
	background:none;
	border: none;
	cursor: pointer;
}

#rss {
	margin: 24px 15px 0 0;
	float: right;
}

#rss span {
	margin-right: 7px;
	position:relative;
	top: -5px;
}

/*Logo*/
#header_bottom h1 {
	font-size: 28px;
	text-transform:uppercase;
	float:left;
	display:inline-block;
	font-weight:700;
	color: #2f333b;
	margin: 60px 25px 0 74px;
}

#discription {
	width:218px;
	font-style:italic;
	display:inline-block;
	background:url(img/logo_line.png) no-repeat left;
	padding-left: 25px;
	margin-top: 68px;
	clear:both;
	color: #646464;
}

#slogan {
	margin: -5px 0 0 74px;
	color: #646464;
}
/*Slider*/
#slider {
	width:900px;
	margin: 0 auto;
}

Не пропускаем новые уроки и подписываемся на RSS)

Вы можете оставить комментарий.

102 комментариев к записи “Уроки верстки сайтов — приступаем к CSS”

  1. я почему-то всегда закрывал тег input вот так />, а вы закрываете так </input>. есть разница?

    • Да, что-то я там намудрил немного. Правильнее будет <input /> — если используется XHTML. Для HTML можно вообще без закрывающего.

  2. evjikshu:

    Просьба дебильная, но все-же: можешь в следующий раз еще раз напомнить при помощи какой проги и как именно ты делаешь вычесоения. А то фигня какая-то получаеться... 

  3. evjikshu:

    Вах, извеняюсь за свою супер грамматику. Не спал ночью.Вычесления,я хотел сказать. Чем растояния в пиксели мериешь? (хотя, в принципе, покрутив фотошоп уже нашел линейку в нем и даже научился ей пользоваться)

  4. Kostya:

    У меня при наведении на кнопку поиска курсор не меняется и rss получился под ней,хотя вроде бы всё правильно,делал по видео.

  5. trampdog:

    denweb, респект тебе за твою работу. Правильным делом занимаешься. Уважаю. Подскажи пожалуйста, как в notpad++ установить и запустить плагин для автоматической вставки тэгов (с вываливающимся списком)?

  6. trampdog:

    Спасибо, получилось. Следующий вопрос. А то я не поспеваю осмысливать все, что набираю. В общих чертах: т.е. мы должны задать все параметры отображения для всех элементов (читай тэгов и их имен), которые применили в файле html? Ты думаю понял мою мысль лучше меня, можешь пояснить правильными словами?Заранее спасибо.

  7. Авриль:

    Не пойму,каким образом футер встаёт на середину вместе с контенентом,при том что он не входит в селектор wrap,а идёт в отдельном селекторе,к которому не выставлен margin: auto. Можете мне объяснить?

  8. Авриль:

    А всё,кажется дошло. Делая равные отступы (margin: auto) от стенок браузера,вместе с wrap,сдвигается и conteiner со всем содержимым.Я правильно понял?И как тогда footer прижимается к низу,к браузеру?

  9. Авриль:

    На счёт футера понял) (height) вопрос снят.

    • Авриль, все верно, блоку wrap задаем ширину и выравниваем по центру, следовательно все что вложено внутрь wrap, тоже переместится с ним.

  10. Авриль:

    Как можно объяснить реакцию ff и opera на input(submit)Текст кнопки (отправить) не скрылся полностью,а нелепо выглядывает с разных сторон.В остальных всё нормальноhttp://savepic.su/724307.htmhttp://savepic.su/777554.htm

  11. Авриль:

                                                         *--Спасибо вам большое DenWeb  ;-) -|--]                                                    *--

  12. Снежана:

    объясните (для тупых :)) у меня чет никак не получается кнопку поиска (go) загнать под картинку... чет я точно не так делаю... код CSS такой же как у вас, изображение (картинка pmg) имеет размер 191рх на 35 px Помогите пожалуйста разобраться

    • А что именно не получается. Где находится кнопка? Возможно по ширине не подходит немного. Попробуйте немного уменьшить ширину поля input.

      Если же вы имеете в виду то, что текст на кнопке не пропадает, то этот недочет в следующих уроках устраняется.

  13. Снежана:

    Прикольно а в EX8 работаетформа поиска абсолютно нармально смотрится... что делать?

  14. Просьба есть. Уберите из кодов на этом сайте (ну блоки с кодами, как вот например на этой странице ниже видео) нумерацию строк. а то если че то нужно скопировать — копируется с цифрами. Админу за проэкт респект!))

  15. Владимир:

    Добрый вечер!Подскажите пожалуйста, когда я набираю текст в поиске ,текст отображается ниже середины. Подскажите как сделать чтоб он был по центру?(savepic.su/1218918.htm)

  16. Pavel:

    У меня почему то slogan прилип к низу discription, а не переместился под h1, я его не могу спозиционировать из-за этого. Как сделать чтобы он переместился под название сайта, перепроверил код 15 раз )

    • Сергей:

      Была та-же самая история, попробовал убрать float:left; у h1все стало нормально, только вот правильно ли это

  17. Аноним:

    DenWeb, выложите файл «index.html», а то что-то вы там делали)) 

  18. Ильдар:

    у меня в Chrome 17 если ставить в начале хтмл документа доктайп хтмл, как в хтмл 5, не реагирует на маргины для меню, если убрать доктайп то все нормально, не подскажете почему так может быть? у вас вроде нормально с доктайпом

  19. Подскажите, почему стрелочка верхнего меню в Chrome выглядит нормально, а в IE она все равно в виде квадратика. Делала точно по уроку, сохранила в PNG без фона. Как исправить?

  20. Jaguar:

    Привет.  в css правило #header ul свойство margin, отступы 23px 244px 0 34px откуда отступы отсчитывать, вял линейку прикинул и ничего не понял откуда они берутся?Заранее благодарен!

  21. Сэр_Йожик:

    Здравствуйте! У меня rss почему-то не в header_top, а в header_bottom, хотя в index.html он внутри блока header_top. Вообще не пойму, в чём делоО_О А ещё у меня что-то picpic не устанавливается(

    • Евгений Мамаев:

      Потому-что вот тут:070 /*Top navigation*/071 #header ul {072     float:left;073     margin23px 244px 0 34px;вместо 244px должно быть 0, и почему:071 #header ul, зачем мы тогда в html писали <ul id="navigation">?

  22. andry:

    да, с picpic какая-то проблема. открываю установочный файл, нажимаю install и ничего не происходит

  23. max:

    я бы добавил text-indent:-999em в класс. go (...), чтобы убрать надпись с кнопки.

  24. Игорь:

    Доброго времени суток! С версткой более-менее подразобрался, но вот вопрос в подложке в psd задана градиентная заливка, как ее прописать в стиле CSS?

  25. Даша:

     Здравствуйте! Есть вопрос. Прописываю все за вами, но вот что получается в «slogan».  Его уносит вправо и высоко прямо под поиск... При попытках что-то менять только в #slogan{} почему-то смещается все содержимое header_bottom.  Подскажите что делать

  26. Игорь:

    Форму для поиска то сделал, а вот как к этой самой форме прикрутить сам поиск? Я так понимаю что это скрипт, вот только он должен прописываться в движке или в самом сайте? Подскажите пожалуйста. Спасибо.

    • Да, это уже делается скриптом. Можно использовать php скрипт, либо просто установить поиск от google например — тогда он будет искать по проиндексированным страницам. В CMS обычно php скрипт поиска уже есть.

  27. max:

    Да хороший сайт много полезного но хотелось увидеть это пример на PHP.

  28. max:

    Вам можна здесь задать вопрос по пхп

  29. max:

    Я уже нашел свою ошибку, нужно было поставить (!isset( $_GET['id'])) а у форме изменить [post] на ($_GET.)

  30. Лю:

    Den, Вы делаете потрясающую работу! Благодаря Вашим урокам все становится понятно и просто, в голове все по полочкам раскладывается. Даже такого начинающего, как я, перестали пугать HTML и CSS. Конечно, не все получается, но тем не менее продираюсь сквозь все это, благодаря Вам!Успехов во всем!

  31. Евгений:

    Den, добрый день. У меня к вам вопрос. Блок RSS сделал так же как и вы после блока с формой. Но когда делаю стили, ставлю Float: right и RSS опускается под поле Search и прижимается к правой части шаблона, а не r формt Search. C чем это может быть связано.

  32. Евгений:

    Я конечно решил вопрос при помощи позиционирования:#rss {        float: right; position:relative; left: −241px; top: −30px;    }#rss span { margin-right: 7px; position: relative; top: −5px;}Но очень интересно, Ден, как у вас все так четко получилось?

    • Евгений, так сразу сложно сказать — нужно смотреть код. Скорее всего не хватает где-то ширины блока и rss не помещается.

    • Александр:

      Нашел решение, как мне кажется, немного проще. Я убрал отступ справа в блоке header ul, и все встало на свои места. Блок rss просто упирался в этот отступ.

  33. Ned:

    Спасибо за уроки @-->-

  34. Антон:

    в программе picpick у вас линейка имеет размер 1000 пикселов. Я скачал программу с офф. сайта. В той программе я не нашел как увеличить размер линейки. Можете подсказать, как вы это сделали?

  35. Рустам:

    Спасибо за уроки, очень емко и информативно. У меня к Вам такой вопрос: «Как отверстанный сайт поставить на СMS движок?».  Хотелось бы узнать будут ли уроки на эту тему?

    • Если есть просто html верстка, то ее надо переделывать в тему для движка. У разных движков структура тем отличается. На эту тему не планирую пока уроки.

  36. Leo:

    А вот у меня такой вопрос. Вообще есть ли какая-то закономерность, что в одном случае позиционировать блок надо с помощью margin, а в другом лучше с помощью padding. Кроме того такой еще момент, когда мы при позиционировании описания лого и сам текст лого сделали inline-block, то есть ли смысл делать обтекание справа?

  37. Zimmer:

    Доброго дня! Виникла проблема: Роблю свій сайт і поставив на фон посилання при наведенні картинку, розміри задав. але при наведенні нічого не відбувається. В чім річ?/*Top navigation*/#header_bottom ul { float:left; margin: 20px 51px 0px 0px; }#header ul li { float:left; padding-right:73px; list-style: none; }#header ul li a { height: 54px; display:block;}#header ul li a:hover { height: 54px; display:block; text-decoration: none; background: url(img/active.jpg) no-repeat ;} П.с. Дякую за зрозумілі уроки!

  38. Zimmer:

    Все, помилку знайшов)

  39. Сергей:

    Здравствуйте, Денис! У меня к Вам вопрос. Не проигрываются уроки (ни один), пишет «Ошибка связи, повторите попытку позже». Хочу поинтересоваться...Это ошибка на Ютубе?Три дня назад было все нормально.  Ответьте пожалуйста на и-мейл, если не ответите на сайте.

  40. Иван:

    Здравствуйте, Денис! Помогите разобраться! У меня почему-то не получается убрать маркеры возле списка ссылок, в верхней навигации. Все писал как у Вас, тысячу раз проверял, ошибки не нашел. Все выглядит так-же, кроме этих точек сбоку. Подскажите где искать ошибку. Заранее спасибо!

  41. Александр:

    Здравствуйте! Спасибо за уроки! Но возникла проблема, картинки прописанные через css (стрелочка в верхнем меню и форма поиска) никак не хотят отображаться, хотя если через html эту ссылку вставить, то картинка работает.

  42. ПавелСурж:

    У меня почему-то переодически неработает ксс. Вот дапустим месяц вроде все норм. Потом все тоже самое не работает! Html работает всегда как положенно. Не у кого такой проблемы не было?

  43. Ольга:

    Ден, в уроке говорите, что дизайнер на задал фон, и исходя из этого собственно весь урок и строится. Но в шаблоне есть слой «24 Col Grid» он невидим, но если его включить, то как раз фон-то и появляется: розовые вертикальные полосы. 

  44. Аня:

    Ден, спасибо за уроки! Но возник вопрос: не получается выровнять сайт по центру. Это в самом начале css, где #wrap { width:960 px; background:#ededed; margin: 0 auto;}Прописываю все правильно, а по центру все равно не становится. У меня google chrome. Что это может быть?

  45. Игорь:

    Денис, спасибо большое за отличные за уроки! Только у меня небольшой вопрос со стрелкой в меню навигации. Стрелка должна показывать на какой странице сайта мы находимся, т.е. на главной, сервисы или контакты и т.д. А у нас она постоянно на главной остается. А как сделать, чтобы она менялась при выборе соответствующего раздела сайта, подскажи, пожалуйста.

    • Либо для каждой страницы отдельно прописать стиль к меню (если сайт на html), либо, как это всегда делается, на php пишется условие.

  46. Жалко, что автор не всегда объясняет почему именно пишем такой параметр. К примеру: далее пишем... html {009    height100%010}а почему именно такой параметр? а не height: 1600px; — т.к. шаблн имеет такую длинну...

    • Шаблон не имеет такую длину, а точнее высоту. Она зависит от размера контента на странице. Поэтому прописываем 100%.

      • а могу я ещё узнать по поводу класса .search_text и .go как сделать, чтобы они не зависили друг от друга?пытаюсь менять padding http://d.pr/i/2wfe, чтобы более ровно расположена строка ввода текста, после это делаю это с кнопкой «.go» эти же права наследует и «.search_text», как от этого избавиться?) я просто не смотрел следующий урок, возможно там есть решение, если так, то дайте знать)http://d.pr/i/bL4G

  47. Elena:

    Здравствуй, Ден! Учусь по твоим урокам и радуюсь! Спасибо огромное!! Только в этом уроке возникла проблемка — слово «Отправить» в сторе поиска (для кнопки) — видно в браузере Опера, а в хроме и эксплорере все норм. Где моя ошибка? 

  48. Elena:

    *в строке поиска

  49. Elena:

    к предыдущему вопросу: сейчас задала в теге <input type=submit value=""> — с пустыми кавычками, слово исчезло и все выглядит норм. можно ли так оставить?)

  50. Максим:

    При подключении reset.css к style.css браузеры не сбрасываются, а при подключении к index.html сбрасывается, но при этом sstyle.css не работает. Что можно сделать в такой ситуации?

  51. ASH:

    В style.css прописано для  #header_top background: #1a1e27Для чего тогда мы сделали header_bg.gif?

  52. Денис:

    у меня проблема с  #slogan — margin: −5px 0 0 74px;ни в какую не хочет вставать под заголовок Наш новый блог. Висит под discription и все тут, уж что я не делал, помогает только если убрать тег Р из reset файла, и то −5 марджин не работает он просто под текстом и все. Уже мозг кипит, подскажите плиз. Код проверял, все так как тут.

  53. Денис:

    вот еще что, скопировал текст css файла с сайта и подключил к нашему html. И почему то 2 ошибки. Первая с rss  как уже было описано, и вторая о которой я писал с марджин. Странно как же у автора в видео получилось то?

  54. Татьяна:

    Денис, поделитесь пожалуйста опытом. В  /*General Styles*/ для html задаете height:100%; ,  а для body: задаете min-height:100%;.  Я так понимаю height:100%; — для IE задется. Вопрос такой, некоторые верстальщики задают и height:100% и min-height:100% и для body и для html, подскажите как правильно на сегодняшний день, с точки зрения грамотной верстки?

  55. Елена:

    Подскажите, пжлста, как быть, если дали на верстку псд-макет весом 89,9 Мб, размером 5534*5790 пикс?

  56. ОКИНАВА:

    У меня че-то не работает Сброс стиля

  57. Юрий:

    Здравствуйте, в видео вы размеры сайта измеряли инструментом «Линейка» где его можно взять?

  58. Олег:

    Денис подскажите пожалуста что за програму используете? не расслышал. Огромное спасибо за видео уроки!!!

  59. Илья:

    это же можно верстать не в Adobe Dreamweaver, а в notepad++?

  60. Правильно писать description!

  61. Aleksandr:

    Приветствую вас Den Web! Спасибо за ваши замечательные уроки, довольно всё понятно, но вот парочку вопросов всё же у меня всё же есть к вам. Буду вам очень благодарен если вы на них ответите...)Вопрос первый: вот скажите почему у меня возникают проблемы с сбросом стилий в браузере интернет эксплолер вроде версия не старая кажется 9, смотрите дело вот в чем когда я пишу 1-ю строчку в html т.е какой <!DOCTYPE html> то я не могу сбросить стили в эксплолере в остальных браузерах все норм, а экс-р глючит, но если я уберу 1 строку т.е <!DOCTYPE html> то все сразу сбрасывается, почему так...?И второй вопрос, я не как не могу передвинуть форму поиска по блогу или по сайту... уже и айди и классами пробовал не чего не получается форма либо растягивается в право либо в низ, значения paddinga  пробовал другие но нечего не меняется почему так может быть? Вроде все выполнял за вашими уроками и делал всё как вы но почему то есть немного недочетов. 

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика