Верстка в footer'e

Вид для печати

11.11.2007, 00:30
Shokoladniu

Имеется подвал (footer). Верстка div без таблиц.

Код:

<div id="footer" class="inside"> <p style="margin:0;">[img]images/1.gif[/img] [img]images/1.gif[/img]© 2007 [Only registered and activated users can see links. Click Here To Register...]</p> *</div>

Сейчас в css у меня

Код:

#footer { ****background-color: #C5BA72; ****color: #000; ****text-align: right; ****padding: 10px; }

Как с помощью css сделать, чтобы текст остался справа, а баннеры были выравнены по центру?
[attachment=7138:attachment]
11.11.2007, 00:54
Aykroyd

Заключить баннеры и текст в два разных параграфа. Затем какой-нибудь один из этих параграфов спозиционировать абсолютно внутри футера...
11.11.2007, 01:08
Shokoladniu

У меня резиновая верстка, абсолютное позиционирование не подойдет.

Код:

<div id="footer" class="inside"> * *<p align="right" style="margin:0;">© 2007 [Only registered and activated users can see links. Click Here To Register...]</p> * *<p align="center">[img]images/1.gif[/img][img]images/1.gif[/img]</p> * *</div>

Как сделать теперь чтобы они на одном уровне находились?? C помощью z-index???
11.11.2007, 02:12
Рёга

Цитата:

Originally posted by Shokoladniu@Nov 10 2007, 21:08
[b]Как сделать теперь чтобы они на одном уровне находились?? C помощью z-index???

Код:

<div id="footer" class="inside" style="overflow: hidden;"> * <p style="margin:1em 0 0 0; float:right;">© 2007 [Only registered and activated users can see links. Click Here To Register...]</p> * <p style="margin:0; float:right;width:50%;">[img]1.gif[/img][img]1.gif[/img]</p> </div>

Пора для футера отдельный подраздел открывать [Only registered and activated users can see links. Click Here To Register...]
11.11.2007, 02:36
Shokoladniu

Спасибо!!! Работает, только3 вопроса
1. при 50% баннеры не находятся по середине страницы. Методом тыка было обнаружено, что на середине они находятся при 80%

2. В эксплорере творится не очень приятная вещь
[attachment=7139:attachment]
При float:center; все становится нормально, но проблема с выравниванием.

3. Как запихнуть стили в css применительно к абзацу?
есть #footer,а надо создать p#footer?
11.11.2007, 03:07
Aykroyd

Цитата:

Originally posted by Shokoladniu@Nov 11 2007, 03:36
1. при 50% баннеры не находятся по середине страницы. Методом тыка было обнаружено, что на середине они находятся при 80%
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Не надо методом тыка. Вообще float: right; для баннеров не надо. Сделайте float: right; для параграфа с текстом, а параграф с баннерами пустите просто прямым потоком со стилем p {text-align: center;}.

Цитата:

Originally posted by Shokoladniu@Nov 11 2007, 03:36
2. В эксплорере творится не очень приятная вещь
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Бывает)

Цитата:

Originally posted by Shokoladniu@Nov 11 2007, 03:36
При float:center; все становится нормально, но проблема с выравниванием.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
float:center; не существует в принципе...

Цитата:

Originally posted by Shokoladniu@Nov 11 2007, 03:36
3. Как запихнуть стили в css применительно к абзацу?
есть #footer,а надо создать p#footer?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
#footer p.images {text-align: center;}

Параграфу с баннерами назначьте class="images"...

Цитата:

Originally posted by Рёга@Nov 11 2007, 03:12
Пора для футера отдельный подраздел открывать [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Ну-ну)
11.11.2007, 03:32
Shokoladniu

Создал 2 класса

Код:

#footer p.text { ****margin:1em 0 0 0; ****float:right;**** } #footer p.images { ****text-align: center; ****margin:0; }

HTML

Код:

<div id="footer" class="inside"> *<p class="text">© 2007 [Only registered and activated users can see links. Click Here To Register...]</p> *<p class="images">[img]images/1.gif[/img][img]images/1.gif[/img]</p> </div>

В результате:
в эксплорере- выравнивание все равно почему-то не по середине.
[attachment=7142:attachment]
В опере -тоже не по середине =((
[attachment=7141:attachment]

Прочитал, что при строгом <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Ширина формируется путем сложения значений width, padding, margin и border.
Это может влиять на ситуацию???
11.11.2007, 03:49
Aykroyd

Цитата:

Originally posted by Shokoladniu@Nov 11 2007, 04:32
Прочитал, что при строгом <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Ширина формируется путем сложения значений width, padding, margin и border.
Это может влиять на ситуацию???
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Во-первых, не при строгом, а при полном (хоть строгом, хоть переходном – не суть). Вы же указали выше НЕ полный доктайп. Для совместимости со [Only registered and activated users can see links. Click Here To Register...] используйте полный.

Во-вторых, все это не влияет на ситуацию. Решить Вашу задачу можно различными способами. Но самый простой вариант (как сразу и говорил) – спозиционировать параграф с текстом абсолютно внутри футера, а не при помощи float: right;. Если позиционируем по правому краю, причем тут «резина»?

P.S. На этот раз с жареными сосисками и пивом не срослось... )
11.11.2007, 13:43
Shokoladniu

Цитата:

спозиционировать параграф с текстом абсолютно внутри футера

Как это сделать? Задавать значение отступа слева в пикселях? А если изменится размер окна?
11.11.2007, 14:56
Рёга

Цитата:

Originally posted by Shokoladniu@Nov 10 2007, 22:36
[b][float:center;

Консорциум упустил данный параметр, а хотелось бы [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by Aykroyd@Nov 10 2007, 23:07
[b]Не надо методом тыка. Вообще float: right; для баннеров не надо. Сделайте float: right; для параграфа с текстом, а параграф с баннерами пустите просто прямым потоком со стилем p {text-align: center;}.

Код:

<div id="footer" class="inside"> * <p style="text-align:center;">[img]1.gif[/img][img]1.gif[/img]</p> * <p style="margin: -2em 0 0 0; float:right;">© 2007 [Only registered and activated users can see links. Click Here To Register...]</p> </div>

Цитата:

Originally posted by Aykroyd@Nov 10 2007, 23:49
[b]Во-вторых, все это не влияет на ситуацию. Решить Вашу задачу можно различными способами. Но самый простой вариант (как сразу и говорил) – спозиционировать параграф с текстом абсолютно внутри футера, а не при помощи float: right;. Если позиционируем по правому краю, причем тут «резина»?

Код:

<div id="footer" class="inside" style="position: relative;"> * <p style="text-align:center;">[img]1.gif[/img][img]1.gif[/img]</p> * <p style="position: absolute;right: 1em; top: 1.5em;">© 2007 [Only registered and activated users can see links. Click Here To Register...]</p> </div>

Цитата:

Originally posted by Aykroyd@Nov 10 2007, 23:49
[b]P.S. На этот раз с жареными сосисками и пивом не срослось... )

Каюсь, 2 банки Золотой бочки с чипсами без сосисек =]
11.11.2007, 16:26
Shokoladniu

Рёга, оба ваши варианта работают отлично! Ура! Взял первый вариант, но теперь проблема в высоте футера:

[attachment=7143:attachment]

Как бы сделать по меньше высоту?
11.11.2007, 16:29
Aykroyd

Цитата:

Originally posted by Рёга@Nov 11 2007, 15:56
Каюсь, 2 банки Золотой бочки с чипсами без сосисек =]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Зачот) [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by Shokoladniu@Nov 11 2007, 17:26
Взял первый вариант,* но теперь проблема в высоте футера
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Возьмите второй)
11.11.2007, 16:36
Shokoladniu

Aykroyd, взял второй, и там такая же проблема с высотой. Как ее уменьшить теперь?
[attachment=7143:attachment]
11.11.2007, 16:53
Aykroyd

Елки-палки, ну регулируйте свойство top какое вам там нужно... Это же элементарно...
11.11.2007, 17:05
Shokoladniu

Aykroyd, спасибо за терпение, просто я в css "ни бум-бум" [Only registered and activated users can see links. Click Here To Register...]
Сделал так:

Код:

#footer { ****position: relative; ****background-color: #C5BA72; ****color: #000; } #footer p.text { ****position: absolute; right: 1em; top: 1em;**** **** } #footer p.images { ****margin: 0 0 0 0; ****text-align: center; }

и чистый, девственный html

Код:

<div id="footer" class="inside"> <p class="text">© 2007 [Only registered and activated users can see links. Click Here To Register...]</p> <p class="images">[img]images/1.gif[/img][img]images/1.gif[/img]</p> * </div>

Спасибо вам за помощь и оперативность =)). Жалко на форуме нельзя ставить "+"
11.11.2007, 18:36
Aykroyd

Не за что.

Цитата:

Верстка div без таблиц.

А CSS надо знать. Это в первую очередь. Тем более, что общее «направление движения» Вы выбрали правильное...
11.11.2007, 18:43
Shokoladniu

"просветляюсь" на зарубежныхсайтах =))
11.11.2007, 20:12
Aykroyd

В принципе, и [Only registered and activated users can see links. Click Here To Register...] хватает...