Высота блока доходит не до конца

Simpsons · July 10, 2012

Здравсвуйте.

Столкнулся с такой проблемой.

Сделал у блока меню правый border (11px solid) и высоту блока на 100% поставил, но когда в контенте становится больше слов чем в блоке, блок не "вырастает" больше, а мне нужно чтобы он всегда доходил до подвала сайта. + Еще одна проблема, остается место после Контента, мне нужно чтобы контент прижимался к подвалу. Помогите пожалуйста решить. Скрин:

P.S Проблемы показаны стрелками.

Вот исходники (html и css файлы)

Скачать (на ifolder.ru)

Если нужно, могу перезалить на другой Хостинг.

Edited July 10, 2012 by Simpsons

Yazon_Nile · July 10, 2012

Чтобы срабатывала height:100%, нужно чтобы у всех родителей вплоть до html стояло значение высоты.

Simpsons · July 10, 2012

Стоит. Не помогает. Посмотрите исходники.

Yazon_Nile · July 11, 2012

1 - используй нормальный доктайп!

2 - НЕ ПРАВИЛЬНО

<link href="/sites/style.css" rel="stylesheet"  type="text/css" >
<link href="/sites/menu.css" rel="stylesheet"  type="text/css" >

ПРАВИЛЬНО

<link href="sites/style.css" rel="stylesheet"  type="text/css" >
<link href="sites/menu.css" rel="stylesheet"  type="text/css" >

3 - на div#container высота так и не стоит! Стоит мин-хеит, что в данном случае не одно и то же.

4 - 100% значение высоты или ширины не ставиться при бордерах, паддингах и тд. Бывают исключения, когда ты понимаешь, что делаешь.

Все помагает. И боковой колонке как раз 100% и ставится. Но в данном случае 100% - высота окна.

Короче вот - http://jsfiddle.net/5zCTN/34/

наверняка, не самый крутой способ, но действенный. Создает видимость одновременного растягивания колонок.

надеюсь, хватит понимания, чтобы это применить

Если что - пишите. Поможем.

Edited July 11, 2012 by Yazon_Nile

Simpsons · July 11, 2012

Начал изменять под свои размеры, но что-то не получается с блоком и контентом.

При изменении ширины блока изменятся ширина контента.

#wrapper{
    margin:0 auto;
    width:1000px;
}
#header{
    background:#f00;
    height:180px;
    margin:0 0 10px;
}
#main{
    background:#f0f;
    margin:0 auto 10px 0;
    width:190px;
}
#main:after{
    clear:both;
    content:'';
    display:block;
}
#content{
    background:#0ff;
    float:right;
    margin:0 -770px 0 0;
    position:relative;
    width:760px;
    z-index:10;
}
#sidebar{position:relative;}
#sidebar:after{
    background:#0ff;
    content:'';
    height:100%;
    left:240px;
    position:absolute;
    top:0;
    z-index:5;
    width:760px;
}
#footer{
    background:#f00;
    height:100px;
}

Хочу чтоб блок был шириной 240px, а контент занимал все остальное.

Yazon_Nile · July 11, 2012

Ну, батенька. Это уже математика.. Хоть с этим нужно справляться.

#wrapper{
    margin:0 auto;
    width:1000px;
}
#header{
    background:#f00;
    height:180px;
    margin:0 0 10px;
}
#main{
    background:#f0f;
    margin:0 auto 10px 0;
    width:240px;
}
#main:after{
    clear:both;
    content:'';
    display:block;
}
#content{
    background:#0ff;
    float:right;
    margin:0 -760px 0 0;
    position:relative;
    width:750px;
    z-index:10;
}
#sidebar{position:relative;}
#sidebar:after{
    background:#0ff;
    content:'';
    height:100%;
    left:250px;
    position:absolute;
    top:0;
    z-index:5;
    width:750px;
}
#footer{
    background:#f00;
    height:100px;
}

Simpsons · July 11, 2012

Спасибо, Вы очень помогли

P.S По математике 3 была.

К сожалению не могу прочитать ваше ЛС. Так как не набрал 30 сообщений на форуме(

Yazon_Nile · July 11, 2012

Да я про лс и не писал) Я говорил, чтобы сюда постили, если проблемы будут.

Удачи. Рад, что помог

Simpsons · July 11, 2012

Подскажите еще кое-что. На старом шаблоне у меня стоял блок как бы с цитатами. Но на этот шаблон поставить не могу. Вот скрин старого шаблона:

Вот Html код этого блока:

<div class="quote"><div class="quote_text">Тут текст и картинка</div></div>

И Css:

.quote{
width: 739px;
float: right;
height: 90px;
border-bottom: 8px solid #e4e4e4;
}

.quote_text{
font: 12px Verdana,Arial,Helvetica,sans-serif;;
padding: 10px 20px;
 color: #555555;
}

.quote img {
 background: none repeat scroll 0 0 #E7ECF2;
 border: 1px solid #DAE7EF;
 float: right;
 height: 60px;
 margin-bottom: 10px;
 padding: 4px;
 width: 60px;
}

Раньше работало при таких параметрах.

Помогите пожалуйста. Нужно только чтоб блок с цитатами не налезал на блок с меню, то есть делал отступ от него.

P.S И еще. Нужно блок (меню) в право перенести, подскажите как правильно сделать это?

/* ————- Общие стили ————-- */

body, html{
margin: 0;
padding: 0; /*сверху, слева/справа, снизу*/
color: #555;
text-align:justify; 
font: 12px Verdana,Arial,Helvetica,sans-serif;;
}

#wrapper{
    margin:0 auto;
    width:1000px;
	border: 8px solid #E4E4E4;
}
#header{
    background:E4E4E4;
    height:180px;
	width:1016px;
	margin:0 auto;
}

/* Логотип */
a.logo{
 background: url(/img/logo_a.png); 
 display: block; 
 width: 423px;
 height: 180px; 
 margin-left: 100px;
 }

a.logo:hover{
 background: url(/img/logo_hover.png);
}

/* Блок меню */
#main{
    background:#F4F5F6;
    margin:0 auto 0px 0;
    width:240px;
	border-right: 8px solid pink;
}
#main:after{
    clear:both;
    content:'';
    display:block;
}

#sidebar{position:relative;}
#sidebar:after{
    background:#F4F5F6;
    content:'';
    height:100%;
    left:250px;
    position:absolute;
    top:0;
    z-index:5;
    width:750px
}

#sidebar a{
display: block;
background-color: #F4F5F6;
border-bottom:1px solid #e4e4e4; 
padding:5px 10px; 
text-decoration:none;
color: #858585;
}

#sidebar a:hover{
background-color:#FFF;
color:#858585;
}

.block_nav {
color: #bebebe;
text-align: center;
width: 240px;
border-bottom: 1px solid #e2e5ea;
}

.block_nav img{
margin: 4px;
}

.block_nav a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);  
  -moz-opacity: 0.5;
  opacity: 0.5;  
  filter: alpha(opacity=50);
}

.block_header{
font-size: 14px;
color: #bebebe;
padding-left: 5px;
padding-top: 5px;
height: 20px;
background: #E7ECF2;
border-bottom: 1px solid #e2e5ea;
}

#content{
    background:#fff;
    float:right;
    margin:0 -760px 0 0;
    position:relative;
    width:730px;
    z-index:10;
	padding: 10px;
	text-align:justify; 
	font: 12px/1.5 Verdana,Arial,Helvetica,sans-serif;;
}

#content p { 
margin:0; 
padding-bottom: 10px; 
}

/* Цитаты героев */ 
.quote{
width: 745px;
margin-right: 251px;
height: 90px;
border-bottom: 11px solid #e4e4e4;
}

.quote_text{
font: 12px Verdana,Arial,Helvetica,sans-serif;;
padding: 10px 20px;
 color: #555555;
}

.quote img {
 background: none repeat scroll 0 0 #E7ECF2;
 border: 1px solid #DAE7EF;
 float: right;
 height: 60px;
 margin-bottom: 10px;
 padding: 4px;
 width: 60px;
}


#footer{
    background:#E4E4E4;
    height:100px;
	width: 1016px;
	margin:0 auto;
}

/* Вспылающие подсказки */ 
#unitip {
  position: absolute;
  z-index: 1000;
  top: -1000px;
  color: #fff;
  font:11px Verdana,Arial,Helvetica, sans-serif; color:#CED9E8;
  display: none;
}

#unitippoint, #unitipmid, #unitipcap {
  position: relative;
  top: 0px;  
  left: 0px;
  width: 145px;
  display: block;
}

#unitippoint {  
  background: url('/jQuery/titile/TipPoint.png') no-repeat;  
  height: 19px;  
  overflow: hidden;  
}

#unitipmid {  
  background: url('/jQuery/titile/TipMid.png') repeat;  
  width: 115px;
  height: auto;  
  padding: 5px 15px;
}

#unitipcap {  
  background: url('/jQuery/titile/TipCap.png') no-repeat;  
  height: 7px;  
  overflow: hidden;  
}

/* Горизонтальное меню */ 
#menu {font: 11px Arial, Helvetica, sans-serif;
 background: #dcdcdc; 
 height:30px;
 line-height:30px;
 color:#dfdfdf;
 border:solid 1px #d6d5d5;
 border-right: none;
 border-left: none;
 overflow:hidden;
 width: 1016px;
 padding: 0px;
 margin: 0 auto;
 }
 #menu li {list-style-type:none;
 float:left;
 padding-left:10px;
 }
 #menu a {height:30px;
 display:block;
 background-image:url('/img/menu/razdelitel.png'); 
 background-repeat:no-repeat; 
 background-position:right;
 padding-right: 15px;
 text-decoration: none;
 color:#454545;
 }
 .home {border:none;
 margin: 8px 0px;
 }
#menu a:hover{color: gray;
 }

 /* Меню подвала */
.nav_footer{
background: #dcdcdc; 
 height:30px;
 width: 1030px;
 margin: 0 auto;
 padding: 0px;
  border:solid 1px #d6d5d5;
} 

.nav_footer_text{
padding: 5px 10px;
text-align: right;
}

Edited July 12, 2012 by Simpsons

Yazon_Nile · July 12, 2012

Не понимаю зачем с этой цитатой так много мороки. Ширина какая-то, флоты.

У вас есть два основных блока - две колонки: саидбар и контент. Все. В них и расспределяйтевсе ваше добро. И ничто никуда налезать не будет.

Как я вижу, в вашем случае достаточно такой структуры внутри блока контент:

	<div class="qoutes-block">
		<img src="images/some-image.jpg" height="100" width="100" alt="image description" class="alignleft" />
		<p>Some text</p>
	</div>

.qoutes-block{overflow:hidden;}
.qoutes-block .alignleft{float:right;}
.qoutes-block p{margin:0;}

Зачем выдумывать велосипед и вытягивать блок из контента?

P.S И еще. Нужно блок (меню) в право перенести, подскажите как правильно сделать это?

Саидбар с контентом местами поменять?

Ха) Даже ширины считать уже не надо) Всего флоты перенаправить и маржины. Думайте, если придет понимание - будет лучше всего.

Simpsons · July 12, 2012

За блок отдельно спасибо

НО насчет Саидбара, так и не разобрался, вроде флоты перенаправил и маржины сменил, Контент ушел влево, но саидбар не хочет. Просто шаблон не привычен для меня, путаюсь с идентификаторами "main" и "sidebar".

Yazon_Nile · July 12, 2012

#wrapper{
    margin:0 auto;
    width:1000px;
}
#header{
    background:#f00;
    height:180px;
    margin:0 0 10px;
}
#main{
    background:#f0f;
    margin:0 0 10px auto;
    width:240px;
}
#main:after{
    clear:both;
    content:'';
    display:block;
}
#content{
    background:#0ff;
    float:left;
    margin:0 0 0 -760px;
    position:relative;
    width:750px;
    z-index:10;
}
#sidebar{position:relative;}
#sidebar:after{
    background:#0ff;
    content:'';
    height:100%;
    right:250px;
    position:absolute;
    top:0;
    z-index:5;
    width:750px;
}
#footer{
    background:#f00;
    height:100px;
}

Simpsons · July 12, 2012

Как же Вы меня выручаете, спасибо.

Ну и последний вопрос. Дело в том, что мне надо под блоком цитат провести бордер

Но так как этот блок стоит в внутри блока контент, а в контенте присутствуют отступы, то и блок с цитатами тоже отступает.

Как можно решить проблему? (не убираю отступы у Контента)

Yazon_Nile · July 12, 2012

http://jsfiddle.net/7GWGt/3/

Simpsons · July 12, 2012

спасибо.

Simpsons · July 12, 2012

Сейчас посмотрел сайт в: Firefox, Chrome, Opera, IE. И конечно же последний отображает все криво. Думал версия просто старая (6 была) поставил девятую, не чего не изменилось:

Какие именно стили не может отобразить IE? И стоит ли вообще под него сайт подгонять?)

Вот как отображает во всех других браузерах:

Edited July 12, 2012 by Simpsons

Yazon_Nile · July 12, 2012

Если бы вы залили сайт на какой-то бесплатный хостинг было бы намного круче, чем гадать по картинкам )

Simpsons · July 12, 2012

Сейчас залью) на ucoz

Тыц - пожалуйста)

P.S инфа на сайте, взятая из Википедии на угад (ради проверки)

Не обращайте на нее внимание

Edited July 12, 2012 by Simpsons

Yazon_Nile · July 13, 2012

1 - Та же ошибка. Зачем .block_nav вынесли из саидбара? Он же просится туда!)

2 - Доктайп! Доктайп! Доктайп!!!!!! Его нет! Значит ие работает в режиме совместимости, или как оно там называется. Приучивайте себя ставить правильный доктайп. Это основа!

ЗЫ. На qoutes-block ширину лучше задать. 730 по-моему.

Simpsons · July 13, 2012

Доктайп поставил. Ширину задал. Если .block_nav сунуть в саидбар, то ссылки в нем становятся блочными (из-за саидбара), а мне этого не нужно.

#sidebar a{
display: block;
background-color: #F4F5F6;
border-bottom:1px solid #e4e4e4; 
padding:5px 10px; 
text-decoration:none;
color: #858585;
}

#sidebar a:hover{
background-color:#FFF;
color:#858585;
}

Еще, когда поставил Доктайп, то углы на горизонтальном меню пропали (или исчезли вообще), так же исчезли разделители ссылок.


/* Горизонтальное меню */ 

.tr{
 background-color:#dcdcdc;
 width:1036px;
 height:30px;
 position:relative;
 border:solid 1px #D4D4D4;
 margin:0 auto;
 -webkit-box-shadow: 0 10px 6px -10px rgba(0,0,0,0.5); 
 -moz-box-shadow: 0 10px 6px -10px rgba(0,0,0,0.5); 
 box-shadow: 0 10px 6px -10px rgba(0,0,0,0.5); 

}
.tr:after{
 position:absolute;
 display:block;
 content:"";
 top:100%;
 right:-1;
 border-bottom:solid 15px transparent;
 border-left:solid 15px #dcdcdc;
 z-index:-1;

}
.tr:before{
 position:absolute;
 display:block;
 content:"";
 top:100%;
 left:-1;
 border-bottom:solid 15px transparent;
 border-right:solid 15px #dcdcdc;
 z-index:-1;
}

#menu {font: 11px Arial, Helvetica, sans-serif;
 height:30px;
 line-height:30px;
 color:#dfdfdf;
 overflow:hidden;
 width: 1036px;
 padding: 0px;
 margin: 0 auto;
 }
 #menu li {list-style-type:none;
 float:left;
 padding-left:10px;
 }
 #menu a {height:30px;
 display:block;
 background-image:url('/img/menu/razdelitelmenu.png'); 
 background-repeat:no-repeat; 
 background-position:right;
 padding-right: 15px;
 text-decoration: none;
 color:#454545;
 }
 .home {border:none;
 margin: 8px 0px;
 }
#menu a:hover{color: gray;}

#menu a:hover img {
 filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); 
 -moz-opacity: 0.5;
 opacity: 0.5; 
 filter: alpha(opacity=50);

Edited July 14, 2012 by Simpsons

Simpsons · July 14, 2012

В 9 IE сайт стал лучше смотреться (как и в остальных браузерах). Но незнаю как он будет смотреться в 7, 8, и 6.

Yazon_Nile · July 16, 2012

ие8 нормально. ие7 валится из-за того, что :after ие7 не понимает, хотя может и не только из-за этого - нет времени разбираться.

Simpsons · July 16, 2012

Так валится не только в ие, но и в Хроме, Опере и Мазиле.

Yazon_Nile · July 16, 2012

1 По уголкам - а с какой радости они должны работать если при посишн абсолют не указывается направление позиционирование? Лефт/райт? Топ/боттом??

2

Доктайп поставил. Ширину задал. Если .block_nav сунуть в саидбар, то ссылки в нем становятся блочными (из-за саидбара), а мне этого не нужно.

Список это список! С какой радости у вас ссылки просто в саидбаре лежит?? Здесь надо поступать также как и с верхней навигацией. Тоже список с классом. От него уже и стаилить ссылки.

Еще, когда поставил Доктайп, то углы на горизонтальном меню пропали (или исчезли вообще), так же исчезли разделители ссылок.

Это не понял..

Simpsons · July 16, 2012

C уголками вроде разобрался. Такая же проблема с блоком цитат, перед тем когда еще не добавил Доктайп было так:

После добавления Доктайпа:

HTML:

Текст цитаты<span>Текст справо ©</span><strong><a href="#">[Текст слево]</a></strong>

CSS:

.qoutes-block span{
color: #909090;
font-size: 11px;
position: absolute;
top: 65;
left: 556;
}

.qoutes-block strong{
font-weight: normal;
font-size: 11px;
position: absolute;
top: 65;
right: 661;
}

Edited July 16, 2012 by Simpsons

Yazon_Nile · July 17, 2012

Думаю родитель схлопнуля просто) тк все елементы в нем на абсолюте

Sign In

Высота блока доходит не до конца

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information