Каркас сайта (продолжение).

Продолжим работу с каркасом сайта, и узнаем, как делается подвал (footer) сайта.

Ещё раз посмотрим на заготовку.

Напомню, что блоку сайдбар мы придали свойство ”float”, и он стал как бы наплывающим на другие элементы. Даже лучше сказать он приподнялся, и освободил место для других элементов.

Каркас сайта

Теперь представим, что произойдёт, когда мы начнём наполнять его содержанием. Блок sidebar начнёт увеличиваться в высоту, наплывёт на блок footer, и дальше станет раздвигать рамку оболочки.

Что бы этого не произошло, нужно запретить блоку “sidebar”, да и «content» тоже, наплывать на блок “footer”. Делается это следующим образом.

В таблице стилей  создаётся новый класс clear (очистить). Свойство так же назовём “clear”, а значение дадим “both”(всё). Существуют ещё значения “right” и “left” для тех случаев, когда запретить наплыв нужно справа или слева.

.clear{
  clear: both;
}

Затем, в селекторах “content” и “sidebar”, убираем заданную им высоту (height:80px), так как будем наполнять их текстом.

После этого, перед блоком <div id=footer>, пропишем ещё один блок <div>, и вставим в него только что созданный класс ”clear”, который запретит другим блокам наплывать на <footer>.

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="sidebar"></div>
        <div id="content"></div>
        <div class="clear"></div>
        <div id="footer"></div>
    </div>

Теперь скопируем несколько любых абзацев текста и вставим их в блоки ”content” и “sidebar”. В первый побольше, во второй поменьше, соответственно их размерам.

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="sidebar">
Напомню, что блоку сайдбар мы придали свойство ”float”, и он стал как-бы наплывающим на другие элементы.
Даже лучше сказать он приподнялся, и освободил место для других элементов.
Теперь представим что произойдёт когда мы начнём наполнять его содержанием. Блок начнёт увеличиваться
в высоту, наплывёт на блок “footer” и дальше станет раздвигать рамку оболочки.         </div>         <div id="content"> Как сделать колонки одной высоты в CSS. Тема эта не простая так как прежде чем рассматривать её
Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px и убавим
ширину обоих блоков на 20px у каждого т.к. внутренний отступ у нас составит по 10 с двух сторон,
всего 20, и если этого не сделать этот отступ раздвинет блоки и они налезут друг на друга. 
Ну вот, текст разместился и подвал отодвинулся, правда разместился текст как-то уж больно близко к краям
блоков поэтому давайте его немного подправим. Как сделать колонки одной высоты в CSS. Тема эта
не простая так как прежде чем рассматривать её Для этого зададим селекторам “sidebar”
и “content” внутренний отступ 10px и убавим ширину обоих блоков на 20px у каждого
т.к. внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать этот
отступ раздвинет блоки и они налезут друг на друга.          </div>         <div id="clear"></div>         <div id="footer"></div>     </div>

И смотрим, что получилось.

Ну вот, текст разместился и подвал отодвинулся, правда разместился текст, как-то уж больно близко к краям блоков, поэтому давайте его немного подправим.

Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px, и убавим ширину обоих блоков на 20px у каждого, так как внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать, этот отступ раздвинет блоки, и они налезут друг на друга.

#sidebar{
  background-color: #2ff553;
  margin-bottom: 10px;
  width: 180px;
  float: right;
  padding: 10px;
}
#content{
  background-color: #9ef7af;
  margin-bottom: 10px;
  width: 670px;
  padding: 10px;
}

Посмотрим.

Каркас сайта Вот так гораздо приятнее глазу, не правда-ли. Теперь давайте обобщим то, что связано с каркасом сайта и посмотрим, как выглядит полностью код каркаса сайта в  html файле.

<!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{
     height: 80px;
     background-color: #25B33f;
     margin-bottom: 10px;
}
#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;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="sidebar">Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать
Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
        </div>
        <div id="content">А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали
больше всего времени.
И я решил написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
        </div>
        <div class="clear"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

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

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


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

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

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

Каркас сайта < < < В раздел > > > Резиновый сайт.
 

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

27 комментариев на «Каркас сайта (продолжение).»

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

    Здравствуйте Юрий. По Вашему вопросу я не могу понять, что у Вас не получается. В коде, который в статье, всё ОК. Так как статья написана давно, я тоже скопировал его и вставил в Notepad++ всё нормально отобразилось как в статье.

  2. Юрій говорит:

    Здраствуйте я попробував ваш код но у меня не получается такаяже картинка как і у вас. Помогите понять в чьом ошибка пожалуста. Ниже код каторий полностю скопирован как у вас више.

    Документ без названия

    #wrapper{
    width: 900px;
    outline: 1px solid #787274;
    padding: 10px;
    margin: 0 auto;
    }
    #header{
    height: 80px;
    background-color: #25B33f;
    margin-bottom: 10px;
    }
    #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;
    }

    Напомню, что блоку сайдбар мы придали свойство ”float”, и он стал как-бы наплывающим на другие элементы.
    Даже лучше сказать он приподнялся, и освободил место для других элементов.
    Теперь представим что произойдёт когда мы начнём наполнять его содержанием. Блок начнёт увеличиваться
    в высоту, наплывёт на блок “footer” и дальше станет раздвигать рамку оболочки.

    Как сделать колонки одной высоты в CSS. Тема эта не простая так как прежде чем рассматривать её
    Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px и убавим
    ширину обоих блоков на 20px у каждого т.к. внутренний отступ у нас составит по 10 с двух сторон,
    всего 20, и если этого не сделать этот отступ раздвинет блоки и они налезут друг на друга.
    Ну вот, текст разместился и подвал отодвинулся, правда разместился текст как-то уж больно близко к краям
    блоков поэтому давайте его немного подправим. Как сделать колонки одной высоты в CSS. Тема эта
    не простая так как прежде чем рассматривать её Для этого зададим селекторам “sidebar”
    и “content” внутренний отступ 10px и убавим ширину обоих блоков на 20px у каждого
    т.к. внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать этот
    отступ раздвинет блоки и они налезут друг на друга.

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

    В контенте Игорёк. Там он её родимую. Дальше-то уже запрет наплывания стоит. Так что в контенте всё главное действо и произошло.

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

    Здравствуйте! Не понял, где дед старуху донял.

  5. Наталья говорит:

    Конспекты у вас замечательные, спасибо вам и вашим учителям , после вашего конспекта у себя лишь заметки остается ставить : ).
    А ПГС — ну да, это специализация — промышленное и гражданское строительство. Просто факультет у нас небольшой был, поэтому по привычке среди своих — одноименный.

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

    А что такое факультет ПГС? Для меня ПГС — это песчанногравийная смесь. Это ведь не может быть названием факультета. Я то энергетик. И на этой же ноте: мой блог — это мои конспекты. Наверное помните что такое конспекты и что они значили для студента. Может быть поэтому он относительно популярен, хотя абсолютно ничего нового или необычного в нём нет.

  7. Наталья говорит:

    Доброе утро, Сергей! Спасибо за моральную поддержку : ). Для меня Ваш блог — очень удобная инструкция по построению сайта. Может быть, потому, что вы начали с консоли и каркаса. А я на факультете ПГС когда-то училась : ).

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

    Вот это интересно. Позиционирование вообще-то кроссбраузерно и от оперативки не зависит, иначе бы все сайты выдавали бы чёрте что на разных компах.
    Надо поискать в свойствах родителя, да и самого элемента. Мне встречалось свойство width с вендорными префиксами, значит у него есть какие-то проблемы с кроссбраузерностью. Может какое-то другое не полностью кроссбраузерное свойство изменяет расстояния. Например box-shadow (тень). Да и border-radius совсем недавно стал читаться везде одинаково. Может на старых версиях глючить. В общем, дело тут не в position: absolute;.

    Что касается скриншёта, то вот Вам сервис — http://trueimages.ru/. Грузите в него скриншёт, а в коммент вставляете ссылку, и всё.

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

    Спасибо, с рисунками разобрался, благодаря вашему следующему уроку (сразу не обратил внимание на него), теперь разбираюсь с позиционированием рисунка в блоке. жаль, что нельзя скриншот прикрепить к вопросу. У меня на двух компьютерах, разное отображение рисунка получается. На обеих яндекс браузер я использую, но ОС разные, на одном ХР, на другом 7 и мониторы разные 27″ и 20″.
    Выставляю абсолютные координаты:
    img{ /*4foto*/
    position: absolute; /*Позиционируется абсолютно, относительно родителя*/
    top: 260px; /*Координата сверху*/
    left: 280px; /*Координата слева*/
    )
    Фото получается в разных местах, на разных компьютерах.

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

    Раз появляется текст, то 100% ошибка в синтаксисе кода. Если ошибка в чём-то другом, то на экране появляется квадратик тега img. Я точно не могу увидеть ошибку, так как в комменте и Вы ошиблись, не поставив точку с запятой в спецсимволах, и вордпрес похоже переделал прямые кавычки на угловые. Вообще-то второй вариант верный, с условием что угловые скобки на местах спецсимволов и значения в прямых кавычках.
    Посмотрите внимательнее ваш исходник и скорее всего легко найдёте ошибку.

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

    Здравствуйте, не могу разобраться, как вставить картинку в блок header. Пробовал так:
    &ltdiv id=»header»img src=»images/heads.png»&gt&lt/div&gt
    картинки нет. Пробовал так:
    &ltdiv id=»header»&gt &ltimg src=»images/heads.png»&gt&lt/div&gt
    появляется текст img src=»images/heads.png»

  12. Дмитрий говорит:

    Очень интересные уроки, легко учатся. Спасибо огромное.

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

    Скопируйте код который у вас не работает и пришлите, я посмотрю. Только если будете вставлять его в комментарий, замените угловые скобки в тегах на спецсимволы Открывающая — &lt; закрывающая — &gt; иначе код просто не отобразится. Если вписывать спецсимволы не хочется (муторное дело), то создайте новый документ в Notepad++, вставьте туда Ваш код, сохраните файл как .txt, и пришлите его мне на почту starper55plys.ru.

  14. Владимир говорит:

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

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

    Вообще-то inline отменяет блочность, то есть если блочный элемент нужно расположить не с новой строки, то тут и поможет inline. Для конкретного примера, по которому вопрос, Вам, думаю, будет интереснее докопаться самому. Я ведь выложил все коды, не как аксиомы, а для того чтоб с ними можно было творчески поработать. В этом и заключается основной смысл изучения. Вставляете код в Notepad++, имеете результат, и включаете творческий процесс. Пробуете что-то подправить, что-то убавить, что-то добавить, и в результате получаете знания. Вообще веб — это творчество, в котором готовые решения — только основа, а дальше — твори и ищи. Вот возможно display:inline; как то можно заменить на float, или вообще убрать, возможно что-то ещё можно сгруппировать и сократить, а к чему-то применить другое правило. Пробуйте, ищите, варианты 100% есть, у меня только один из них.

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

    Любопытно на что влияет значение inline в этом правиле? Вопрос по предыдущей странице.

    #blok{
    position:absolute;
    top:10px;
    left:590px;
    display:inline;

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

    Да. На странице Каркас сайта не выводится форма комментариев. Такой вот зихер движка. Одна страница такая на весь сайт. Чтоб исправить придётся её удалять, потом сделать по новой. Всё руки никак не дойдут. Если срочно, спросите здесь, и укажите, что вопрос по предыдущей странице.

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

    На предыдущей странице не действующая кнопка «спросить». Вопрос у меня по предыдущей странице.

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

    Обращайся. Чем смогу помогу.

  20. DARKINWORCER говорит:

    это доп. информация чтоб картина была понятней а из вашего последнего комментария всё понял спасибо за помощь может ещё к вам обращусь

  21. DARKINWORCER говорит:

    и отступов между блоками нету

  22. DARKINWORCER говорит:

    у меня есть картинка которую сверстать надо

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

    Пока даже создавать ничего не нужно. Посмотри сам.
    Все блоки одной ширины, что wrapper, что sidebar. Нет отступов, нет подвала. Ничего же не отобразится, кроме блока шапки и wrapper.
    Не нужно всё подряд позиционировать абсолютно. И у позиционирования должно быть две координаты.
    Ты возьми для тренировки мой код, и поэкспериментируй, он специально только для этого и сделан. Поиграй с цифрами, посмотри что получается.
    А чтоб понять вёрстку вот тебе ссылочка http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model

  24. DARKINWORCER говорит:

    создайте html документ там все увидите

  25. DARKINWORCER говорит:

    body {
    font: 12px/16px Arial, sans-serif;
    color: #000;
    margin: 0;
    padding: 0;
    }
    img {
    border: 8px;
    position: absolute; top: 10px;

    }
    table, td, div, span {
    vertical-align: top;
    }
    a {
    text-decoration: underline;
    color: #1582dd;
    }
    a:hover {
    text-decoration: none;
    }
    .clear {
    clear: both;
    }

    blockquote{
    padding-left: 310px;
    position: absolute; top: 23px;
    font-size: 16px;

    }

    #header {

    width: 640px;
    height: 94px;
    background-color: #730eaa;

    }

    #wrapper{
    width: 640px;
    height: 76px;
    background-color: #ebebeb;
    }

    #sidebar{
    width: 640px;
    background-color: #ffffff;
    }

    #C9{

    position: absolute; top: 125px;
    padding-left: 30px;

    }
    select {
    position: absolute; top: 115px;
    padding-left: 400px;
    border-radius: 8px;
    height: 42px;
    }

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

    Опять не совсем понятно. Вернее совсем не понятно. Может быть ты в комментарии написал код, с использованием угловых скобок? Тогда комментарий отобразится не корректно. Вместо угловых скобок, нужно ставить спецсимволы.

  27. DARKINWORCER говорит:

    всё загораживая а я пытаюсь через width сделать размер но от этого текст внутри селект бокса
    исчезает

    и да я не очень опытный сам недавно начал верстать пытаться ну 13 лет пока много не знаю вот многое и не получается

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

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