VPF::Как спозиционировать? - Форум программистов

OlegNT

Дата 22.6.2007, 09:40 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 58
Регистрация: 21.3.2006
Где: Нижний Тагил

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

Есть таблица, фиксированной ширины, выровненная по центру окна браузера. Соответственно, при растяжении/сжатии окна, поля слева и справа увеличиваются/сужаются.

Есть еще одна таблица (ну или div - без разницы) - маленькая. Тоже фиксированной ширины, ее нужно расположить так, чтобы она была в правом верхнем углу основной таблицы - поверх содержимого. И чтобы при изменении размеров окна браузера она так же и оставалась приклеенной к тому углу.

Вот вопрос: как это сделать?

(см. схему таблиц в прикрепленном файле)

position: absolute не подходит, потому что окно браузера растягивается, а красная всегда остается по центру

Это сообщение отредактировал(а) OlegNT - 22.6.2007, 09:40

Присоединённый файл ( Кол-во скачиваний: 15 )

page.png 2,47 Kb

WebDisaster

Дата 22.6.2007, 17:50 (ссылка)

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

Загрузка ...

Опытный

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

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

А почему position: absolute не подходит? По-моему самое то, просто внешний контейнер ("синяя" таблица или див) тоже должны быть позиционированы (position: relative). Смысл этого в том, чтобы задать "точку отсчёта" для вложенного блока и позиция считалась уже от него, а не от окна браузера (html).

OlegNT

Дата 23.6.2007, 10:27 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 58
Регистрация: 21.3.2006
Где: Нижний Тагил

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

Т.е. вы имеете в виду, назначить зеленому блоку точку отсчета, так, чтобы position:absolute работал относительно зеленой? А как это сделать?

WebDisaster

Дата 23.6.2007, 11:46 (ссылка)

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

Загрузка ...

Опытный

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

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

Ваш вариант (бордеры, фоновый цвет, паддинги и маргины (кроме auto), само собой, можно убрать =)

Код


<!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>
<title>Ваш вариант</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
#outer {
    width: 750px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #333;
    position: relative;
    background-color:#dCd6d0;
}
.included {
    position:absolute;  
    top: 10px;
    right: 10px; 
    width: 170px;
    margin: 10px;
    padding: 10px;
    background-color:#CCCC00;
    border: 1px solid #000;
}
-->
</style>
</head>

<body>
    <div id="outer">
        <div class="included"><p>Здесь содержимое вложенного блока</p></div>
    <p>Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. </p>
    </div>
</body>
</html>

Второй вариант: избавляемся от "мусора" в коде в виде лишнего внешнего контейнера

Код


<!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>
<title>Второй вариант</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
html, body {
    padding: 0;
    margin: 0;
}
body {
    width: 750px;
    margin: 0 auto;
    background-color:#dCd6d0;
    position: relative;
}
.included {
    position:absolute;  
    top: 10px;
    right: 10px; 
    width: 170px;
    margin: 10px;
    padding: 10px;
    background-color:#CCCC00;
    border: 1px solid #000;
}
-->
</style>
</head>

<body>

<div class="included">
    <p>Здесь содержимое вложенного блока</p>
</div>

<p>Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. Здесь содержимое внешнего контейнера. </p>

</body>
</html>

</body>
</html>

Надеюсь, что Вашу задачу я понял правильно =)

Это сообщение отредактировал(а) WebDisaster - 23.6.2007, 12:48

OlegNT

Дата 25.6.2007, 18:55 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 58
Регистрация: 21.3.2006
Где: Нижний Тагил

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

WebDisaster, да, задача понята правильно smile

В общем, вот конкретный пример:

http://tram.ntagil.ru/develop.html

Нужно, чтобы таблица blablablabla была под словом "Форум" и левее картинки с надписью "Опрос". Что-то не получается :(

WebDisaster

Дата 25.6.2007, 22:29 (ссылка)

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

Загрузка ...

Опытный

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

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

Примерно так:

<div style="width: 170px; border: 1px solid blue; position: absolute; right: 5px; margin: 5px; padding: 0px; top: 5px;">
blablablabla<br />blablablabla<br />blablablabla<br />blablablabla<br />blablablabla<br />blablablabla<br />
</div>

top: - задаёт (в пикселях, процентах и т.д.) величину отступа от верхнего края div.contents_container

OlegNT

Дата 26.6.2007, 18:48 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 58
Регистрация: 21.3.2006
Где: Нижний Тагил

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

Огромное спасибо! Все получилось smile

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