Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.01.2010, 14:33   #1
Bendebej
Пользователь
 
Регистрация: 21.01.2010
Сообщений: 63
Радость Внутри тянущегося блока другие тянущиеся

такая вот задачка)
Есть блок - в нем два других, которые тянутся по вертикали в зависимости от количества текста (height-auto)(width-фиксирована)
Нужно чтобы этот блок тянулся по вертикали в зависимости от размеров внутренних, - ставлю авто высоту- а он просто исчезает=(
Помогите люди добрые!)
Bendebej вне форума Ответить с цитированием
Старый 21.01.2010, 15:52   #2
MaTBeu
Eclipse Foundation
Старожил
 
Аватар для MaTBeu
 
Регистрация: 19.09.2007
Сообщений: 2,604
По умолчанию

А зачем вам, чтобы он тянулся по вертикали? У вас остальные тянутся и я думаю этого достаточно. Ставьте height: auto и не парьтесь над тем, что главный блок исчез, два внутренних должны остаться, потому что в них есть контент.

Вообще, покажите html и css, которые вы используете.
MaTBeu вне форума Ответить с цитированием
Старый 21.01.2010, 16:35   #3
Bendebej
Пользователь
 
Регистрация: 21.01.2010
Сообщений: 63
По умолчанию

Код:
<div id="Skladcontainer3">
          <div id="Sensmon1">
		<p class="sensmtext">Много текста</p>
                 </div>
		<div id="Sensmon2"> 
		<p class="sensmtext2">много текста<p>
		</div>
		 </div>

CSS

Код:
#Sensmon1{/*тянущийся текст*/
	float:left;
	width:480px;
	margin-left: 0px;
	height: auto;
	padding-left: 14px;
}
#Sensmon2{/*тянущийся текст*/
	float:right;
	margin-right: 16px;
	width: 200px;
	height: auto;
}
#Skladcontainer3{/*осн часть*/
	background-image: url(skins/scladcorp.png);
	background-repeat:repeat-y;
	background-position:center;
	height:auto;
}
В итоге Sensmon1 и Sensmon2 тянутся, а блока Skladcontainer3 не видно, в смысле у него нет высоты заданной - и он выглядит как линия, а хотелось бы , чтобы он принимал длину самого длинного из внутренних

Последний раз редактировалось MaTBeu; 21.01.2010 в 16:45.
Bendebej вне форума Ответить с цитированием
Старый 21.01.2010, 16:53   #4
MaTBeu
Eclipse Foundation
Старожил
 
Аватар для MaTBeu
 
Регистрация: 19.09.2007
Сообщений: 2,604
По умолчанию

Используйте position: absolute для главного контейнера, а для внутренних - position: relative
И не забудьте главному присвоить width: 100%, иначе он будет не на всю ширину экрана.
CSS
Код:
#Sensmon1{/*тянущийся текст*/
    float:left;
    width:480px;
    margin-left: 0px;
    height: auto;
    padding-left: 14px;
    position: relative;
}
#Sensmon2{/*тянущийся текст*/
    float:right;
    margin-right: 16px;
    width: 200px;
    height: auto;
    position: relative;
}
#Skladcontainer3{/*осн часть*/
    background-image: url(skins/scladcorp.png);
    background-repeat:repeat-y;
    background-position:center;
    width: 100%;
    position: absolute;
}
HTML
Код:
<div id="Skladcontainer3">
    <div id="Sensmon1">
        <p class="sensmtext">Много текста</p>
    </div>
    <div id="Sensmon2"> 
        <p class="sensmtext2">много текста</p>
    </div>
</div>
Однако, учтите, что position: absolute требует абсолютного выравнивания. Теперь ваш блок (если он находился внутри какого-нибудь еще) будет выравниваться не относительно родительского блока, а относительно краев экрана. Следовательно все все свойства margin и padding нужно переписать соответственно новому позиционированию.

Последний раз редактировалось MaTBeu; 21.01.2010 в 17:06.
MaTBeu вне форума Ответить с цитированием
Старый 22.01.2010, 10:21   #5
Bendebej
Пользователь
 
Регистрация: 21.01.2010
Сообщений: 63
По умолчанию

Цитата:
Однако, учтите, что position: absolute требует абсолютного выравнивания. Теперь ваш блок (если он находился внутри какого-нибудь еще) будет выравниваться не относительно родительского блока, а относительно краев экрана. Следовательно все все свойства margin и padding нужно переписать соответственно новому позиционированию.
А что если я хочу создать еще один блок-ниже большого растягиваемого?
Получается, что это невозможно?

Вроде бы нашел решение -
Добавляем в конец родительского блока div с clear:both, который не обтекает плавающие блоки и устанавливется в конец родительского блока, заставляя его тем самым растянуться. Данный способ хорошо работает во всех браузерах.

Плавающий блок

Плавающий блок
div c clear:both


и еще более элегантно:
#scladcontainer {
overflow: auto;
width: 100%
}

Последний раз редактировалось Bendebej; 22.01.2010 в 11:14.
Bendebej вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Cоздании блока на CSS alex774 HTML и CSS 1 18.01.2010 17:32
отступы от блока Grind HTML и CSS 0 04.01.2009 21:50
Форматирование текста внутри поля. как? или другие варианты... smoky Microsoft Office Access 2 26.12.2008 19:09
Изображение внутри многострочного блока textarea osp HTML и CSS 1 26.08.2008 12:38
Прокрутка содержимого блока sdevil JavaScript, Ajax 18 26.09.2007 19:33