VPF::З дива вряд - Форум программистов

Alex_B

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

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

Загрузка ...

Шустрый

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

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

Помогите пожалуйста решить проблему.

Нужно поставить 3 дива в один ряд. Но нельзя заключать эти 3 дива в еще какие-нибудь другие:

Т.е. вот такой вариант не подходит
http://blog.html.it/layoutgala/LayoutGala07.html
(Колонки заключены в другие div-ы)

Нужно что бы дивы не были размещены внутри других, вот так должен выглядеть HTML код:

Код


<body>

<div id="left">Left</div>
<div id="middle">M</div>
<div id="right">Right</div>

</body>

Центральный <div id="middle"> должен быть фиксированной ширины и находиться по центру экрана, а два дива по бокам должны прилегать к границам центрального.

По этому не подходит и вот такой вариант:
http://www.thenoodleincident.com/tutorials...sic3_touch.html
(колонки побокам фиксированной ширины - а центральный div нет)

Вот как это выглядит:
+--------------------------+
|      |                   |      |
|      |                   |      |
|      |                   |      |
|      |                   |      |
|      |                   |      |
+--------------------------+

Спасибо.

p.s. Я уже замучался и близок мысли что такое невозможно.

WebDisaster

Дата 27.7.2007, 12:55 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

Код


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    margin: 0 auto;
    padding: 0;
    width: 750px;
}
#left, #middle, #right {
    float: left;
    width: 33%;
    background-color:#CCC;
    border: 1px solid #fff;
}
-->
</style>
</head>

<body>

<div id="left">Left</div>
<div id="middle">M</div>
<div id="right">Right</div>

</body>
</html>

Это общий принцип.
width 33% для #left, #middle и # right и 750px для body замените на нужные параметры.
И ещё одна оговорка: body width не будет работать в IE<6 и QuirksMode

Это сообщение отредактировал(а) WebDisaster - 27.7.2007, 13:02

Alex_B

Дата 27.7.2007, 13:06 (ссылка)

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

Загрузка ...

Шустрый

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

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

А где тут задается фиксированная ширина центрального блока?

WebDisaster

Дата 27.7.2007, 13:10 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

#middle {width: XXpx}

Ширина для #middle + #left + #right = body {width: 750px}

Alex_B

Дата 27.7.2007, 13:40 (ссылка)

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

Загрузка ...

Шустрый

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

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

WebDisaster, спасибо!
А насколько будет правиль если я задам фон для html?

Код


html {
   background-image: url(../images/body.jpg);
   background-repeat: repeat-x;
}

WebDisaster

Дата 27.7.2007, 13:46 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

Работать это (фон) будет не везде. Конкретней - не помню.

Alex_B

Дата 27.7.2007, 15:59 (ссылка)

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

Загрузка ...

Шустрый

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

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

Спасибо,

А существует возможность сделать все три дива одинаковай высоты?

Что бы дивы побокам были такойже длинны что и центральный:

Вот так сейчас:
+--------------------------+
|      |                   |      |
|      |                   |      |
|      |                   |      |
+----|                   |-----+
       |                   |
      +----------------+

Вот так надо:
+--------------------------+
|      |                   |      |
|      |                   |      |
|      |                   |      |
|      |                   |      |
|      |                   |      |
+--------------------------+

Alex_B

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

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

Загрузка ...

Шустрый

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

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

Вот что нашел

http://www.pmob.co.uk/temp/3colcentred_2a.htm

WebDisaster

Дата 27.7.2007, 20:27 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

Цитата(Alex_B @ 27.7.2007, 15:59)

А существует возможность сделать все три дива одинаковай высоты?

Что бы дивы побокам были такойже длинны что и центральный:

Если устроит вариант со 100% высотой для всех div, тогда так:

Код


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
    height: 100%;
    min-height: 100%;
    padding: 0;
}
body {
    margin: 0 auto;
    width: 750px;
}
#left, #middle, #right {
    height: 100%;
    float: left;
    width: 33%;
    background-color:#CCC;
    border: 1px solid #fff;
}
-->
</style>
</head>

<body>

<div id="left">Left</div>
<div id="middle">M</div>
<div id="right">Right</div>

</body>
</html>

Как и прежде, излагается только общий принцип действий, все конкретные данные подставляйте свои

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