VPF::Блочная верстка - Форум программистов

Redstuff

Дата 27.2.2011, 02:23 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

Помогите реализовать верстку на блоках как на картинке, не получается сделать левую и контентную части, чтобы растягивались по высоте

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Âåðñòêà îò AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;width:1100px; background: #ff0000; margin: auto;}
#header {height:200px; background: #ffff00;}
#left {float:left;width:200px; background: #0ff0aa; height:100%;}
#right {margin-left:200px; background: #0ff7f0; height:100%;}
#spacer {height:100px;}
#footer {height:100px;margin:-100px auto;; background: #ff00ff; width:1100px; }
.clear {clear:both;}

</style>
</head>
<body>
<div id='wrapper'>
<div id='header'>
<!-- Ñîäåðæèìîå õýäýðà -->
</div>
<div id='container'>


 <div id='left'>
 <!-- Ñîäåðæèìîå ëåâîé êîëîíêè -->
 left
 </div>
 <div id='right'>
 <!-- Ñîäåðæèìîå ïðàâîé êîëîíêè -->
 right
 </div>
</div>
<div class='clear'></div>
<div id='spacer'></div>
</div>

<div id='footer'>
<!-- Ñîäåðæèìîå ôóòåðà -->
</div>
</body>
</html>

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

LeD4eG

Дата 27.2.2011, 11:27 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 29.9.2009
Где: Волгоград

Репутация: нет
Всего: 1

Redstuff, во-первых атрибуты приводятся в двойных кавычках, если вы на xHTML пишете.

Код


<div id="container">
    <div id="header">....</div>
    <div id="left">....</div>
    <div id="right">....</div>
    <div id="footer">...</div>
<

Код


#container {
     .......}
#header {
    width:...
    height: .....
}
#left {
    float: left;
    width: .....   //задаётся обязательно
    height: ..... //высота должна быть такой же и для #right
}
#right {
   float: rigth; //можно и делать этого. вместо этого создать класс .left и оба блока (сайдбар и блок контента) будут прижиматься друг          другу.
   width:  //задаётся обязательно
#footer {
    clear: both;
    width: ....
}

--------------------

Ты не успел стать для кого-то главным, кому-то очень нужным.....

Redstuff

Дата 27.2.2011, 12:11 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

LeD4eG, на счет кавычек учту, а вот по верстке ничего не понятно.

Мне требуется, чтобы высота левого и правого блоков тянулись по высоте так, чтобы окно браузера было заполнено на 100%, высота футера и хедера заданна.

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

LeD4eG

Дата 27.2.2011, 12:43 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 29.9.2009
Где: Волгоград

Репутация: нет
Всего: 1

Redstuff, ну так подумай какая страницы будет у тебя. вычти из общей высоты высоту header и footer и получишь высоту сайдабара и области содержимого (помни, чтjavascript:%20sendForm('submit');о также надо учитывать поля для всех элементов и толщину рамок).

есть ещё вариант. объедини плавающие элементы в один блок (высота этого блока рассчитывается по приведённому выше способу). потом для плавающих элементов задай высоту height: 100%. тогда дочерние элементы будут занимать 100% высоту родительского элемента.

PS вряд ли что понятно....да?

--------------------

Ты не успел стать для кого-то главным, кому-то очень нужным.....

Redstuff

Дата 27.2.2011, 15:06 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

LeD4eG, у меня щас если честно уже времени нету.
если даш готовый вариант готов оплатить работу

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

LeD4eG

Дата 27.2.2011, 16:12 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 29.9.2009
Где: Волгоград

Репутация: нет
Всего: 1

Redstuff, какую именно работу?тебе каркас сделать?

--------------------

Ты не успел стать для кого-то главным, кому-то очень нужным.....

LeD4eG

Дата 27.2.2011, 16:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 29.9.2009
Где: Волгоград

Репутация: нет
Всего: 1

ловите!

Страница:

Код


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>
<title>Каркас</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="forum_task.css" />
</head>
<body>
    <div id="header">
        <p class="text">Твой заголовок: под логотип, главную навигацию и т.д.</p>
    </div><!--end header-->

    <div id="content">
        <div id="left_sidebar">
            <p class="text">Сайдбар под вспомогательную навигацию</p>
        </div><!--end left_sidebar-->
        
        <div id="text_container">
            <p class="text">Область под содержимое сайта</p>
        </div><!--end text_container-->
    </div><!--end content-->
    
    <div id="footer">
        <p class="text">Область под информацию о копирайте, партнёрах и т.д.</p>
    </div><!--end footer-->
</body>
</html>

стили (имя forum_task.css - если будете создавать для себя локальную версию стилей)

Код


/* Убираем для всего документа поля и отступы по умолчанию */
* {
    margin: 0;
    padding: 0;
    }

body {
    width: 1024px;
    height: 720px;
    text-align: center;
    margin: 0 auto;
    }
.text {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 90%;
    word-spacing: 1px;
    font-weight: 600;
    }
    /*------Header--------*/
    #header {
        width: 100%;
        height: 20%;
        background-color: #FF0;
        }
    /*-------Content-------*/
    #content {
        width: 100%;
        height: 70%;
        }
        #content #left_sidebar {
            float: left;
            width: 20%;
            height: 100%;
            background-color: #9F3;
            }
        #content #text_container {
            float: right;
            width: 80%;
            height: 100%;
            background-color: #3FF;
            }
    /*-------Footer-------*/
    #footer {
        width: 100%;
        height: 10%;
        clear: both;
        background-color: #C0C;
        }

вот и вся работа smile

.
на валидаторе не проверял, но должно быть всё нормально. для того, чтобы быть уверенным - проверьте сами.

--------------------

Ты не успел стать для кого-то главным, кому-то очень нужным.....

Redstuff

Дата 27.2.2011, 18:09 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

LeD4eG, неа, не то!) не тянется контент и левый блок!

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

LeD4eG

Дата 27.2.2011, 19:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 29.9.2009
Где: Волгоград

Репутация: нет
Всего: 1

Redstuff, в каком смысле не тянутся?)))куда им тянуться надо?

а вообще есть такое замечательное свойство height для раздела content (там, где как раз таки и находится сайдбар и область контента), который занимает 70% от родительского элемента (то есть от body длиной в 720px). если думаешь, что не тянется, то увеличь либо одно, либо другое значение. smile

Это сообщение отредактировал(а) LeD4eG - 27.2.2011, 19:57

--------------------

Ты не успел стать для кого-то главным, кому-то очень нужным.....

Redstuff

Дата 27.2.2011, 20:25 (ссылка)

(нет голосов)

Загрузка ...

Команда REDSTUFF

Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

LeD4eG, сделай 100% и посмотри

мне нужно получить тоже самое, только без использования таблицы

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
        <title>Untitled</title>
        <style>
        html, body {
        margin: 0 auto;
        padding: 0;
        text-align: center;
        }
        #maintable {
        height: 100%;
        margin: auto;
        padding: 0;
        border-spacing: 0;
        }
        #maintable td {
        vertical-align: top;
        padding: 0;
        border-spacing: 0;
        }
        #header {
        height: 110px;
        background: #000000;
        width: 1100px;
        
        }
        #hblock {
        border-bottom: solid 1px #787373;
        height: 100%;
        }
        #left {
        background: #ff00ff;
        width: 200px;
        }       
        #lblock {
        border-left: solid 1px #787373;
        height: 100%;
        background: #f3f3f3;
        }
        #right {
        background: #ffffff;
        width: 900px;
        }       
        #rblock {
        border-left: solid 1px #787373;
        height: 100%;
        border-right: solid 1px #787373;
        }
        #footer {
        height: 100px;
        background: #fff;
        }
        #fblock {
        border-top: solid 1px #787373;
        border-bottom: solid 6px #787373;
        border-left: solid 1px #787373;
        height: 100%;
        border-right: solid 1px #787373;
        }
        </style>
        
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="maintable">
<tr>
        <td id="header" colspan="2"><div id="hblock"></div></td>
</tr>
<tr>
        <td id="left"><div id="lblock"></div></td></td>
        <td id="right"><div id="rblock"></div></td>
</tr>
<tr>
        <td id="footer" colspan="2">
        <div id="fblock"></div>
        </td>
</tr>
</table>



</body>
</html>

Это сообщение отредактировал(а) Redstuff - 27.2.2011, 20:26

--------------------

ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>

LeD4eG

Дата 27.2.2011, 20:34 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 29.9.2009
Где: Волгоград

Репутация: нет
Всего: 1

Redstuff, Вы то же самое и имеете на данный момент. сделал - блоки растянулись.

--------------------

Ты не успел стать для кого-то главным, кому-то очень нужным.....

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »