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

[Simpsons]

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

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

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

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

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

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

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

Edited July 10, 2012 by Simpsons

[Yazon_Nile]

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

[Simpsons]

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

[Yazon_Nile]

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]

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

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

#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]

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

#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]

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

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

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

[Yazon_Nile]

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

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

[Simpsons]

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

Вот 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]

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

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

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

	<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]

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

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

[Yazon_Nile]

#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]

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

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

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

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

[Yazon_Nile]

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

[Simpsons]

спасибо.

[Simpsons]

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

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

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

Edited July 12, 2012 by Simpsons

[Yazon_Nile]

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

[Simpsons]

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

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

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

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

Edited July 12, 2012 by Simpsons

[Yazon_Nile]

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

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

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

[Simpsons]

Доктайп поставил. Ширину задал. Если .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]

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

[Yazon_Nile]

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

[Simpsons]

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

[Yazon_Nile]

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

2

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

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

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

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

[Simpsons]

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]

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