Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Верстка резины с фиксированными полями 
:(
    Опции темы
darkie
Дата 21.10.2006, 20:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
user posted image

здравсвтуйте! как заверстать сайт в три колонки валидно XHTML 1.0 Strict (с объявление DOCTYPE) с помощью CSS, как указано на картинке? % - резина, px - фиксированные поля
PM MAIL   Вверх
korisarimi
Дата 21.10.2006, 22:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1
Я не понял, вы говорите 3 колонки, а на чертеже я их насчитал аж 7.

Ну, а так в принципе, указываете в стиле width, где нужно в процентах, а где нужно в пикселях
PM MAIL   Вверх
zera
Дата 22.10.2006, 09:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 5
Всего: 9
все что px - паддингами таблицы
вернее не таблицы, а td  smile 

Это сообщение отредактировал(а) zera - 22.10.2006, 09:14
PM MAIL   Вверх
Punk_UnDead
Дата 22.10.2006, 10:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 20
Регистрация: 6.6.2006
Где: Макеевка(Украина)

Репутация: нет
Всего: нет
darkie, три резины ?
а выравнивание по низу надо?
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=win-1251">
<title>3-col layout via CSS</title>
<link rel="stylesheet" type="text/css" href="index.css" media="all">
</head>
<body>
<div id="header"><div class="column-in">
    <h1>3-col layout via CSS</h1>
    <p>
        No tables, no absolute positioning (no positioning at all), <strong>no hacks(!),</strong>  same height of all columns.
        The left and right columns have fixed width (150px), the middle one is elastic. Any (zero or non-zero) margin of the body may be used.
        It works (AFAIK) in any modern browser - I tested it in IE5/Win95, IE6/WinXP, Opera7/WinXP, IE5/Mac, Mozilla, Safari, and Camino.
        It won't work in old browsers poorly supporting CSS (like NN4, IE4 etc).
    </p>
</div></div>

<div id="main">

    <div id="left"><div class="column-in">
        <h4>Left Col</h4>
        <p id="lccont">
            This is content of the LEFT column. It can be <a href="javascript:toggleContent('lccont',1)">short</a>, <a href="javascript:toggleContent('lccont',3)">longer</a> or <a href="javascript:toggleContent('lccont',10)">very long</a>.
        
            This is content of the LEFT column. It can be <a href="javascript:toggleContent('lccont',1)">short</a>, <a href="javascript:toggleContent('lccont',3)">longer</a> or <a href="javascript:toggleContent('lccont',10)">very long</a>.
        
            This is content of the LEFT column. It can be <a href="javascript:toggleContent('lccont',1)">short</a>, <a href="javascript:toggleContent('lccont',3)">longer</a> or <a href="javascript:toggleContent('lccont',10)">very long</a>.
        </p>
    </div></div>

    <div id="right"><div class="column-in">
        <h4>Right Col</h4>
        <p id="rccont">
            This is content of the RIGHT column. It can be <a href="javascript:toggleContent('rccont',1)">short</a>, <a href="javascript:toggleContent('rccont',3)">longer</a> or <a href="javascript:toggleContent('rccont',10)">very long</a>.
        </p>
    </div></div>

    <div id="middle"><div class="column-in">
        <h4>Middle Col</h4>
        <p id="mccont">
            This is content of the MIDDLE column. It can be <a href="javascript:toggleContent('mccont',1)">short</a>, <a href="javascript:toggleContent('mccont',10)">longer</a> or <a href="javascript:toggleContent('mccont',40)">very long</a>.
        </p>
    </div></div>

    <div class="cleaner">&nbsp;</div>

</div></div>

<div id="footer"><div class="column-in">
        <h4>The footer</h4>
        <p>
            Anything follows here...
        </p>
</div></div>
<hr>
</body>
</html>

Код

body { margin: 0pt; padding: 0pt; font-family: sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11pt; line-height: 1.5; font-size-adjust: none; font-stretch: normal; }
#header { margin: 0pt; padding: 0pt; background: yellow none repeat; }
#main { margin: 0pt; padding: 0pt;  }
#left { margin: 0pt; padding: 0pt; float: left; width: 20%; font-size: 80%; }
#right { margin: 0pt; padding: 0pt; float: right; width: 20%; font-size: 80%; }
#middle { margin: 0pt 20%; background: yellow none repeat; font-size: 80%; }
#footer {text-align:center;}
.column-in { margin: 0pt; padding: 0.5em 1em; }
.cleaner { border: medium none ; margin: 0pt; padding: 0pt; clear: both; height: 1px; font-size: 1px; }
h1, h2, h3, h4 { margin: 0.2em 0pt; }
p { margin: 0.5em 0pt; }
a { color: black; }
.copy { text-align: center; font-size: 80%; }



это навскидку переделано из верстки с фиксированными боковушками
раскраски нет, я её снёс потому как была для фиксированных
ну или можешь использовать таблицу


Это сообщение отредактировал(а) Punk_UnDead - 22.10.2006, 10:53
PM MAIL ICQ   Вверх
2man
Дата 23.10.2006, 03:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2007
Регистрация: 6.5.2005
Где: Нижние Чигири

Репутация: 1
Всего: 71
Код

.table1
{
        width:97%;
}
.table2
{
        width:100px;
}

в таблице указываешь класс и все
Код

<table align="center">
<tr valign="top">
<td class="table1">Тратата</td>
.......

и т.д.


--------------------
Быстро поднятое - упавшим не считаеся
PM MAIL ICQ MSN   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0440 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.