X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> DIV/CSS вёрстка трехколоночного сайта
madcap
madcap
Topic Starter сообщение 12.10.2011, 19:51; Ответить: madcap
Сообщение #1


Здравствуйте, я собрался написать сайт, состоящий из блоков header, ниже в ряд идут левая колонка, средняя основная для самого контента, правая. Левая и правая одинаковые по размеру. Ниже идёт футер. Нужно чтобы средние 3 колонки по высоте независимо от заполненности контентом должны быть 100 процентов, ниже идёт футер. У всех есть margin одинаковый скажем 25 пикселей. Отдельно файл css. Никак не осилю все время что-то съезжает либо недорастягивается. Поделитесь шаблоном пожалуйста, либо дайте совет.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SEVI
SEVI
сообщение 12.10.2011, 21:14; Ответить: SEVI
Сообщение #2


http://lmgtfy.com/?q=%D1%81%D0%BA%D0%B0%D1...%BE%D0%BD%D1%8B
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zdorovnm
zdorovnm
сообщение 12.10.2011, 21:42; Ответить: zdorovnm
Сообщение #3


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

Когда заполняю область текстом, тоже все нормально, но когда заключаю текст в теги <p>…</p>, то расстояние между шапкой и областью контента увеличивается те эта область опускается, а расстояние между шапкой и сайтбарами остается тем же (см. с2)
[attachment=38273:с1.jpg] [attachment=38274:с2.jpg]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="js/equalHeight.js" type="text/javascript"></script>
<title>Фарватер</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="sidebarL">
<ul id="vert_menu">
<li><a href="http://menu.ihtut.net/"><span>Главная</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Проекты</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Вакансии</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Сертификаты</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Контакты</span></a></li>
</ul>
</div>
<div id="sidebarR"></div>

<div id="content">
<h5>!!! фарватер !!! фарватер !!! фарватер !!!</h5>

<p>Компания ООО "Фарватер" выполняет весь комплекс проектных работ — от первых консультаций и разработки архитектурной концепции — до выполнения рабочей документации в полном или необходимом заказчику объеме.</p>

<p>Мы предлагаем:</p>
<ul class="new3">
<li>выгодные цены</li>

<li>гарантированно высокое качество</li>

<li>оперативность и быстрые сроки выполнения</li>

<li>возможность работы по всем городам России и зарубежья</li>
</ul>
<p>Наша компания ООО "Фарватер" обладает большим опытом согласования и проектирования:</p>
<ul class="new3">
<li>проектирование линейных объектов</li>

<li>проектирование зданий и сооружений: архитектурное проектирование жилых зданий, коттеджей, загородных домов, проекты административных зданий, проектирование предприятий различного функционального назначения и промышленных сооружений (складов, цехов, гаражей), т.е. промышленное проектирование.</li>

<li>проектирование автономных источников тепла, котельных, газолучистого отопления (инфракрасных излучателей)</li>

<li>проектирование инженерных систем и сетей</li>

<li>дизайн интерьера</li>

<li>согласование проектной документации</li>

<li>авторский надзор</li>

<li>экспертиза промышленной безопасности</li>

<li>строительный контроль</li>
</ul>
<p>У нас работают высококвалифицированные специалисты: инженеры, проектировщики.</p>

<p>В числе реализованных проектов ООО "Фарватер" более 50 строительных объектов и реконструируемых зданий разного целевого назначения. В течение нескольких лет мы активно сотрудничаем с ведущими инженерными и архитектурными компаниями, широко известными как в России, так и за рубежом, а также помогаем в решении строительных вопросов юридическим и физическим лицам.</p>

<p>Будем рады сотрудничеству с Вами и надеемся, что наши знания и опыт будут Вам полезны.</p>

<h5>!!! Фарватер !!! проектирование !!! проектные фирмы курск !!!</h5>
</div>
<div class="clear"></div>

<div id="futer"></div>
</div>

</body>
</html>


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

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

#header {
height:160px;
background-image:url(../images/heder3.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:5px;
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;
}
h5{
text-align:center;
}

p {

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

}

.new3{
padding-left:30px;
padding-right:10px;
}[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
madcap
madcap
Topic Starter сообщение 12.10.2011, 21:52; Ответить: madcap
Сообщение #4


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

щас приведу свой код

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<body>
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
<div class="header">header</div>
<div class="content">
<div class="leftColum">leftcolum</div>
<div class="rightColum">rightcolum</div>
<div class="middleColum">middlecolum</div>
</div>
<div class="footer">footer</div>
</body>
</html>

CSS:

.header{
border: 1px solid black;
margin-bottom: 25px;
height:100px;
width: 100%;
}

.content{
border: 1px solid black;
margin-bottom: 25px;
overflow:hidden; // для всех браузеров кроме ИЕ
//overflow:visible; // для ИЕ
_height:100%; // фикса для ИЕ6
width: 100%;
height: 100%;
}

.footer{
border: 1px solid black;
margin:0 auto;
height:50px;
width: 100%;
}

.content .leftColum{
width: 20%;
height: 100%;
float: left;
background-position: top left
border: 1px solid black;
}

.content .rightColum{
border-left: 1px solid black;
float:right;
width:20%;
height: 100%;
}

.content middleColum{
width: 30%;
height: 100%;
background-color: red;
background-position: top;
float: right;
overflow: hidden;
}

[IMG]http://img441.imageshack.us/img441/4506/83127515.jpg[/IMG]
Вот что получается, нет рамки почему-то у левой колонки, если заполнять ее текстом, то получится что он вылазит за поля на другие дивы

примерно попробую накидать картинку как я хочу:

[IMG]http://img856.imageshack.us/img856/9069/82951341.jpg[/IMG]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 12.10.2011, 22:14; Ответить: Den1xxx
Сообщение #5


(madcap @ 13.10.2011, 00:52) *
но они замудрены в основном всякими wrapper дивами в диве и так далее, имхо изврат, да и смотреть в такой код и вникать долго надо

Если хотите без врапперов и т.д. — вот самая простая реализация, див+табле:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
Just another skin
</head>
<body>
<div>Header</div>
<table width="100%">
<tr><td width="20%">Left sidebar</td><td width="60%" >Center ciolumn</td><td td width="20%">Right sidebar</td></tr>
</table>
<div>Footer</div>
<body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
madcap
madcap
Topic Starter сообщение 12.10.2011, 22:19; Ответить: madcap
Сообщение #6


Спасибо, вариант интересный, но поставил задачу перед собой делать на дивах ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 12.10.2011, 22:28; Ответить: Den1xxx
Сообщение #7


(madcap @ 13.10.2011, 01:19) *
поставил задачу перед собой делать на дивах

А вот в случае если "поставил задачу на дивах" — пользуйтесь вложенными блоками(wrapper) и другими извращениями.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
madcap
madcap
Topic Starter сообщение 12.10.2011, 22:40; Ответить: madcap
Сообщение #8


(Den1xxx @ 13.10.2011, 01:28) *
А вот в случае если "поставил задачу на дивах" — пользуйтесь вложенными блоками(wrapper) и другими извращениями.


у меня в качестве wrapper в шаблоне див content есть, я уже понял что без этого никак
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 13.10.2011, 0:52; Ответить: Den1xxx
Сообщение #9


(madcap @ 13.10.2011, 01:40) *
я уже понял что без этого никак

В вашем случае я обошёлся бы таблицей.
Потому что так меньше кода, всё понятно, просто и кроссбраузерно.
На дивах делают затем, чтобы блок с основным контентом в коде поставить раньше 2-х сайдбаров.
Тогда контент загружается раньше второстепенных боковин — удобнее для пользователей.
Других причин, чтобы использовать вёрстку блоками, в данном случае нет.
Таблицами так не получится. А вот если к этому добавить требование выровнять все колонки по высоте — получается каша, от которой голова идёт кругом.
Если не будете ставить контент впереди сайдбаров, воспользуйтесь таблицами. Если будете — сгенерируйте в сервисе генератора шаблонов и посмотрите как устроено.
Не надо мучиться, всё давно уже придумано.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
madcap
madcap
Topic Starter сообщение 13.10.2011, 2:02; Ответить: madcap
Сообщение #10


Залил на домен, который отдал мне старший брат для экспериментов Вроде сделал всё как хотел. Но именно осталась проблема с выравниванием всех колонок по высоте.

Привожу style.css:


body, html {
margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к. различные браузеры их по разному воспринимают. */
padding:0px;
text-align:center; /*Выравниваем макет по центру в старых версиях браузеров */
}
#container{
margin:0 auto; /*выравниваем макет по центру в современных браузерах */
margin-top: 20px;
text-align:left; /*Отменяем text-align:center заданное в Body. Делаем чтобы весь текст в макете выравнивался по левому краю */
width:1200px; /* ширина нашего макета*/
}
/*Здесь пишем стили для шапки сайта */
#header{
background-image:url(bgheader.jpg);
}
#header h1 {
margin: 0; /* Обнуляем отсупы для заголовка первого уровня, находящегося в шапке. Это нужно обязательно делать, при использовании заголовков. Если используются параграфы, то тоже нужно обнулить отсупы для них. */
padding: 10px 0; /* Задаем поля */
margin-bottom: 15px;
text-align: center;
}
/*Здесь пишем стили для левой колонки сайта */
#left{
background-image:url(bgleft.jpg);
width:150px; /*ширина колонки */
float:left; /*обязательное выравнивание по левому краю,с включением обтекания*/
}

#left h3 {
margin: 0;
padding: 10px 0;
margin-bottom: 15px;
margin-top: 15px;
text-align: center;
}

/*Здесь пишем стили для правой колонки сайта */
#right{
width:100px; /*ширина правой колонки */
background-image:url(bgright.jpg);
float:right; /*обазятельное выравнивание колонки по правому краю с включением обтекания */
}

#right h3 {
margin: 0;
padding: 10px 0;
margin-bottom: 15px;
margin-top: 15px;
text-align: center;
}

/*Здесь пишем стили для блока контента */
#content{
background-image:url(bgcontent.jpg);
margin:0px; /*обнуляем отступы сверху и снизу*/
margin-left:167px; /*обязательный отступ слева, должен быть немного больше ширины левой колонки */
margin-right:117px; /*Обязательный отступ справа, должен быть немного больше ширины правой колонки */
}
#content h1 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
}
#content p {
margin:0px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:5px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
}
/*атрибут, который опускает подвал сайта ниже всех блоков. Нужен для корректной работы макета. */
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
/*Здесь пишем стили для подвала сайта */
#footer{
background-image:url(bgleft.jpg);
}
#footer p{
margin:0px; /* обнуляем отступы*/
margin-top: 15px;
padding: 10px 0; /* задаем поля */
}


P.S. Урок и шаблон (для допиливания под себя) взяты отсюда и очень рекомендую всем начинающим

Еще один вопрос: помнится во времена фрэймов можно было по гиперссылке из фрейма с навигацией сделать так, чтобы ссылка открывалась в определенном фрейме (чаще тот, который с контентом). Можно ли сделать так же, но с дивом ? Хочется например чтоб в диве левой колонки по гиперссылке например обратная связь менялся контент среднего дива, чтоб обновлялся именно он.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
 38 2Index 6642 18.4.2024, 12:56
автор: 2Index
Открытая тема (нет новых ответов) Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ
 0 bunneh 344 16.4.2024, 18:02
автор: bunneh
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
 11 Aloof 2821 16.4.2024, 12:48
автор: diviner99
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыSiteAnalyzer - бесплатная программа для аудита и анализа сайта
 77 Chaser 74220 9.4.2024, 11:36
автор: Chaser
Открытая тема (нет новых ответов) Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта
 0 Alex-777 864 7.4.2024, 18:05
автор: Alex-777


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 20.4.2024, 2:23

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet