Создание страницы с помощью блоков <div>

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

Модератор: Дмитрий

Создание страницы с помощью блоков <div>

Сообщение rusl81 » Ср окт 12, 2011 15:00

Добрый день. Пытаюсь создать страницу сайта с помощью блоков <div>, столкнулся с проблемой. Когда область контента пустая, то отступ от шапки нормальный (см. с1)

Когда заполняю область текстом, тоже все нормально, но когда заключаю текст в теги <p>…</p>, то расстояние между шапкой и областью контента увеличивается те эта область опускается, а расстояние между шапкой и сайтбарами остается тем же (см. с2)

Подскажите, как разрешить проблему. Спасибо. CSS стили внизу
Вложения
с1.JPG
с1.JPG (74.41 KiB) Просмотров: 3558
с2.JPG
CSS

body{
background-color:#d2d2d2;
font:14px Tahoma, Verdana;
color:#ffffff;
}

#wrapper {
width:1152px;
height:900px;
margin:0 auto;
background-color:#000080;
padding:5px;
outline:2px solid #5F9EA0;
min-width:1024px;
max-width:1152px;
}

#header {
height:160px;
background-image:url(../images/heder1.jpg);
margin-bottom:5px;
}

#sidebarL{

background-color:#1E90FF;

width:220px;
float:left;

}

#sidebarR{

background-color:#1E90FF;

width:220px;
float:right;
}

#content{

background-color:#1E90FF;
margin-bottom:10px;
width:692px;
margin-left:230px;
margin-right:230px;
}

#futer{
height:50px;
background-image:url(../images/futer1.jpg);

}

.clear{
clear:both;
}

ul {
list-style: none;
margin: 5;
padding: 0;
margin-left:9px;

}
img {
border: none;
}

#vert_menu {
font-weight: bold;
font-family: Tahoma, Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
width: 202px;
}

#vert_menu li {
height: 37px;
}

#vert_menu li a:link, #vert_menu li a:visited {
text-decoration: none;
color: #AFEEEE;
display: block;
background: url(../images/vert_menu.png) 0 0 no-repeat;
padding: 13px 0px 10px 15px;
}

#vert_menu li a:hover, #vert_menu li #current {
color: #FFF;
background: url(../images/vert_menu.png) 0 -37px no-repeat;
padding: 15px 0 10px 15px;
}
h4{
text-align:center;
}

p {

text-align:justify;
padding-right:10px;
padding-left:10px;

}

.new3{
padding-left:30px;
padding-right:10px;
}
с2.JPG (134.82 KiB) Просмотров: 3558



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

Re: Создание страницы с помощью блоков <div>

Сообщение Александр » Чт окт 13, 2011 00:05

Можно попробовать в стили вывода контента принудительно добавить отступ сверху 10 пикселей.

#content{

background-color:#1E90FF;
margin-top:10px;
margin-bottom:10px;
width:692px;
margin-left:230px;
margin-right:230px;
}

Есть классный онлайн сервис для вёрстки шаблонов на div: http://csstemplater.com/
Там всё очень просто, задаёте свои данные для сайта, генерируете шаблон, далее скачиваете его (стили будут уже вложены)



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Создание страницы с помощью блоков <div>

Сообщение rusl81 » Чт окт 13, 2011 09:05

Спасибо, Александр, Вы навели меня на мысль. Поставил margin-top:-14px и все сровнялось 35-)



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

Re: Создание страницы с помощью блоков <div>

Сообщение Parfumer » Ср ноя 09, 2011 00:48

В бесплатном курсе Е.Попова по CSS на этот счет раскрывается куча фишек именно по блочной верстке сайта.
Вроде он есть на странице бесплатных курсов у Александра.



Аватар пользователя
Parfumer
Студент
Студент
 
Сообщений: 11
Зарегистрирован: Сб окт 22, 2011 23:31
Откуда: Ukraine? пгт.Рокитно
Пункты репутации: 0

Re: Создание страницы с помощью блоков <div>

Сообщение Александр » Ср ноя 09, 2011 01:38

Parfumer писал(а):В бесплатном курсе Е.Попова по CSS на этот счет раскрывается куча фишек именно по блочной верстке сайта.
Вроде он есть на странице бесплатных курсов у Александра.


Это точно, см мою подпись…



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор




Вернуться в Создание простых HTML сайтов и страниц

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1