Jump to content
  • 0

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

AntonSolo

Asked by AntonSolo,

 Share

Question

25 answers to this question

Recommended Posts

  • 0
3ABAPKA Explorer

3ABAPKA

Posted
Posted (edited)

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

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

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

Edited by 3ABAPKA
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted (edited)

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

<!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
3ABAPKA Explorer

3ABAPKA

Posted
Posted (edited)

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

#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
Searcher Explorer

Searcher

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

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

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

Link to comment
Share on other sites
  • 0
Victor Ananiev Explorer

Victor Ananiev

Posted
Posted (edited)

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

Edited by Victor Ananiev
Link to comment
Share on other sites
  • 0
AntonSolo Explorer

AntonSolo

Posted
  • Author
Posted

.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
sasyk Explorer

sasyk

Posted
Posted (edited)

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

Вот делю страницу на 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
Victor Ananiev Explorer

Victor Ananiev

Posted
Posted

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

Link to comment
Share on other sites
  • 0
sasyk Explorer

sasyk

Posted
Posted
  AntonSolo said:
Есть div 500px и второй 200px нужно тот что меньше разместить внутри большего и чтобы он отображался в самом низу, без позиционирования это возможно ?

Что значит то что меньше?

Link to comment
Share on other sites
  • 0
AntonSolo Explorer

AntonSolo

Posted
  • Author
Posted

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

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
Victor Ananiev Explorer

Victor Ananiev

Posted
Posted (edited)

как так??(у 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
Searcher Explorer

Searcher

Posted
Posted

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
Searcher Explorer

Searcher

Posted
Posted
  AntonSolo said:
у меня для 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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept