PDA

Просмотр полной версии : Вопрос про CSS


Hulio
22.02.2009, 14:58
Не получается сделать выравнивание текста относительно нижнего края браузера, как это сделать с помощью css ?

пробовал так:

1. Создал файл css и подключил его в <link href="Style/PageStyle.css" rel="stylesheet" type="text/css">

2. в стилях создал правило

#BottomText {
font-size: 1.0em;
font-weight: normal;
vertical-align:bottom;
}

3. подключал так:

<div id="BottomText" align="center"> All Right Reserved © 2009 bla bla site</div>


Пробовал различные теги для форматиования но они форматируются относительно родительского объекта (таблицы например) а мне нужно по браузеру.

Пробовал bottom, margin-bottom, эксперементировал с position тоже не подходит.

Regis Filius
22.02.2009, 19:26
Относительно родителя он всегда и будет, все тэги так делают.
Как вариант можно добавить в #bottomtext
top:100%;
left:50%;
position:absolute;
При этом убрать выравнивание по центру.
Но здесь много подводных камней, абсолютное позиционирование вещь не очень удобная.
Уж лучше сделать таблицу )))

Hulio
22.02.2009, 21:28
Я так и понял что лучше юзать таблицу, но тогда как решить следующую задачу:
я незнаю какое разрешение у пользователя поэтому фиксированную таблицу делать не хочу, т.к. страничка у меня не прокручивается и нехочу чтобы был скроллбар.
Нужно сделать таблицу такую чтобы она ввысоту полностью заполняла браузер, и там уже сделать выравнивание текста по bottom. height=100% ?

Regis Filius
23.02.2009, 09:36
Ты уверен, что контент сайта не будет выходить за границы? Если нет, то лучше этого не делать.
В таблице для всех строк, кроме контента, делаешь фиксированную высоту, а для контента ставишь 100%. Те строки, которые будут выше строки контента будут наверху, а нижние, соответственно, внизу. Здесь и вертикальное выравнивание не надо будет делать, так и так они внизу будут.
Здесь еще лучше будет поставить в теле документа margin на ноль, если ты хочешь картинки ставить по границам, и убрать прокручивание вообще. Так что если даже контент будет выходить за границы одной страницы браузеры, прокрутки не будет. Но лично я бы не стал так делать.

То есть примерно это будет выглядеть так.

Часть таблицы стилей, который отвечают за отображение таблицы:
body {
margin:0px;}

#main {
width:100%;
height:100%;}

#header {
height:200px;
width:100%;}

#content {
height:100%;
width:100%;}

#footer {
height:50px;
width:100%;
text-align:center;}

Сама таблица. Закрывающие дескрипторы у строк и столбцов не обязательно, просто привычка )
<table id="main" cellpadding="0px" cellspacing="0px">
<tr>
<td id="header">Шапка сайта с фиксированной высотой 200 пикселей.</td>
</tr>
<tr>
<td id="content">Контент, который занимается все пространство, оставшиеся от шапки и футера.</td>
</tr>
<tr>
<td id="footer">Футер с копирайтами.</td>
</tr>
</table>
Все отступы убрал, чтобы сайт занимал весь браузер.

Hulio
02.03.2009, 15:00
Спасибо ))