VPF::3 дива в строке - Форум программистов

artsb

Дата 22.7.2009, 10:14 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

Всем привет!

Есть див. Внутри него три дива в строку. 2-ой див имеет статическую ширину. Его нужно расположить по центру. 1-ый и 3-ий должны занимать всё оставшееся место слева и справа соответственно.

Есть очень много информации о том как сделать крайние дивы статического размера, а центральный будет растягиваться. А по моему вопросу ничего не нашёл :(

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

Чем отличается умный человек от мудрого?
Умный - выпутается из любой ситуации.
Мудрый - просто в неё не попадёт.

LolensSmith

Дата 22.7.2009, 13:09 (ссылка)

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

Загрузка ...

Новичок

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

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

Сам задумался над этим вопросом, и лучше чем

Код


<div>
<center>
  <div style="float: left; border: 1px solid #000000;"> LEFT </div>
  <div> 
    <div style="float: right; border: 1px solid #000000;">RIGHT</div>
    <div style="width: 200px; border: 1px solid #000000;">CENTER</div>
    
  </div>
</center>
</div>

<div>

придумать не смог. Я не уверен что это подойдет, так как при изменении размеров слева и справа, center становится совсем не в центре.

p.s. А почему бы не попробывать с table.

Код



<!-- // Уберите border=1 чтобы убрать границы. // -->
<!-- // cellpadding=0 и cellspacing=0 уберает отступы между ячейками, что придает подобие слоям. // -->
<!-- // width="100%" - размер таблицы в ширину = 100% // -->
<!-- // Если убрать бордер, то по моему не чем не отличить от div'ов // -->

<table border=1 cellpadding=0 cellspacing=0 width="100%">
<!-- // Пример 1 // -->
 <tr>
  <td align="left"> Размещено с лева, размер не имеет значения </td>
  <td align="center" width="200px"> Размещено по центру с размерами в ширину 200 px. </td>
  <td> Размещено с права, размер не имеет значения </td>
 </tr>

<!-- // Пример 2 // -->
 <tr>
  <td align="left"> Размещено с лева, размер не имеет значения </td>
  <td align="center" width="200px"> Размещено по центру с размерами в ширину 200 px. </td>
  <td align="right"> Размещено с права, размер не имеет значения </td>
 </tr>

</table>

Получится тоже самое что и с дивами только другими тегами...

artsb

Дата 22.7.2009, 14:11 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

LolensSmith, спасибо.

Я тоже пробовал таблицу сделать. И сразу споткнулся об IE... После того, как делаю для всех (3-ёх) ячеек padding: 0, в IE 1-ый и 3-ий столбцы исчезают. Пришлось добавить пробелы. Вроде, всё норм. Это, вообще, как-нибудь лечится?

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

LolensSmith

Дата 22.7.2009, 14:42 (ссылка)

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

Загрузка ...

Новичок

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

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

Если я тебя правильно понял, то вот код как правильно пишется...
  - заменяет пробел smile

. Так же еще по-моему делают прозрачный gif размерами 1x1, и вставляют код картинки в ячейку.

Код


<table border=1 cellpadding=0 cellspacing=0 width="100%">
 <tr>
  <td align="left" valign="top"> &nbsp; </td>
  <td align="center" width="200px" valign="top"> &nbsp; </td>
  <td valign="top"> &nbsp; </td>
 </tr>
</table>

А для чего делать padding: 0; если cellpadding=0 cellspacing=0 итак делает отступ 0px??

p.s. добавил в код valign="top". Он распологает содержимое ячейки в верху. По стандарту в браузерах идет по центру.

Допустим если ширина ячейки 3 будет на много больше чем 1. то в ячейке 1 текст будет распалагаться на уравне центра ячейки 3. Впрочем valign="top" это исправляет.

p.s.s. Поэксперементируй с cellpadding=0 cellspacing=0, поймешь что они делают. Сделай к примеру cellpadding="5px" cellspacing="10px" или больше...

artsb

Дата 22.7.2009, 14:59 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

Цитата(LolensSmith @ 22.7.2009, 14:42

)

делают прозрачный gif

Я заюзал  

Цитата(LolensSmith @ 22.7.2009, 14:42

)

А для чего делать padding: 0;

Привычка. Стараюсь всё делать css средствами. Хотя может cellpadding=0 поможет...

Цитата(LolensSmith @ 22.7.2009, 14:42

)

поймешь что они делают

это то я знаю smile

Я просто думал, что есть способ сделать это дивами.

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

WebDisaster

Дата 22.7.2009, 15:08 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(artsb @ 22.7.2009, 10:14

)

Есть очень много информации о том как сделать крайние дивы статического размера, а центральный будет растягиваться. А по моему вопросу ничего не нашёл :(

artsb, в Вашем случае всё делается точно также, только наоборот =)

Код


<!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">
* {padding:0; margin:0;}
#first {
    width: 50%;
    margin-right: -51px;
    float: left;
    background-color:#0f0;
}
#second {
    width: 50%;
    margin-left: -51px;
    float: right;
    background-color: #00f;
}
#third {
    width: 100px;
    background-color: #fff;
    border: 1px solid #f00;
    float:left;
}
</style>

</head>

<body>
    <div id="wrapper">
        <div id="first">1</div>
        <div id="second">2</div>
        <div id="third">3</div>
    </div>
</body>
</html>

(бордеры и бэкграунды добавлены, чтобы были видны блоки)

LolensSmith

Дата 22.7.2009, 15:17 (ссылка)

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

Загрузка ...

Новичок

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

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

Пробывал на Opera 9.64, Боковые div'ы "Прячутся" под центральным...

artsb

Дата 22.7.2009, 15:23 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

WebDisaster, спасибо. Единственное, 2-ку не видно smile

...

Не подскажете сразу, как вытянуть див внутри другого дива по высоте. Если поставить height: 100%, в FF его высота становится равной высоте экрана (???), а в IE - ничего...

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

WebDisaster

Дата 22.7.2009, 15:28 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(artsb @ 22.7.2009, 15:23

)

Не подскажете сразу, как вытянуть див внутри другого дива по высоте. Если поставить height: 100%, в FF его высота становится равной высоте экрана (???), а в IE - ничего...

artsb, высота любого блока считается браузером в %% от высоты внешнего бочного элемента. Т.е. нужно задавать необходимую высоту и для всех внешних блоков.

Цитата(artsb @ 22.7.2009, 15:23

)

Единственное, 2-ку не видно

А как должно быть? Не имея в руках конкретной задачи затрудняюсь что-либо сказать.

Убежал...

artsb

Дата 22.7.2009, 16:54 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

Цитата(WebDisaster @ 22.7.2009, 15:28

)

А как должно быть?

Должно быть видно smile

Кстати, меня устраивает вариант с таблицей. Единственный косяк, который сейчас заметил, это то, что при уменьшении ширины окна браузера, средняя ячейка таблицы уменьшается. Пробовал ставить overflow: hidden и таблице и всем ячейкам. Не помогает...

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

WebDisaster

Дата 22.7.2009, 17:31 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(artsb @ 22.7.2009, 16:54

)

Должно быть видно

Что будет внутри "резиновых" блоков? Текст? Картинка? Другие блоки?
Что будет внутри среднего "фиксированного" блока? От этого зависит, что советовать.
В примере ниже, например, обрезаться ничего не будет. Но я не представляю, подходит ли это Вам. Существенные условия задачи остались неизвестными.

Код


<!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">
* {padding:0; margin:0;}
#first {
    width: 50%;
    margin-right: -51px;
    float: left;
    background-color:#0f0;
}
#first * {
   margin-right: 60px; background-color: #fff;
} 
#second {
    width: 50%;
    margin-left: -51px;
    float: right;
    background-color: #00f;
}
#second * {
   margin-left: 60px; background-color: #fff;
} 
#third {
    width: 100px;
    background-color: #fff;
    border: 1px solid #f00;
    float:left;
}
</style>

</head>

<body>
    <div id="wrapper">
        <div id="first"><p>1</p></div>
        <div id="second">2</div>
        <div id="third"><p>3</p></div>
    </div>
</body>
</html>

artsb

Дата 22.7.2009, 18:12 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

WebDisaster, я вас понял. Значит так. Я делаю footer. Это див, в котором три дива. Центральный фиксированный - это продолжение самой страницы. Крайние дивы должны занимать всё оставшееся место. Все три дива имеют бекграунды. В центральном будут дивы. Крайние пустые.

А у вас нет мыслей по поводу таблицы?..

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

WebDisaster

Дата 22.7.2009, 18:37 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(artsb @ 22.7.2009, 18:12

)

Крайние пустые.... Все три дива имеют бекграунды.

repeat-x?
repeat-y?
no-repeat?

Я думаю, что проблему "видимости" бэкграунда можно будет решить его позиционированием, даже не добавляя дополнительных блочных элементов. Примерно так:

#second {
background: transparent url(../images/page-bg.png) repeat-y 50% 45px;
}

А если увидеть макет, то возможно окажется, что эти "боковые резиновые" блоки вообще не нужны, а бэкграунд repeat-y можно позиционировать прямо в <body>

Про background-position

Цитата(artsb @ 22.7.2009, 18:12

)

А у вас нет мыслей по поводу таблицы?..

Если Вас интересует моё мнение, то я сторонник семантики: таблица предназначена для хранения табличных данных, а не для позиционирования элементов. Но я не собираюсь никому своё мнение навязывать (или даже убеждать =). Делайте так, как считаете нужным.

Это сообщение отредактировал(а) WebDisaster - 22.7.2009, 18:55

artsb

Дата 22.7.2009, 20:49 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

Цитата(WebDisaster @ 22.7.2009, 18:37

)

repeat-x?
repeat-y?
no-repeat?

Я довольно хорошо знаю css. smile

С этим проблем нет.

Цитата(WebDisaster @ 22.7.2009, 18:37

)

А если увидеть макет, то возможно окажется, что эти "боковые резиновые" блоки вообще не нужны, а бэкграунд repeat-y можно позиционировать прямо в <body>

Неа. Не получится. Слева и справа разные бэкгроунды.

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

Itsys

Дата 23.7.2009, 06:29 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34

Цитата(artsb @ 22.7.2009, 16:54

)

Единственный косяк, который сейчас заметил, это то, что при уменьшении ширины окна браузера, средняя ячейка таблицы уменьшается. Пробовал ставить overflow: hidden и таблице и всем ячейкам. Не помогает...

Это решается вставкой прозрачного однопиксельного gifa растянутого на всю ширину ячейки, в этом случае ячейка не уменьшится меньше этих размеров.

Это сообщение отредактировал(а) Itsys - 23.7.2009, 06:29

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