VPF::Выравнивание текста по низу <div>`a.

Coder_D

Дата 7.1.2010, 20:16 (ссылка)

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

Загрузка ...

Новичок

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

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

Добрый день!
Не люблю создавать лишние темы, предпочитаю гугл, но 3 часа экспериментов не принесли видимых успехов.
Структура страницы такая: боди-див-контент.
Так вот. Нужно снизу дива по центру прилепить строку "Дезигнед блаблабла ©".
Сначала я мучался исключительно с css. Потом плюнул, начал делать через таблицу.
В итоге в IE полчилось, но страница растянулась, появился скролл.
в ФФ - строка "Дезигнед блаблабла ©" вылезла из дива и прилипла к низу боди (как футер).
Привожу наглядный код для теста:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
      <title>title</title>
<style type="text/css">
html {
     padding: 20px;
     margin: 0px;
     height: 100%;
     width: 100%;
     }
     
body {
    margin: 0px;
    background: #dcdcdc;
    height: 100%;
    width: 100%;
    }
    
div.back {
    background-color: #ffffff;
    margin: 0 auto;
    height: 100%;
    width: 1200px;
    }
</style>
</head>
<body>
<div class="back">
<p>КОНТЕНТ</p>
Designed by blablabla © <!-- как это прилепить к низу дива back и по центру? -->
</div>
</body>
</html>

Прошу помощи!!!

Это сообщение отредактировал(а) Coder_D - 8.1.2010, 20:50

comcon1

Дата 10.1.2010, 02:54 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 11.6.2005
Где: Москва ДАС-МГУ

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

Спасибо за наличие тестировочного кода в теме. Надо это сделать правилом, мне кажется. Держи ответ:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
      <title>title</title>
<style type="text/css">
html {
     padding: 20px;
     margin: 0px;
     height: 100%;
     width: 100%;
     }
     
body {
    margin: 0px;
    background: #dcdcdc;
    height: 100%;
    width: 100%;
    }
    
div.back {
    background-color: #ffffff;
    margin: 0 auto;
    height: 100%;
    width: 1200px;
    border: 1px solid white; /* ! */
    position: relative; /* ! */
    }
div.bottomv { position: absolute; bottom: 0; }
</style>
</head>
<body>
<div class="back">
<p>КОНТЕНТ</p>
<div class="bottomv">Designed by blablabla © <!-- как это прилепить к низу дива back и по центру? --></div>
</div>
</body>
</html>

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

comcon1 on twitter

Coder_D

Дата 10.1.2010, 17:48 (ссылка)

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

Загрузка ...

Новичок

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

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

comcon1,
Спасибо, всё работает!
Но если с позиционированием всё относительно ясно, то зачем задавать рамку div`у? /*Проверил, без рамки всё тоже работает.*/
И запутался, как выровнять текст по центру теперь?

Это сообщение отредактировал(а) Coder_D - 10.1.2010, 17:53

comcon1

Дата 10.1.2010, 17:59 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 11.6.2005
Где: Москва ДАС-МГУ

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

Рамка обязательно. Хотя бы один из бордеров должен быть. Возможно, не во всех браузерах это актуально.

Чтобы выровнять по центру, нужно выставить ширину. Потому что абсолютное и псевдо-абсолютное позиционирования поджимает ширину дива.

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

comcon1 on twitter

Coder_D

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

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

Загрузка ...

Новичок

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

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

В ФФ работает, в IE разъезжается теперь.
Добавил ширину и рамки для наглядности:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
      <title>title</title>
<style type="text/css">
html {
     padding: 20px;
     margin: 0px;
     height: 100%;
     width: 100%;
     }
     
body {
    margin: 0px;
    background: #dcdcdc;
    height: 100%;
    width: 100%;
    }
    
div.back {
    background-color: #ffffff;
    margin: 0 auto;
    height: 100%;
    width: 1000px;
    border: 1px solid black; /* ! */
    position: relative; /* ! */
    }
div.bottomv {
    position: absolute;
    bottom: 0;
    border: 1px solid black;
    width: 100%;
    text-align: center;
    float: left; /* почему то в IE не работает!!! */
    }
</style>
</head>
<body>
<div class="back">
КОНТЕНТ
<div class="bottomv">Designed by blablabla ©</div>
</div>
</body>
</html>

comcon1

Дата 10.1.2010, 18:17 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 11.6.2005
Где: Москва ДАС-МГУ

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

бордер у внутреннего дива не нужен. только у внешнего. Вот так все ок:

Код


div.back {
    background-color: #ffffff;
    margin: 0 auto;
    height: 100%;
    width: 1000px;
    border: 1px solid black; /* ! */
    position: relative; /* ! */
    }
div.bottomv {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    }

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

comcon1 on twitter

Coder_D

Дата 10.1.2010, 18:20 (ссылка)

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

Загрузка ...

Новичок

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

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

comcon1, Большое спасибо! Всё работает! smile

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