Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Выравнивание текста по низу <div>`a.

Автор: Coder_D 7.1.2010, 20:16

Добрый день!
Не люблю создавать лишние темы, предпочитаю гугл, но 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>

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

Автор: comcon1 10.1.2010, 02:54

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

Код


<!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>

Автор: Coder_D 10.1.2010, 17:48

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

Автор: comcon1 10.1.2010, 17:59

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

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

Автор: Coder_D 10.1.2010, 18:12

В ФФ работает, в 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

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

Код


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;
    }

Автор: Coder_D 10.1.2010, 18:20

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