PHP, дивы, <div>, подробности

Для начала откроем нашу страничку написанием основного дива. В нём, как в контейнере будут находиться все остальные дивы. И закроете его только в конце странички перед тегом </body>. А откроете соответственно после тега <body>. Что то я описывать как то всё наоборот начал. Но главное вы поняли :) И присвоим этому диву класс, к примеру class="container", класс можете называть, как захотите. Всё вместе это будет иметь следующий вид - <div class="container">. Что бы закрыть любой див - </div>.


Теперь основному диву нужно придать свойства. Точнее его классу. Прописать ширину отображаемой странички, цвет, фон и т.д. К примеру так:

.container {
width: 100%;/* Общая ширина, у меня задана в процентах. Можете задать фиксированную, в пикселях к примеру. */
max-width: 1440px;/* Максимальная ширина. */
min-width: 400px;/* Минимальная ширина. */
background: #;/* Цвет фона. У меня он убран. Можете сделать фоновое изображение, вставив другой тег - background-image. И прописать путь до вашего изображения, вместо цвета. Пример чуть ниже */
background-image: url(http://seozar.ru/images/fon11.png);/* Фоновое изображение. Примерно так, если использовать фоновое изображение. Только путь до вашего фона будет другой. */
margin: 0 auto; /* Если ваша страничка меньше по ширине, чем 100%, то значения этого тега позволит отображать её по центру. */
}

Это был просто пример, для лучшего понимания общей картины данного вопроса. Чуть позже я приведу все данные таблицы CSS с объяснениями. Кстати копировать можете вместе с объяснениями. Они не будут мешать работе таблицы CSS. Ну а теперь приступим к созданию странички.


<div class="container">/* Открыл основной див. */

Понятно что это логотип. Можете сделать его любого размера и с любым фоном. Здесь я задал ширину, высоту, и фоновое изображение. Можно и самому логотипу присвоить класс и там уже над ним поиздеваться :) href="#" - это можете выкинуть, или сделать из логотипа ссылку, можно на свой же сайт. Некоторые люди любят на него потыкать :). Особенно полезно делать на форуме, что бы при нажатии на логотип, перекидывало на основной сайт.

<div class="header">
<p><a href="#"><img src="http://seozar.ru/images/logo.png" width="200" height="100" style="background-image: url(http://seozar.ru/images/sozdanie-raskrutka-sajta/fon1.png); display:block;" /></a></p>
</div>

 

Теперь идёт меню. Можете сделать прямо ссылками на страничке. А можете загнать с помощью include уже готовое меню.

<div class="sidebar1">
<ul class="nav">
<li><a href="#">Первая ссылка</a></li>
<li><a href="#">Вторая ссылка</a></li>
<li><a href="#">Третья ссылка</a></li>
</ul>
</div>

Ну а этим дивом мы сделаем место для вашего контента.

<div class="content">
</div>

</div>/* Закрыл основной див. */


Вот и вся страничка. Просто собрал всё в кучку, для наглядности.

<div class="container">/* Открыл. */
<div class="header">/* Шапка. */
</div>
<div class="sidebar1">/* Меню. */
</div>
<div class="content">/* Контент. */
</div>
<div class="footer">/* Подвал. */
</div>
</div>/* Закрыл. */


Здесь я напишу свойства таблицы стилей с подробными объяснениями:

<style type="text/css">
.container {
width: 100%;/* Общая ширина, у меня задана в процентах. Можете задать фиксированную, в пикселях к примеру. */
max-width: 1440px;/* Максимальная ширина. */
min-width: 400px;/* Минимальная ширина. */
background: #;/* Цвет фона. У меня он убран. Можете сделать фоновое изображение, вставив другой тег - background-image. И прописать путь до вашего изображения, вместо цвета. Пример чуть ниже */
background-image: url(http://seozar.ru/images/fon11.png);/* Фоновое изображение. Примерно так, если использовать фоновое изображение. Только путь до вашего фона будет другой. */
margin: 0 auto; /* Если ваша страничка меньше по ширине, чем 100%, то значения этого тега позволит отображать её по центру. */
}
.sidebar1 {
float: left;/* Выравнивание по левом краю. В принципе само значение говорит - оставить, но это не важно. */
width: 35%;/* Ширина под меню. У меня поставлены проценты. Так что если хотите фиксированную ширину меню поставьте значение в пикселях. Но не забывайте, что и ширину под контент, надо будет сделать фиксированной. */
background: #;/* Цвет, у меня не поставлен, можете сделать фоновое изображение. */
background-image: url(http://seozar.ru/images/fon11.png);/* Фоновое изображение. */
padding-bottom: 10px; /* Отступы */
}
.content {
padding: 10px 0;/* Отступы. Сверху и снизу по 10рх, сверху и снизу 0рх. */
width: 65%;/* Ширина под контент. Не забудьте согласовать с шириной меню. */
float: left;/* Выравнивание по краю. */
background-image: url(http://seozar.ru/images/fon12.png);/* Фоновое изображение. */
}
.footer {
padding: 10px 0;
background: #;
position: relative;
clear: both;
background-image: url(http://seozar.ru/images/fon13.png);/* Фоновое изображение. */
}
</style>


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

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP