Jump to content
  • 0

Блок в самом низу


AntonSolo
 Share

Question

25 answers to this question

Recommended Posts

  • 0

Напиши блоки друг за другом

<div>...</div>
<div>....</div>

а в стилях для нижнего блока напиши margin-top: -30px; (т.е. задай отрицательное значение отступа от верхнего края блока равное высоте самого нижнего блока)

Edited by 3ABAPKA
Link to comment
Share on other sites

  • 0

не понял проблемы, если высоты блоков известны, то делается так:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

html, body {
height: 100%;
width:100%;
margin: 0;
}

.outer {
height: 500px;
background-color: blue;
}

.inner {
height: 200px;
margin: 0 10px 0 10px;
background-color: green;
}

.block {
height: 290px;
overflow: hidden;
}

</style>
</head>
<body>

<div class="outer">
<div class="block">
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
</div>
<div class="inner">
какое-то содержимое какое-то содержимое
</div>
</div>

</body>
</html>

а вообще сразу надо объяснять, что такое 200px и 500px - высота или ширина?

если ширина, то известна ли высота?

Edited by Searcher
Link to comment
Share on other sites

  • 0

Странно у меня все работает

#odin{
width: 500px;
height: 300px;
background-color: #0080FF;
color: #FFFFFF;
}

#dva{
width: 200px;
height: 100px;
margin-top: -100px;
background-color: #FF0000;
color: #FFFFFF;
}

<div id="odin">Див размером 500 пикселей по ширине и 300 пикселей по высоте</div>
<div id="dva"> Див размером 200 пикселей по ширине и 100 пикселей по высоте</div>

Searcher , клевый пример

Edited by 3ABAPKA
Link to comment
Share on other sites

  • 0
200 и 500 это высота, у мепня ещё стоит float:left это может как-то влиять ?

Ну вот опять... Где у вас стоит float:left ? Ну как мы поймем?! Подробнее надо объяснять, чтобы впустую не переписываться. Конечно, он может влиять. Покажите код.

ЗАВАРКА, в вашем примере есть небольшой недостаток, смещение по вертикали вверх в такой ситуации оставит внизу отступ в 100px.

Link to comment
Share on other sites

  • 0

я бы еще туда клиар засунул, но меня ща запинают за клиар, поэтому просто padding-bottom) для #block; а то #inner по идее под блок текст залазить, если не ошибаюсь)

Edited by Victor Ananiev
Link to comment
Share on other sites

  • 0

.left {

background:url(../img/bg_left.jpg) repeat-y ;

margin-left:-533px;

width:328px;

float:left;

margin-bottom:-32767px;

padding-bottom:32767px;

}

.left_top {

float:left;

background:url(../img/center_left_top.png) no-repeat ;

width:328px;

height:179px

}

.left_bottom{

float:left;

margin-top:-203px;

background:url(../img/center_left_bottom.png) no-repeat ;

width:328px;

height:203px

}

<div class="left">

<div class="left_top> </div>

<div class="left_bottom"></div>

</div>

нужно чтобы фоновый рисунок left_bottom размещался в самом низу блока left в зависимости от того на сколько он растянут. Надеюсь так понятно будет)))

Link to comment
Share on other sites

  • 0

Имею похожею проблемку.

Вот делю страницу на 3 блока, типа на меню, контент и новости

но типа копирайтна место поставить не могу.

контент я позиционировал absolut

Мой css

body
{
font-family: verdana, arial;
text-align: justify;
}
#left-bar
{
width: 200px;
height: 100%;
float: left;
}
#right-bar
{
float: left;
width: 560px;
position:absolute;
left: 230px;

}
#news-bar
{
width: 200px;
float: left;
position:absolute;
left: 800px;
}
.title1
{
display: block;
width: 100%;
margin: 2 px;
padding: 5px;
font-family: verdana, arial;
font-weight: bold;
text-align: center;
color: gray;
border: 1px solid;
border-color: black;
}
.title2
{
display: block;
width: 100 %;
margin: 2 px;
padding: 5px;
font-family: verdana, arial;
font-weight: bold;
text-align: left;
color: gray;
border: 1px solid;
border-color: black;
}
a
{
display: block;
padding: 5px;
margin: 2px;
border: 1px solid;
border-color: black;
background: #dcdcdc;
width: 100%;
font-weight: bold;
font-family: verdana, arial;
font-size: 11pt;
color:black;

}

a:hover
{

background: #d3d3d3;
border-color: gray;

}
#copyrayt
{
border-top: 1px solid;
border-color: black;
font-weight: bold;
font-family: verdana, arial;
font-size: 9pt;
text-align: center;
}

Мой код

<div>
<div id="left-bar">
<div class="title1">Навігація</div>
текст навигации
</div>


<div id="right-bar">
<div class="title2">Заголовок</div>
какой нить текст
</div>


<div id="news-bar"><div class="title1">Новини</div>
новина<p>
новина<p>
новина<p>
новина<p>
новина<p>
</div>
</div>

<div id="copyrayt" valign="bottom">СЮДА ХОЧУ КОПИРАЙТ</div>

Edited by sasyk
Link to comment
Share on other sites

  • 0

упс, недоглядел) но у меня ваш код вообще не работает)) точнее там половину стилей надо повыбрасывать чтоб блок за экран не улетал) и после этого bottom становится внизу, и мой стиль работает)))) так что поставье нормальные циферки в css так яснее будет)

Link to comment
Share on other sites

  • 0

Я же выше кинул конкретный пример!

left {

background:url(../img/bg_left.jpg) repeat-y ;

margin-left:-533px;

width:328px;

float:left;

margin-bottom:-32767px;

padding-bottom:32767px;

}

.left_top {

float:left;

background:url(../img/center_left_top.png) no-repeat ;

width:328px;

height:179px

}

.left_bottom{

float:left;

margin-top:-203px;

background:url(../img/center_left_bottom.png) no-repeat ;

width:328px;

height:203px

}

<div class="left">

<div class="left_top> </div>

<div class="left_bottom"></div>

</div>

нужно чтобы фоновый рисунок left_bottom размещался в самом низу блока left в зависимости от того на сколько он растянут. Надеюсь так понятно будет)))

Link to comment
Share on other sites

  • 0

как так??(у left никаких height:100% не заданы)) я ничего не понимаю, у вас два слоя один под другим, в том порядке в котором надо убираем все лишние маргины и паддинги(margin-bottom:-32767px;padding-bottom:32767px;margin-left:-533px;) и видим слой так как он должен быть) ставим бэк так как я сказал и все работает)

PS а если все таки заданы, вам в помощь пример свыше)

Edited by Victor Ananiev
Link to comment
Share on other sites

  • 0

left_bottom это не фоновый рисунок, а блок.

Если вам нужен фоновый рисунок внизу, то зачем размещать блок внизу, если достаточно спозиционировать сам рисунок фона?

Зачем float:left везде? Если убрать float, то и width не понадобится. Если нужно только изображение вниз прибить то так будет достаточно:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

html, body {
height: 100%;
width:100%;
margin: 0;
}

.left {
float:left;
background:url(../img/bg_left.jpg) repeat-y;
width:328px;
}

.left_top {
background:url(../img/center_left_top.png) no-repeat;
height:179px
}

.bottom_background {
height:100%;
background:url(../img/center_left_bottom.png) left bottom no-repeat;
padding-bottom:203px;
}

</style>
</head>
<body>

<div class="left">
<div class="bottom_background">
<div class="left_top"></div>
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
</div>
</div>

</body>
</html>

Link to comment
Share on other sites

  • 0
у меня для left

margin-bottom:-32767px;

padding-bottom:32767px;

так что ваш вариант не помог , но всё равно спасибо!)

И что эти отступы меняют? Вообще, зачем такие огромные значения, что за задачу вы решаете такими запредельными отступами? Тут что-то у вас неправильно в логике построения... Возможно есть более простое решение...

И почему сразу не помог, вложите мой пример еще в один блок, а у внешнего делайте такие отступы и все будет нормально. Мыслите творчески.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy