Имеется подвал (footer). Верстка div без таблиц.
Сейчас в css у меняКод:<div id="footer" class="inside"> <p style="margin:0;">[img]images/1.gif[/img] [img]images/1.gif[/img]© 2007 [Только зарегистрированные пользователи могут видеть ссылки. ]</p> *</div>
Как с помощью css сделать, чтобы текст остался справа, а баннеры были выравнены по центру?Код:#footer { ****background-color: #C5BA72; ****color: #000; ****text-align: right; ****padding: 10px; }
[attachment=7138:attachment]
Заключить баннеры и текст в два разных параграфа. Затем какой-нибудь один из этих параграфов спозиционировать абсолютно внутри футера...
У меня резиновая верстка, абсолютное позиционирование не подойдет.
Как сделать теперь чтобы они на одном уровне находились?? C помощью z-index???
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 [Только зарегистрированные пользователи могут видеть ссылки. ]</p> * <p style="margin:0; float:right;width:50%;">[img]1.gif[/img][img]1.gif[/img]</p> </div>
Спасибо!!! Работает, только3 вопроса
1. при 50% баннеры не находятся по середине страницы. Методом тыка было обнаружено, что на середине они находятся при 80%
2. В эксплорере творится не очень приятная вещь
[attachment=7139:attachment]
При float:center; все становится нормально, но проблема с выравниванием.
3. Как запихнуть стили в css применительно к абзацу?
есть #footer,а надо создать p#footer?
[/quote]
Не надо методом тыка. Вообще float: right; для баннеров не надо. Сделайте float: right; для параграфа с текстом, а параграф с баннерами пустите просто прямым потоком со стилем p {text-align: center;}.
[/quote]
Бывает)
[/quote]
float:center; не существует в принципе...
[/quote]
#footer p.images {text-align: center;}
Параграфу с баннерами назначьте class="images"...
[/quote]
Ну-ну)
Создал 2 класса
HTMLКод:#footer p.text { ****margin:1em 0 0 0; ****float:right;**** } #footer p.images { ****text-align: center; ****margin:0; }
В результате:Код:<div id="footer" class="inside"> *<p class="text">© 2007 [Только зарегистрированные пользователи могут видеть ссылки. ]</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.
Это может влиять на ситуацию???
[/quote]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'>[Только зарегистрированные пользователи могут видеть ссылки. ]
Во-первых, не при строгом, а при полном (хоть строгом, хоть переходном – не суть). Вы же указали выше НЕ полный доктайп. Для совместимости со [Только зарегистрированные пользователи могут видеть ссылки. ] используйте полный.
Во-вторых, все это не влияет на ситуацию. Решить Вашу задачу можно различными способами. Но самый простой вариант (как сразу и говорил) – спозиционировать параграф с текстом абсолютно внутри футера, а не при помощи float: right;. Если позиционируем по правому краю, причем тут «резина»?
P.S. На этот раз с жареными сосисками и пивом не срослось... )
Как это сделать? Задавать значение отступа слева в пикселях? А если изменится размер окна?спозиционировать параграф с текстом абсолютно внутри футера
Консорциум упустил данный параметр, а хотелось быOriginally posted by Shokoladniu@Nov 10 2007, 22:36
[b][float:center;
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 [Только зарегистрированные пользователи могут видеть ссылки. ]</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 [Только зарегистрированные пользователи могут видеть ссылки. ]</p> </div>Каюсь, 2 банки Золотой бочки с чипсами без сосисек =]Originally posted by Aykroyd@Nov 10 2007, 23:49
[b]P.S. На этот раз с жареными сосисками и пивом не срослось... )
Рёга, оба ваши варианта работают отлично! Ура! Взял первый вариант, но теперь проблема в высоте футера:
[attachment=7143:attachment]
Как бы сделать по меньше высоту?
[/quote]
Зачот)
[/quote]
Возьмите второй)
Aykroyd, взял второй, и там такая же проблема с высотой. Как ее уменьшить теперь?
[attachment=7143:attachment]
Елки-палки, ну регулируйте свойство top какое вам там нужно... Это же элементарно...
Aykroyd, спасибо за терпение, просто я в css "ни бум-бум"
Сделал так:
и чистый, девственный htmlКод:#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; }
Спасибо вам за помощь и оперативность =)). Жалко на форуме нельзя ставить "+"
Не за что.
А CSS надо знать. Это в первую очередь. Тем более, что общее «направление движения» Вы выбрали правильное...Верстка div без таблиц.
"просветляюсь" на зарубежныхсайтах =))
Ваши права
