| |
|
|
| | вот, есть сайт-одна-страничка: http://www.dibal.ru . как сделать футер плавучим, т.е. чтобы он, если нужно, уходил вместе с контентом? он именно не уходит у меня. в низ пустой страницы получилось поставить, а вот уходящим не могу сделать. у этой верстки проблем много, но из-за футера руки опускаются - уже неделю бьюсь с ним (это первая моя верстка :) так что так). буду очень благодарен за содействие! | |
| |
|
|
| |
|
|
| |
для: dimon
(13.04.2011 в 15:54)
| | | Если не сложно, приведите каскадные таблицы стилей для следующих классов и элементов
#footer
.round_borders_all
.linear_bg_blue
|
| |
| |
|
|
| |
|
|
| |
для: cheops
(13.04.2011 в 15:58)
| | | конечно! вот они:
#footer, #header, p.section_header, h3.section_header{
background-image:url('../i/bgrnds.png');
background-repeat: repeat-x;
background: linear-gradient(top bottom, #003b77, #005dbe);
background: -webkit-gradient(linear, left top, left bottom, from(#005dbe), to(#003b77));
background: -moz-linear-gradient(top, #005dbe, #003b77);
}
#footer{
position:relative;
clear:both;
width:995px;
margin:0 auto;
height:33px;
color:#fff;
background-position:0 -97px;
overflow:hidden;
}
#footer p{
text-align:center;
line-height:33px;
}
|
.round_borders_all{
-moz-border-radius:5px;
border-radius:5px;
}
|
.linear_bg_blue - я его видимо раньше использовал, а потом, не стал. старался все сделать как можно более w3.org-совместимым | |
| |
|
|
| |
|
|
| |
для: dimon
(13.04.2011 в 16:18)
| | | А #container что из себя представляет?
PS Собственно уже понятно, вы верстаете на div-ах и столкнулись с проблемой, когда плавающие div-ы выходят за границы блока. Вам чистить div-ы нужно, я сейчас постараюсь написать в чем дело. | |
| |
|
|
| |
|
|
| |
для: cheops
(13.04.2011 в 16:29)
| | | а, кстати, к float-ам я пришел уже позже. до этого всё держалось на абсолютном позиционировании, марджинах и т.д. просто ещё хотел сделать левый блог растягивающийся (по вертикали) и наткнулся на статью про то, как это сделать, а так несколько вложенных float-ов. вот и намудрил, видимо, а старой версии не осталось :(
спасибо за помощь!
#container{
position:relative;
width:995px;
min-height:100%;
margin:0 auto -50px;
/*background-color:#0ff;*/
}
|
| |
| |
|
|
| |
|
|
| |
для: dimon
(13.04.2011 в 15:54)
| | | Запустите вот этот пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 900px;
margin: 0px auto;
}
#contener {
}
#main {
background: #993300;
color: #fff;
padding: 5px;
width: 300px;
float: left;
}
#footer {
background: #FFFF66;
height: 50px;
z-index: 5;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contener">
<div id="main">Левое меню</div>
<div id="main">А тут мы сейчас поместим ну чрезвычайно
длинный текст, да такой, что он у нас пробьет все div-блоки,
до седьмого колена. Ну не то чтобы мы очень кравожадные и
жестокие верстальщики, просто нам по зарез нужен пример.
Причем нам нужен не всякий пример, а достаточно маленький,
не перегруженный массой подробностей, распутывая которые
можно неделю биться над версткой, да так ничего и не сделать.
</div>
</div>
<div id="footer">А это подвал.</div>
</div>
</body>
</html>
|
Ситуация отличается от вашей, но подвал закрывается предыдущими плавающими блоками. | |
| |
|
|
| |
|
|
| |
для: dimon
(13.04.2011 в 15:54)
| | | А теперь смотрите на этот пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 900px;
margin: 0px auto;
}
#contener {
}
#main {
background: #993300;
color: #fff;
padding: 5px;
width: 300px;
float: left;
}
#footer {
background: #FFFF66;
height: 50px;
z-index: 5;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contener" class="clearfix">
<div id="main">Левое меню</div>
<div id="main">
А тут мы сейчас поместим ну чрезвычайно
длинный текст, да такой, что он у нас пробьет все div-блоки,
до седьмого колена. Ну не то чтобы мы очень кравожадные и
жестокие верстальщики, просто нам по зарез нужен пример.
Причем нам нужен не всякий пример, а достаточно маленький,
не перегруженный массой подробностей, распутывая которые
можно неделю биться над версткой, да так ничего и не сделать.
</div>
</div>
<div id="footer">А это подвал.</div>
</div>
</body>
</html>
|
Вот вам нужно сделать то же самое, очищая при помощи класса clearfix блок-контейнер плавающих блоков. | |
| |
|
|
| |
|
|
| |
для: cheops
(13.04.2011 в 19:39)
| | | а для чего несколько определений классов clearfix? я оставил display:inline-block и, вроде, всё работает и так. и даже в IE 5.5
в любом случае, я попробовал подобавлять класс clearfix к контейнерам на моей страничке, ничего не помогло. всё он там же футер, прикреплен к низу окна и никуда не девается.
посмотрите, если вас не затруднит, сюда: http://www.dibal.ru/test/ - эту страницу мы начали делать на курсах. тут футер "правильный", как мне надо, он крепится к низу, если на странице мало контента, или уходит за экран вниз, если контента много. Если у вас стоит хром или ФФ, можно просто растянуть элемент textarea в левом блоке, чтобы сымитировать большое количество контента.
Когда я верстал свою страничку, руководствовался структурой именно этой страницы, но потом забрел в дебри, и, видимо, запутался.
Спасибо, что помогаете разобраться! :) | |
| |
|
|
| |
|
|
| |
для: dimon
(14.04.2011 в 12:03)
| | | >а для чего несколько определений классов clearfix? я оставил display:inline-block и, вроде, всё
>работает и так. и даже в IE 5.5
Есть не мало браузеров и их версий, ситуация усугубляется их различным поведением на разных платформах (Mac, Linux, Windows). Это очень известный хак, который учитывает все популярные браузеры, на всех платформах, в нем лучше ничего не менять. | |
| |
|
|
| |
|
|
| |
для: cheops
(14.04.2011 в 12:21)
| | | спасибо! учту! | |
| |
|
|
| |
|
|
| |
для: dimon
(14.04.2011 в 12:03)
| | | Лучше сейчас создать параллельный проект и упрощать его, до тех пор, пока не останется только базовые конструкции HTML и CSS-инструкции к ним, которые вы сможете сравнить с оригинальным проектом.
PS В любом случае не стоит воспринимать возню с CSS/HTML как бесполезную трату времени, чем дольше сейчас вы с ним разбираетесь, тем более глубокие у вас будут знания и тем быстрее вы будете работать в будущем. | |
| |
|
|
| |
|
|
| |
для: cheops
(14.04.2011 в 12:23)
| | | на самом деле, я это уже раз делал. ну, я думаю, что я это делал :) в итоге получалось одно и тоже. сейчас, мне решение видится в том, что у меня просто основной блок не хочет растягиваться при заполнении контентом. я еще раз посмотрел в гугле готовые решения, взеде одно и тоже, практически: нужно добавить пустой блок со свойством clear. очевидно, что меня такого нет.
еще раз спасибо за подсказки: вы снова подожгли мой интерес к этой странице. если/когда разгадаю, в чем дело, напишу, может кому пригодится! | |
| |
|
|
| |
|
|
| |
для: dimon
(13.04.2011 в 15:54)
| | | В общем, решение данной задачи я тут запостить не смогу, простите: слишком уж всего много нужно расписывать. Только могу одно сказать: аккуратнее с position:absolute и position:relative. У меня, из-за того, что один из блоков в одном из контейнеров имел position:absolute, подвал и не хотел двигаться, ведь, согласно спецификации w3.org, position:absolute не участвует в блочной модели, потому и контейнер не растягивался! | |
| |
|
|
