Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
или
-- Купить пыльцу высшего качества --

Как сделать шапку сайта

Инструкция как сделать блок для шапки сайта, и расположить в нём фоновое изображение, логотип, заголовок, и описание сайта используя HTML и CSS

Блок для шапки сайта, обычно это "header" записывается так:

HTML


<div id="header"></div>

CSS


#header{
  width: 900px;     - ширина
  height: 200px;    - высота
  background-color: #25B33f;  - фоновый цвет (можно не задавать)
  margin-bottom: 10px;    - отступ снизу
}

Фоновое изображение для шапки сайта делаем по размерам блока, т.е. 900px X 200px. Его лучше всего сделать в фотошопе.

Если, кто не владеет фотошопом, я предлагаю самый простой способ изготовления картинки для шапки сайта, в имеющимся на всех Windows по умолчанию Paint.

Готовое изображение прописываем в блок "header".


#header{
  width900px;
  height200px;
  background-color#25B33f;
  margin-bottom10px;
  background-image: url(images/i8.png)   - в свойстве указывается путь к изображению. Как сохранить картинку, чтоб потом прописать путь для неё читайте в статье Каталога сайта
}

Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.

Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство background-position

Следующий шаг — добавляем заголовка и описания сайта.

Для этого в HTML блока прописываем код заголовка и абзаца. Абзацу зададим класс, так как описание будет только в шапке.

HTML


<div id="header">
  <h1>Шапка сайта<h1>
    <p class="descript">Как сделать шапку для сайта с заголовком и описанием</p>
</div>

Посмотрим, что у нас получается.

Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:
CSS


h1{
  color: #ffee00;  - цвет заголовка
  font: 40px Georgia;  - шрифт
  margin-left: 300px;  - отступ слева
}
.descript{
  width: 300px;  - ширина
  color: #ffee00;  - цвет
  font-style: italic;  - курсив
  margin: 70px 0 0 30px;  - расположение
  font-size:22px; - размер шрифта
}

Результат:

Теперь добавим логотип.

В качестве логотипа я возьму изображение вот такого чёртика

Картинка обязательно должна быть с прозрачным фоном, иначе её собственный фон очень некрасиво будет смотреться на фоновом изображении.

Чтоб разместить логотип проводим три изменения в коде:

а) в HTML блока добавим код картинки;

б) в CSS в блок header пропишем относительное позиционирование, так как логотип будет размещаться в этом блоке;

в) в CSS добавляем селектор логотипа, и позиционируем его абсолютно, относительно блока header.

HTML


<div id="header">
  <h1>Шапка сайта<h1>
    <p class="descript">Как сделать шапку для сайта с заголовком и описанием</p>
<img src="images/hortic.gif">
</div>

CSS


#header{
  position:relative;
  width900px;
  height200px;
  background-color#25B33f;
  margin-bottom10px;
  background-image: url(images/i8.png)  
}
h1{
  color: #ffee00;  - цвет заголовка
  font: 40px Georgia;  - шрифт
  margin-left: 300px;  - отступ слева
}
.descript{
  width: 300px;  - ширина
  color: #ffee00;  - цвет
  font-style: italic;  - курсив
  margin: 70px 0 0 30px;  - расположение
  font-size:22px; - размер шрифта
}
img{
  position:absolute;
  top:10px;
  left:10px;
}

Результат:

Получилась вот такая шапка сайта.

На  предыдущей странице мы сделали каркас сайта и теперь можно вставить в него шапку и посмотреть что получилось.

Код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#wrapper{
    width: 900px;
    outline: 1px solid #787274;
    padding: 10px;
    margin: 0 auto;
}
#header{
    position:relative;
    width: 900px;
    height: 200px;
    background-color: #25B33f;
    margin-bottom: 10px;
    background-image: url(images/i8.png)
}
#sidebar{
    background-color: #2FF553;
    margin-bottom: 10px;
    width: 180px;
    padding: 10px;
    float: right;
}
#content{
    background-color: #9EF5AF;
    margin-bottom: 10px;
    width: 670px;
    padding: 10px;
}
#footer{
    height:80px;
    background-color: #41874E;
    margin-bottom: 10px;
}
.clear{
clear: both;
}
h1{
color: #ffee00;
font: 40px Georgia;
margin-left: 300px;
}
.descript{
width: 300px;
color: #ffee00;
font-style: italic;
margin: 70px 0 0 30px;
  font-size:22px;
}
img{
  position:absolute;
  top:10px;
  left:10px;
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>Шапка сайта</h1>
        <p class="descript">Как сделать шапку для сайта с заголовком и описанием</p>
<img src="images/hortic.gif">
    </div>
    <div id="sidebar">Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать
Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
    </div>
    <div id="content">А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали
больше всего времени.
И я решил написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
    </div>
    <div class="clear"></div>
    <div id="footer"></div>
  </div>
</body>
</html>

По моему не плохо, надеюсь у вас получится лучше.

Теперь немного информации для тех, у кого сайт расположен на CMS WordPress.

На WordPress устанавливается готовая тема, с готовой шапкой, но допустим, Вам захотелось в эту готовую шапку, добавить какой нибудь свой логотип, или ещё какое изображение.

Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта.

В редакторе после загрузки появиться код картинки, его нужно скопировать, а «Запись» можно удалить.

Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php.

В этом файле, находим строку <div id="header">, и после неё вставляем скопированный код картинки.

После этого обновляем файл, и смотрим, как изображение разместилось в шапке сайта.

Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img, добавляем атрибут style со свойством margin

style="margin:0 0 0 0;"

И двигаем изображение туда, куда нам нужно.

Вот мы и создали первую страницу сайта. После доработки шапки, и ещё кое каких доработок, описанных далее, можно этот файл назвать index.html, и выложить его на хостинг. Затем, по этому же шаблону, создаются другие страницы, создаётся меню и так далее. И сайт начинает свою жизнь в интернете.

P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье Редактируем тему оформления

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдыхПеремена

Пьяный никак не может затолкнуть двушку в прорезь автомата. — Напился, — а еще таксист, — сказала прохожая. — С чего взяла? — Шапка таксистская. — Да, — задумчиво произнес пьяный, — а была ондатровая.

Как сделать картинку для шапки в Paint < < < В раздел > > > Как вставить картинку и текст в отдельный блок
 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

65 комментариев на «Как сделать шапку сайта»

  1. stariс говорит:

    Странный коммент. Вы говорите о хобби, а ссылка ведёт на солидную компанию. Давайте уж определимся — Вам нужно общение по созданию сайта, или вы рекламируете маркетинговую контору?
    Сразу скажу, что считаю маркетинг злом нашего времени происходящим от лукавого, поэтому удалил все ваши ссылки.
    Однако всегда готов пообщаться по тематике сайта.

  2. Сергей говорит:

    Спасибо мне 62 это мое хобби отвлекаюсь учебой от дурных мыслей никогда не думал что погрязну в изучении Сайто строения короче большое спасибо сейчас изучаю php не плохо если вы достигли более знаний с этим ресурсом выкинули шаблон сайта с базой данных и добавления статей непосредственно с кабинета мои маленькие наработки за пару лет https://my1001.wordpress.com/ и еще какой хостинг предлагает бесплатный ресурс

  3. stariс говорит:

    Картинка в шапке должна быть одинаковой на всех страницах. По этой картинке пользователь узнаёт ваш сайт из миллионов других страниц.

  4. it говорит:

    Спасибо. Полезная информация. А как сделать чтобы картинки были разные на других страницах. У меня сейчас картинка на всех страницах одинаковая.

  5. stariс говорит:

    Ну какую ссылку? Кто вам ответит, на такой дилетантский вопрос? Вы даже не понимаете, что спрашиваете. Расскажите мне подробно, что вы делаете, и я постараюсь вникнуть и подсказать.

  6. Михаил говорит:

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

  7. stariс говорит:

    Извините Шахзод, но я больше не занимаюсь разработкой сайтов. С этим вопросом вам лучше обратиться в TemplateMonster. Обратитесь с вашей просьбой прямо в их чат на странице.

  8. Шахзод говорит:

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

  9. Алина говорит:

    В этой статье есть примеры кодов CSS и html, чтобы сделать шапку для сайта. Причем даже 2 способа, как можно их применить. Вроде ничего сложного) И там еще рассказывают, как поменять шапку «по умолчанию» в WordPress.

  10. stariс говорит:

    Сайт на WordPress, тема оформления TwentyTen — это что касается кода. Меню я конечно ковырял, но только по фону, шрифту, высоте и отступам. Ширина ячеек по умолчанию от размера текста. Я там ничего не менял.

  11. Михаил говорит:

    Здравствуййте,аонимаю вопрос ,не много, нне по теме ,но все же, как Вы сделали меню в шапке своего сайта,просто, я сейчас учусь верстать с psd-макетов и на одном из них менб в точности как у Вас(только шрифт и цвет другие) и мне очень интересно как вы сделеали свое меню.Буду точнее
    в Вашем меню используются шесть ячеек одного блока (Шпаргалки Web,Html на русском и т.д.) как их сделать я понимаю,но я не могу понять как вы сделали их разной ширины т.е ячейка «Html шаблоны на русском» шире чем «О сайте» ,уже третий день не могу доделать свой макет,буду благодарен если вы скинете html,css этого меню или просто обьясните.
    ЗАранее Спасибо!

  12. Игорь говорит:

    Большое спасибо!

  13. stariс говорит:

    Запрет наплывания.

  14. Надежда говорит:

    .clear{
    clear: both;
    } , а что это?

  15. stariс говорит:

    Обрезать картинку до нужного размера.

  16. Виталий говорит:

    Спасибо большое!
    А я вот взял картинку, но, слишком большую, и она у меня не поместилась.
    Правда, может я не внимательно читал.
    Что делать?

  17. stariс говорит:

    А что именно уточнить? Вообще-то слайдер — это уже блочный элемент. Вопрос в какое место его спозиционировать. Или просто вставить в текст, или в шапку, сайдбар и т.д.? Слайдер самописный или плагин? И как у вас с html и css?

  18. Сергей говорит:

    Доброго времени суток. Хотелось бы уточнить о возможности вставки в один из блоков страницы слайдшоу. С уважением, Сергей.

  19. роман говорит:

    Спасибо автор ты мне очень сильно помог

  20. stariс говорит:

    У меня такое бывает когда ошибка в шапке подвале или виджете, т.е. в тех элементах которые подгружаются на каждую страницу.

    Возможно я чего-то не знаю и не понимаю, но мне не понятен смысл двух хедеров и нескольких h2. На странице должен быть один хедер, один h1 — заголовок сайта, и один h2 — заголовок страницы. Всё остальное можно сделать другими тегами с тем же визуальным результатом. Может это для сниппета? Я в этом направлении ещё не копал.

    А два хедера? Что принимать за начало, начало страницы, или начало статьи? Во втором хеадере микроразметка microformats.org. Может и в этом есть сакральный смысл? Откуда циклическая переадресация?

    С таким шаблоном наверное можно работать только в визуальном редакторе и настройках, не залезая в код, тогда всё тайные замыслы создателя возможно сработают как надо.

  21. Виктор говорит:

    ты посмотрел, когда я все исправил. А ошибки появляются тогда когда вносишь изменения, даже изменишь расстояния межде словами или слово добавишь или вставишь. Сразу во всех страницах возникают ОДНИ и ТЕ ЖЕ ошибки

  22. stariс говорит:

    У тебя одна ошибка и одно предупреждение, можно не париться.

  23. stariс говорит:

    Почему же не решить? Сходу не решить — эт точно.

  24. Виктор говорит:

    Staric привет!
    А не подскажешь почему возвращаются ошибки кода, которые исправляю с помощью валидатора, если вношу какие-нибудь изменения в страницу.

  25. Виктор говорит:

    возможно сжатие связано с действием плагинов. Заливали на старте стандартную Рибосому. Затем старался оптимизировать. Это — то, что получилось. Т.е. проблемку PageSpeed с количеством циклов передачи данных
    не решить?

  26. stariс говорит:

    Действительно Рибосома. Только основательно переделанная. В оригинальном шаблоне название определяется по линкам стилей в head, а в твоём нет. Вообще, как переделаны стили, для меня полная непонятка, к тому же они сжаты, а это не читаемо. Вообще нет подключённых файлов стилей, только встроенные. Непонятно. В оригинальной Рибесоме всё как у людей, более-менее понятно и видно. Можешь сам посмотреть. Почувствовать, так сказать, разницу.

  27. Виктор говорит:

    шаблон Ribosome на WordPress

  28. stariс говорит:

    Вот тут Витя тёмный лес. Одно дело логотип и другое — разобраться в твоём шаблоне. По всему он самописный, потому что названия нет, так что просечь полёт фантазии разработчика — гигантский труд (кстати, а где тот мастер, который его создал?). По серверам непонятка. Стили сжатые в хедере, в этой каше разве разберёшься? Вообще в хедере столько наворочено, что я не знаю. Фавикон с логотипом в отдельном линке. Иль хакеры одолели?

    Короче, помочь тебе сможет только создатель сего шедевра.

  29. Виктор говорит:

    Привет Staric!
    С шапкой вроде нет вопросов. Думал, что когда расположу на одной линии, то это предупреждение уйдет, но наверное полученный результат как-то с ним надо связать или не в этом дело.
    А не подскажешь как решить такую проблемку если pageSpeed пишет

    Оптимизируйте загрузку видимого контента
    Для отображения верхней части страницы необходимы дополнительные сетевые запросы. Сократите объем HTML-кода в верхней части страницы, чтобы она быстрее открывалась в браузере.
    Для показа верхней части страницы понадобилось 52 КБ данных с сервера, содержащих код HTML. Количество циклов передачи данных от пользователя на сервер и обратно: 3. Размещайте в верхней части страницы только важное содержание – оно отобразится после первых 2 циклов обмена информацией с сервером.
    В верхней части страницы не удалось отобразить ни один элемент содержания на основе данных HTML, полученных с сервера (количество циклов передачи данных: 2).

  30. stariс говорит:

    Сделаем Витя, только недели через три, не раньше. Я ведь по профессии отделочник, а сайты и веб — просто хобби. Интересно.

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

    Между делом, нули то из top (отступ сверху), и left (отступ слева), меняй на другие значения, тогда и двигаться будет.

  31. stariс говорит:

    float — это обтекание элемента слева. psition и float вместе не работают. Или то, или другое.

  32. Виктор говорит:

    Спасибо Staric!
    Ты меня все таки натолкнул на мысль своими вариантами. И мне удалось сдвинуть h1 и h2 через float и position absolute

  33. Виктор говорит:

    Спасибо Starik!
    Этот код находится в хедере. Вставлял в style.css после юblog-info-sin-imagen
    селектор .main-logotip {
    position: absolute;
    top: 0px;
    left: 0px;
    } стоит насмерть логотип.
    Пробовал его вставить в это место if ( get_theme_mod(‘ribosome_display_top_bar’, и даже в другие (с тегами и без тегов, с class и без него) слетает сайт. Может опять что-то не то делаю. Вроде как ты написал. Еще где-то читал предлагали разбить на блоки и выставить в одну линию, но знаний не хватило, а конкретики маловато. Очень надеюсь на твою помощь. Может на прямой связи. я могу на мобилу набрать и под руководством сделаем.

  34. stariс говорит:

    Ага. Вот так понятнее. Судя по всему тебе надо начать с начала, а не тыркаться с середины во все стороны. Вот смотри: есть веб-инспектор, в котором видно весь html сайта, все эламенты, и стили, которые этим элементам заданы.

    Картинка находится в блоке blog-info-sin-imagen. Задавая стили для него ты можешь сделать его уже, шире, сместить вправо-влево (свойство margin) Картинка — самостоятельный элемент в блоке blog-info-sin-imagen, и ей задано позиционирование position: absolute;, что означает что она будет расположена в левом верхнем углу блока blog-info-sin-imagen, которому задано свойство position: relative;

    Причём (и это вызывает удивление), position для блока задан как положено в style.css, а position картинки задан атрибутом style, который находится в теге img картинки.

    Элементы которым задано position двигаются свойствами left: **; top: **; Обязательно прочитай статьи по ссылкам.

    Чтобы перемещать твой логотип, нужно во первых найти его код в вебинспекторе вот он: <img height=»80″ width=»80″ src=»http://ehp.su/wp-content/uploads/2016/12/ehp-logo1.jpg» alt=»Экохимпрогресс» style=»’position:absolute/»>. Затем найти этот код в файлах шаблона, скорее всего в header.php., но не обязон. Возможно логотип подгружается по php. Как бы там ни было, путь к картинке в теге img есть. И судя по тому что она в папке uploads, то была загружена пользователем, а не встроенная.

    В общем тебе нужно найти код картинки, и вместо атрибута style="position: absolute;", прописать в него class="main-logotip". Затем создать (добавить) в style.css селектор .main-logotip и задать в нём свойства:

    .main-logotip {
    position: absolute;
    top: 0px;
    left: 0px;
    }

    Если не найдёшь код логотипа (возможно) и только в этом случае, то можно сделать следующее: Взять его код из веб-инспектора, или (я уже скопировал) из начала коммента и вставить в файл темы header.php, сразу после <div class=blog-info-sin-imagen>, только как говорил, заменить style на class, и прописать класс в стилях, только top и left не по нулям, а по 20-30px.

    Должны будут появится 2 логотипа. Первый надо будет убрать. Попробуй убирать из header.php

    <?php if ( get_header_image() ) {

    if (get_theme_mod(‘ribosome_logo_active’) == 1) {
    $div_image_header = ‘’;
    if (get_theme_mod(‘ribosome_logo_center’) == 1) $div_image_header = »;
    }else{
    $div_image_header = »;
    } ?>

    или

    <a href="» rel="nofollow"><img src="» class="header-image" width="width ); ?>" height="height ); ?>" alt="" />

    Посмотришь что это даст. Скорее всего первая часть уберёт первый логотип. Ну а тогда меняй значения в top и left и двигай второй.

    Если и так не понятно, то от души — начни с основ html и css, чтобы нам понимать друг друга, попрактикуйся в шаблоне и вебинспекторе, и всё будет ОК.

  35. Виктор говорит:

    Что я делал — в соответствии с разными предложениями в style.css менял параметры в т.ч. для blog-info-sin-imagen» и h1 и h2 и много еще разных попыток. Лого двигался или вбок или сверху добавлялась еще полоса . Сейчас я попробовал как ты говоришь написать так.
    и вставить в style css .ehp-logo1 такие параметры и другие, но не сработало
    {
    float:left;
    margin: 4px 10px 2px 0px;
    }
    Что-то видно не так делаю.
    Если можешь напиши конкретно, ПОМОГИ. Мозги кипят от непонимания
    С уважением Вик

  36. stariс говорит:

    В коде картинки-логотипа задан атрибут style="position: absolute", без каких либо отступов. Он так и будет в верхнем левом углу торчать. Странно конечно, обычно это в стилях делается. А что вы только не делали, интересно? Вообще-то картинке нужно задать класс и в style.css задать этому классу позиционирование, тогда подвинется.

    Интересный шаблон, в смысле замороченный. Позиционирование блоков (не только картинка-логотип) в html задано. Два хедера, два h1, h2 вообще полно. ПС свихнётся. Ну в смысле плохо это для поисковой оптимизации.

    Может сменить шаблон? У него же ничего кроме адаптации. А сейчас адаптивных полно. Даже у того же вордпресса 5-я 6-я и 7-я адаптивные. Классные шаблоны.

  37. Виктор говорит:

    Добрый День!
    У меня сайт на вордпрессе. Я новичок. В шапке стоит логотип и название с описанием. Не могу логотип установить на одну строку с названием и описанием. Что только не делал. Советов много, но не получилось ничего. Как логотип был выше так и остался . Надеюсь на вас профессионалы. Кусок кода хедера ниже.

    <?php if ( get_header_image() ) {

    if (get_theme_mod('ribosome_logo_active') == 1) {
    $div_image_header = '’;
    if (get_theme_mod(‘ribosome_logo_center’) == 1) $div_image_header = »;
    }else{
    $div_image_header = »;
    } ?>

    <a href="»><img src="» class=»header-image» width=»width ); ?>» height=»height ); ?>» alt=»» />

    <a href="» title=»» rel=»home»>

  38. stariс говорит:

    Добрый вечер Алексей. Вам фоновое изображение в шапку хочется, правильно? Или просто картинку в шапку вставить? Нужна ли она вообще? Что то, что другое. По опыту, вряд ли Вы кого-то удивите и привлечёте красочной шапкой, учитывая специфику сайта, а вот скорость загрузки посадите однозначно. От картинок в шапке только вред.

    Люди к вам пойдут за технической услугой. Надо им картинки? Ну туризм там — понятно. А тут. Лучше телефон (хорошо-бы бесплатный) и город в шапку.

    У Вас хороший цвет и шрифт. На мобиле нормально смотрится. Я бы шапку ещё сузил, есть возможность, чтоб инфа сразу начиналась. И календарь не на месте. Информацию вверх.

    Посмотрел вашу страницу в веб-инспекторе — картинки вообще нет. То есть не то чтоб её не видно — её кода просто нет в древе. Чтоб разобраться надо зайти в шаблон и копать, а это сами понимаете ….

  39. Алексей говорит:

    Интересно, помогите с проблемкой, ни как не вставляется, точнее вставляю фото в шапку сайта, но его на сайте не видно пробовал разные размеры фотографий в теме Neblog
    не пойму почему не вставляется
    и включал фото и выключал фото, так и не появляется на сайте. Спасибо заранее

  40. stariс говорит:

    А какую помощь вы хотите?

  41. Андрей говорит:

    Может кто поможет сделать сайт, для личного опыта? От благодарю и материально.
    Спасибо!

  42. stariс говорит:

    А в каком месте страницы ваша картинка? В шапке, в тексте, в сайдбаре, в подвале. И как вы пытались её двигать?

  43. Татьяна говорит:

    Первое место, где все понятно описано! Вопрос такой — код картинки вставила в редактор. Картинка посредине. Пытаюсь сместить ее влево. Ничего не происходит. Стандартный шаблон WP . Двигать нужно в редакторе style.css?

  44. Митя говорит:

    Спасибо

  45. stariс говорит:

    Я в 54 начал html, а с php до сих пор только на Вы. Эх где мои 35!

  46. Гимес говорит:

    С нетерпением буду ждать статей о PHP. Спасибо за подробные объяснения. Я то уж думал, что в мои 35 поздно начинать учить что-то новое. А затянуло, интересно ведь.

  47. stariс говорит:

    Обратитесь вот сюда, а у меня совсем нет времени заниматься чужими сайтами. Своих три кое как успеваю вести. Кроме них я ещё работаю и строю свой дом.

  48. Habib говорит:

    Добрый день. Вы можете сделать мне шапку для сайта?

  49. stariс говорит:

    Я ответил на тот. Посмотри.

  50. DARKINWORCER говорит:

    я случайно оставил комментарии в главе «Каркас сайта продолжение»

  51. stariс говорит:

    Не совсем понял, какие границы. Поподробнее бы. Если рамку для блоков, то вот так:
    border-radius: 5px;
    box-shadow: 0px 0px 0px 2px #0ea8f4;
    В общем поподробнее давай.

  52. DARKINWORCER говорит:

    Старик помогите пожалуйста мне надо сайт сверстать а как сделать границы выподающего меню незнаю

  53. stariс говорит:

    Подтвержу только вечером, после работы.

  54. Джек говорит:

    Отправил запрос в Скайп

  55. stariс говорит:

    Можно в скайп webded1

  56. Джек говорит:

    Спасибо Старик! за терпение и понимание. Приятно слышать. По пукнкту 1 так и делаю, с этим ясно. Далее браузеров у меня 5 штук.
    система Макинтош, основной браузер Safari, дале Лиса, Хром, Опера и Тор. Это я к тому, чтобы ясно и понятно было отображение изменений на разных браузерах. Работаю в основном с Лисой, в ней инспектор Firebug он показывает что куда и как, но работу с ним я толком еще не освоил.. хотя кое что понимаю. (к примеру как исследовать элемент) далее этого дело не идет. Хотя я стараюсь ). Жаль что нельзя у тебя прикрепить файл (образец) примера для пояснения. Это было бы очень и очень неплохо!
    А по стариковски решим, спасибо конечно! надеюсь с проблемой не оставишь? )
    С Ув. Джек

  57. stariс говорит:

    Ну то что я опытный — это слишком сильно сказано. Сам, всего полтора года, как первый раз за комп сел. А с форумами вообще не работал.
    Однако попробуем разобраться.
    1. Чтоб не бояться, перед изменениями в style.css, скопируй весь файл, и вставь в блокнот, пусть висит. Если что-то не удалось, уберёшь весь файл, и вставишь прежний.

    2. Чтоб узнать в какое место файла вставлять нужный код, используй веб-инспектор. Он всё показывает. Только браузер Chrome желательно использовать. В нём веб-инспектор по умолчанию стоит. В нем, только наведёшь курсор на элемент, как он тут же покажет, где в style.css этот элемент находится, и какие свойства ему даны.
    Вот в этой статье, я про него подробно описал. Там и ссылка на шпаргалки по css есть.
    3. Картинка в шапке весом в метр — это конечно никуда не годится. У Вас то она грузится, а вот у других — вопрос. Как сделать картинку лёгкой вот в этой статье .
    Это для начала. Там будут ещё нюансы, так что спрашивай. Разберёмся потихоньку, по стариковски. Я, правда, на пять лет моложе.

  58. Джек говорит:

    Забыл сказать Старик, картинку в шапку сайта я грузил и подгонял по размерам а после в теме Оформления загружал на хостинг картинок. А вот самому написать код (селектор) и вставить его в файл темы css боюсь.. просто не знаю как? Уже и перевел на русский все опции (названия) файла index.css какая за что отвечает, но все равно какой панический страх.. хотя и делаю перед изменениями копию. Извини уж.
    С Уважением Джек
    PS. как я завидую тебе, по хорошему опытному веб-мастеру! Не обижайся на на дилетанта.. я тоже много читаю в инете о своей проблеме, но так уж «разжевано» как у тебя, не встречал. Спасибо!

  59. Джек говорит:

    Привет stariсу ! Спрашиваю и задаю вопросы.. уж извини )
    я молодой админ на на сайте приятеля, то есть помощник, платформа — smf . Все работает, дизайн минималистичный, но есть проблема.. мне очень трудно дается изучение css тяжко очень наверное возраст 61 год. Еще поясню, пойми пожалуйста я не лянтяй и не такой уж тупой, просто мне очень тяжело понять код. Я ранее наделал много ошибок и обжегшись на молоке, теперь дую на воду. Вот хочу на вашем конкретном примере получить подсказку какой вид должен иметь код для вставки картинки в шапку сайта? Сейчас у меня стоит картинка очень большого размера 1.1 Mb Она отображается и грузится нормально, но занимает очень много места. Вот и хочется научиться менять их в шапке на любые другие, меньших — больших размеров и типов.
    Как двигать картинку уже понятие имею, наверное вот так…
    #header { margin: 0px Opx Opx Opx; /* очередность: отступ сверху — отступ справа — отступ снизу — отступ слева */
    height: 192px;
    width: 740;
    }

    Знаешь более всего меня удивляет одна вещь, многие , почти все пишут дают рекомендации как и что написать, примеры советы и т. д и т. п.
    Но никто не удосужится пояснить новичку (к примеру на smf) в какой файл и главное, в какое именно место файла к примеру index.css нужно вставить код.
    Пока для начала все. Извини пожалуйста если что не понял или не та написал.
    С Уважение Джек

  60. stariс говорит:

    Спрашивай. Чем смогу.

  61. Джек говорит:

    Спасибо!
    Ток учусь, много вопросов, непоняток, по теме, ну и ежели старый перец не возражает ) стану посетителем.
    С Уважением Джек.

  62. starik говорит:

    Шкодер-то я тоже начинающий, только-только взялся за php. Рою гугл как крот. Нарою, осмыслю, попрактикуюсь, и сразу пост строчу, пока не замылилось.
    На обновления же есть подписка.

  63. Адам говорит:

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

  64. starik говорит:

    Спасибо! Заходите почаще.

  65. Людмила говорит:

    Хорошие уроки. Мне нравиться. Буду заходить учиться.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *