X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Плавающие блоки
AcckiyWarrior
AcckiyWarrior
Topic Starter сообщение 30.6.2010, 12:31; Ответить: AcckiyWarrior
Сообщение #1


Допустим у меня есть блок <DIV id=text></DIV>
и блок <DIV id=footer></DIV>. Я хочу сделать, чтобы блок Text растягивался по высоте, и сразу же после него шел блок footer, как это сделать?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 30.6.2010, 12:38; Ответить: locky-yotu
Сообщение #2


Так и сделать.
<div class="text">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
copyright, or other footer content
</div>
Или нужно, чтобы футер всегда был прижат к низу страницы?

Кстати, несколько советов мимоходом.
0) Пишите названия тегов строчными буквами
1) Используйте class, а не id. Используйте id только для скриптов
2) Пишите двойные кавычки при указании id, class или других атрибутов
3) Вы еще не ставите первой строчкой доктайп? Тогда мы идем к вам!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AcckiyWarrior
AcckiyWarrior
Topic Starter сообщение 30.6.2010, 13:05; Ответить: AcckiyWarrior
Сообщение #3


Кстати, несколько советов мимоходом.
0) Пишите названия тегов строчными буквами
1) Используйте class, а не id. Используйте id только для скриптов
2) Пишите двойные кавычки при указании id, class или других атрибутов
3) Вы еще не ставите первой строчкой доктайп? Тогда мы идем к вам!


Ид использую только для блоков, доктайп ставлю, кавычки тоже(здесь неохото было)):hmhm:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AcckiyWarrior
AcckiyWarrior
Topic Starter сообщение 30.6.2010, 13:10; Ответить: AcckiyWarrior
Сообщение #4


Мне нужен сам код тамблицы стилей для блока footer, если вы меня не поняли, p.s. блок text имеет
height:auto;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 30.6.2010, 13:16; Ответить: locky-yotu
Сообщение #5


(AcckiyWarrior @ 30.6.2010, 16:05) *
Ид использую только для блоков

Я как раз и говорю о том, что этого не надо делать, только если с этим блоком не оперирует какой-либо скрипт. Используйте классы, а не айди.

(AcckiyWarrior @ 30.6.2010, 15:31) *
Я хочу сделать, чтобы блок Text растягивался по высоте, и сразу же после него шел блок footer

Так и происходит всегда. Заканчивается один блок, и начинается другой.

(locky-yotun @ 30.6.2010, 15:38) *
нужно, чтобы футер всегда был прижат к низу страницы?

Так? Или чего вы хотите?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AcckiyWarrior
AcckiyWarrior
Topic Starter сообщение 30.6.2010, 15:55; Ответить: AcckiyWarrior
Сообщение #6


#text {
position:absolute;
width:796px;
top:200px;
height:auto;
left:200px;
background-color:#FFF;
border-left:none;
}

#footer {
position:absolute;
width:988px;
height:150px;
top:auto;
left:8px;
right:8px;
background-color:#FF9;
border-top:#000 solid 1px;
}

При таком коде футер распологается вверху страницы, прямо на хедере
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AcckiyWarrior
AcckiyWarrior
Topic Starter сообщение 30.6.2010, 15:58; Ответить: AcckiyWarrior
Сообщение #7


Да, чтобы он был прижат к низу страницы, т.е шел сразу после текста
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 30.6.2010, 16:04; Ответить: locky-yotu
Сообщение #8


А скжите, пожалуйста, зачем вы использовали position:absolute?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Some Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.text {
width:796px;
margin:200px auto 0;
background:#fff
}

.footer {
width:988px;
margin:0 auto;
height:150px;
background:#ff9;
border-top:1px solid #000;
}
--
>
</style>
</head>
<body>

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget ipsum quis justo volutpat venenatis vel congue felis. Sed quis lacinia justo. Nullam at accumsan justo. Nunc venenatis vehicula ipsum, a convallis mauris pharetra eget. Integer sit amet varius orci. Suspendisse potenti. Curabitur et varius diam. Nunc eget nisi ligula, at semper odio. In non neque sed urna commodo vehicula. Phasellus ut lectus lectus, eget tincidunt turpis. Vivamus feugiat pharetra eros, sit amet lobortis lorem laoreet at. Proin gravida placerat diam quis blandit.</p>

<p>Curabitur ligula elit, iaculis vitae posuere auctor, consectetur semper dolor. Maecenas et eros quis est tincidunt elementum quis in lacus. In pharetra cursus nisl, et suscipit quam commodo vel. Curabitur sodales neque eu nisi fermentum semper. Nulla ac arcu sapien, vel semper mi. Vivamus bibendum tincidunt urna, vitae tincidunt dolor ultricies eu. Etiam id quam justo, eget cursus magna. Duis eu massa a orci porttitor ornare. Nam sem tortor, imperdiet id laoreet id, ornare eget nibh. Duis eget elit non urna bibendum congue sodales sed ante. Nulla ornare adipiscing fringilla. Nam id orci quis lacus tempor vehicula id vitae est. Fusce cursus elementum mollis. Ut viverra elementum elementum. Aliquam tempus, lacus at pharetra auctor, neque justo sodales nisi, sit amet blandit lacus magna in ipsum. Morbi semper leo sit amet metus bibendum ullamcorper. Pellentesque sit amet est ac enim pulvinar convallis id dictum odio. Sed auctor euismod ornare.</p>

<p>Quisque nec enim et magna faucibus tincidunt. Ut rutrum vehicula ipsum, vitae dapibus risus auctor a. Aliquam turpis risus, varius sit amet sagittis ut, lacinia nec lectus. Etiam pellentesque cursus sapien, vel pellentesque neque adipiscing vitae. In enim felis, vulputate et porta vitae, porta sit amet nunc. Aliquam hendrerit porta sodales. Maecenas libero tortor, euismod et vulputate tempor, convallis rutrum quam. Curabitur libero lacus, dignissim id congue non, consectetur sed mauris. Proin faucibus tellus dolor, et adipiscing arcu. Proin adipiscing, justo et sodales porta, lorem magna adipiscing ipsum, a scelerisque sem turpis ut justo. Vivamus posuere neque eget felis mattis venenatis. Donec tempus vestibulum neque ut vestibulum. Nullam at odio lacus. In hac habitasse platea dictumst. Mauris et nisi id nisi cursus dictum. Morbi vel urna ut metus condimentum commodo in eu metus. Proin viverra porttitor orci, cursus auctor massa posuere vel. Nulla risus nisi, vulputate id bibendum et, rutrum ut ligula. Nullam eleifend, nisl et feugiat egestas, est neque dapibus leo, nec iaculis est massa eget velit. Morbi sed odio dui, quis mattis lorem.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus porta magna, at ultricies tellus ornare id. Donec vitae ultricies nisl. Aliquam accumsan blandit dolor vitae sodales. Ut ac lectus sed mauris dictum condimentum quis vitae orci. Donec mauris tellus, mattis nec elementum et, aliquam ac libero. Sed dapibus rutrum arcu vitae egestas. Curabitur quis turpis mi. Pellentesque et quam ac lectus venenatis venenatis. Nullam accumsan accumsan aliquam. Fusce tellus velit, sagittis ullamcorper blandit non, ullamcorper non urna. Quisque a ligula at neque sodales viverra. Pellentesque vitae tempus dolor. Nulla condimentum sem et lectus condimentum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras quam enim, adipiscing a tempor in, tincidunt interdum nulla. Praesent accumsan blandit condimentum. Mauris venenatis, erat blandit vehicula vulputate, lectus urna vestibulum velit, a vestibulum dolor nibh id nulla.</p>

<p>In accumsan tristique quam, non consectetur risus volutpat eu. Vivamus congue imperdiet odio ac accumsan. Vestibulum a massa dui. Proin ultrices egestas erat, quis tristique justo accumsan quis. Aenean sed mi a diam rutrum varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada semper nisi tristique molestie. Vestibulum aliquam, arcu ut fringilla feugiat, dui enim dapibus urna, consectetur dignissim nisl eros sed enim. Phasellus et leo elit. Nulla facilisi. Ut urna turpis, facilisis non tincidunt quis, consequat non purus. Vestibulum at iaculis mauris. Duis at felis enim, non accumsan orci. In in est dolor. Aliquam scelerisque viverra lacinia. </p>
</div>
<div class="footer">
copyright, or other footer content
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 30.6.2010, 16:04; Ответить: locky-yotu
Сообщение #9


(AcckiyWarrior @ 30.6.2010, 18:58) *
Да, чтобы он был прижат к низу страницы, т.е шел сразу после текста

Это разные вещи. Вы понимаете?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AcckiyWarrior
AcckiyWarrior
Topic Starter сообщение 30.6.2010, 16:24; Ответить: AcckiyWarrior
Сообщение #10


при таком коде, футер не отображается вообще
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продам места под сквозные блоки на СМИ сайте
текст или графика
0 seo_vladimir 763 2.9.2020, 12:14
автор: seo_vladimir
Открытая тема (нет новых ответов) Не могу выровнять блоки по правую сторону
1 Dark_Delphin 5904 18.11.2016, 0:14
автор: -Петр Чирнов-
Открытая тема (нет новых ответов) При уменьшении масштаба разъезжаются блоки
0 Alex.Bulgakov 3481 9.11.2016, 15:28
автор: -Alex.Bulgakov-
Открытая тема (нет новых ответов) Как поднять блоки вверх
2 Denis_sf 12869 21.11.2013, 22:32
автор: -hennessy-
Открытая тема (нет новых ответов) Сайт расползается на блоки при смене размера шрифта
3 datenrettung 5613 26.2.2013, 22:16
автор: -Arks-


 



RSS Текстовая версия Сейчас: 29.3.2024, 14:48
Дизайн