Автоматическое растягивание Div'а + очередность

noran · November 12, 2008

Всем привет ! Предварительно воспользовался поиском, просмотрел все найденные темы, но решения для себя не нашел. Проблема похоже вечна и частая - растягивание слоя автоматически. Имеется CMS, в отцентрированном слое делаю картинку с закругленными краями + растягивающуюся в зависимости от ширины экрана. Круглые уголки каждый в своем слое, растягивающиеся стороны "квадрата" в своих слоях. На примере верхней части:

CSS:

#woodboard_tl {
	float:left;
	height:30px;
	width:30px;
	top:0px;
	background:url(../images/druzhina/woodboard_t_l.png) 0 0 no-repeat;
	z-index:2;
}

#woodboard_t {
float:left;
	top:0px;
	height:30px;
	width:100%;
	background:url(../images/druzhina/woodboard_s_t.png) 0 0 repeat-x;
	z-index:2;
}

#woodboard_tr {
	float:right;
	height: 30px;
	width:30px;
	background:url(../images/druzhina/woodboard_t_r.png) 0 0 no-repeat;
	z-index:2;
}

HTML:

<div id="woodboard">
	<div id="woodboard_tl"></div>
		 <div id="woodboard_t"></div>
	<div id="woodboard_tr"></div>
</div>

1-ый и 3-ый стиль это уголки, а посередине планка. Так вот уголки становятся как нужно, а планка в IE7 схлопывается в 0, в Opera залазит под левый угол вплотную к краю слева (это-то понятно из-за float) - справа вытесняет слой с правым углом и упирается в край. Т.е. 100% как и задается. Если задать margin-left:30px; , то слева все как надо отступ, а справа по прежнему (не помогает margin-right:30px; одновременно и не помогает без float). Если задать позиционирование всем 3 слоям relative, то все 3 выравниваются по левому краю друг под другом. А надо чтобы друг за другом и планка не вытесняя уголков растягивалась между ними (причем растягивался слой, а бэкграунд растянется посредством repeat). Посоветуйте как исправить, пожалуйста.

Scrum · November 12, 2008

на вскидку.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  #woodboard_tl, #woodboard_tr {
	height:30px;
	width:30px;
  }
  #woodboard_tl {
	float:left;
	background:url(../images/druzhina/woodboard_t_l.png);
}
#woodboard_t {
	height:30px;
	background:url(../images/druzhina/woodboard_s_t.png) repeat-x;
}
#woodboard_tr {
	float:right;
	background:url(../images/druzhina/woodboard_t_r.png);
}
  /*]]>*/
  </style>
</head>

<body>
<div id="woodboard">
	<div id="woodboard_tl"></div>
	<div id="woodboard_tr"></div>
	<div id="woodboard_t"></div>


</div>
</body>

</html>

noran · November 13, 2008

2Scrum

Собственно ничего координально не изменилось, только забыл сказать: в моем случае слой с планкой 3 правым концом вылезал из слоя в который вложен 4 и упирался в следующий 5:

иллюстрация

В вашем примере 3 лишь перестал вылезать подобным образом и теперь упирается во вложенный слой 4. В остальном все по прежнему:

иллюстрация

Edited November 13, 2008 by noran

XAOPT · November 13, 2008

А у вас никакие стили не пересекаются? Не могу "поймать" вашу ошибку с приведённым кодом.

Как вариант, попробуйте: присвоить бекграунд woodboard_s_t.png блоку woodboard, при этом задав блоку ширину. И убрать блок <div id="woodboard_t"></div> совсем из кода.

Edited November 13, 2008 by XAOPT

noran · November 13, 2008

2XAOPT

Сам блок woodboard имеет такой стиль:

css:

#woodboard {
	margin: 0 21px 0px 21px;
	width: auto;
}

Если делаю по вашему совету, то бэграунд растягивается "от и до" в слое 4 из иллюстрации предыдущего поста. Сам этот woodboard_s_t.png полоска 1113х30 пикселей, так что смысл его запихивать в слой 4 ? Тем более что слой 4 должен быть резиновым по задумке. Я не могу ему фиксированную ширину задать, мог бы - задал бы для слоя с планкой и не парился

Кстати удалось заставить планку это не подлезать под уголки с помощью margin:0 30px 0px 30px (сразу не допер). Однако слой с правыи уголком 2 почему-то упорно вниз сдвигает. И в Opera все видно, а в IE7 планка невидима совсем, хотя занимает место

Edited November 13, 2008 by noran

XAOPT · November 13, 2008

Копайте "выше".. Приведённый Scrum код работает (разве что стоит дополнить вашей идеей с margin:0px 30px 0px 30px)

noran · November 13, 2008

Без изменений абсолютно. Может дело где-нибудь в коде ? Страница-то php, шаблон от CMS.

XAOPT · November 13, 2008

Php не может иметь никакого отншения. Вы наедине с хтмл и цсс. Правда помимо того, что вы нам показываете, на странице наверняка ещё вагон хтмля и стилей. Они и спутывают карты.

Если возьмёте код отсюда и запихнёте в отдельный хтмл файл без всякого окружающего хтмл-кода - работать будет. Копайте "выше".

noran · November 13, 2008

Что это за конструкция такая ?:

/*<![CDATA[*/
/*]]>*/

И почему нельзя высоту и ширину задавать у каждого слоя, а нужно отдельно ?

P.s. Ищу где-то там "выше", но пока не понятно что мешает. Может нужно привести весь CSS ?

XAOPT · November 14, 2008

/*<![CDATA[*/

Это для парсеров. Забейте)

Проще дайте ссылку на глючащую страницу.

Edited November 14, 2008 by XAOPT

noran · November 14, 2008

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

Arny · November 14, 2008

У меня работает в опере, ие, мозиле

#woodboard_tl {
    float:left;
    height:30px;
    width:30px;
    background:url(../images/druzhina/woodboard_t_l.png) 0 0 no-repeat;
   }

#woodboard_t {
    height:30px;
    width: auto;
    background:url(../images/druzhina/woodboard_s_t.png) 0 0 repeat-x;
	margin:0 30 0 30px;
    padding:0 30 0 30px;
}

#woodboard_tr {
    float:right;
    height: 30px;
    width:30px;
    background:url(../images/druzhina/woodboard_t_r.png) 0 0 no-repeat;
}

а в страницу

<div id="woodboard_tl"></div>
<div id="woodboard_tr"></div>
<div id="woodboard_t"></div>

noran · November 14, 2008

Вот как это выглядит у меня с вашим вариантом (по-сути padding добавился):

rome.ro · November 14, 2008

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

В общем - я создаю один основной блочный элемент - который, по умолчанию, во всех браузерах расятягивается на всю ширину экрана. А потом в этот элемент вставляю две картинки - соответствунно левую и правую. Короче, пример:

<div class="растягивается_на всю_ширину">
  <img src=""align="left"alt="левая картинка">
  <img src=""align="right"alt="правая картинка">
</div>

У меня обычно срабатывает после небольшого траханья. Думаю, у Вас тоже должно.

Дядя Саша · November 14, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#woodboard_tl, #woodboard_tr {
	position: relative;
	height:30px;
	width:30px;
}
#woodboard_tl {
	float:left;
	background: red;
}
#woodboard {
	position: relative;
	height:30px;
	background: #c0c0c0;
}
#woodboard_tr {
	float:right;
	background: red;
}
</style>
</head>

<body>
	<div id="woodboard">
		<div id="woodboard_tl"></div>
		<div id="woodboard_tr"></div>
	</div>
</body>

</html>

noran · November 15, 2008

Вообще-то у меня слой woodboard является резиновым слоем бэграунда для контента, слоем в который вкладываются "уголки, планки и т.п."

woodboard_t_l - левый уголок

woodboard_t_r - правый уголок

woodboard_s_t - резиновая планка между ними

Однако я попробовал сделать так, как вы предложили - ведь под woodboard вы имели ввиду именно слой с планкой ? Результат: планка растянулсь на 100%, а уголки легли там где надо. Хотя планка должна растягиваться между слоями с уголками по задумке. Единственный минус это то, что планка проглядывает под уголками (они закруглены). Так что не подходит конструкция.

Edited November 15, 2008 by noran

Дядя Саша · November 15, 2008

Это должно подойти.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#woodboard {
	position: relative;
	height:30px;
}

#woodboard_tl, #woodboard_tr {
	position: absolute;
	height:30px;
	width:30px;
	top: 0;
}

#woodboard_tl {
	left: 0;
	background: red;
}

#woodboard_tc {
	position: relative;
	height:30px;
	margin: 0 30px;
	background: #c0c0c0;
}

#woodboard_tr {
	right: 0;
	background: red;
}
</style>
</head>

<body>
	<div id="woodboard">
		<div id="woodboard_tl"></div>
	   <div id="woodboard_tc"></div>
		<div id="woodboard_tr"></div>
	</div>
</body>

</html>

noran · November 15, 2008

Уже прогресс Работает в Opera, FF и не работает в IE7

Дядя Саша · November 15, 2008

К сожалению у меня пока с трудом работает ИЕ6) седьмой пока не могет, так что как в нем я не видел.

Ну а вообще вы что то долго сидите над такой задачей. Работы то на 5 минут.

В крайнем случае вставте туда таблицу. тогда для крайних ячеек надо установить padding-left: 30px & height: 30px; width не устанавливать, а для средней ячейки width: 100%;

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

А вообще я вам этого не советовал, и уверен что можно сделать и слоями.

noran · November 15, 2008

Ну долго сижу, ведь не работает. Это в CMS, я не с 0 верстаю. Там так и было на слоях, но там картинки были одноцветные чуть ли не по пикселю. Свои поставил - началась свистопляска.

Arny · November 19, 2008

noran, странно что мой код у Вас не работает. Проверьте, точно-ли скопировали. Слои должны стоять обязтельно в таком порядке: левый, правый, центральный. И у центрального в стиле ширина - авто (а не 100%). Проверили везде где смогли и везде отлично работает!

noran · November 30, 2008

noran, странно что мой код у Вас не работает. Проверьте, точно-ли скопировали. Слои должны стоять обязтельно в таком порядке: левый, правый, центральный. И у центрального в стиле ширина - авто (а не 100%). Проверили везде где смогли и везде отлично работает!

Вот так работает в Опере и Мозиле, но не в ИЕ:

#woodboard_tl, #woodboard_tr {
	position: absolute;
	height:30px;
	width:30px;
	top:0px;
}

#woodboard_tl {
	left:0px;
	background:url(../images/druzhina/woodboard_t_l.png);
}

#woodboard_t {
	position: relative;
	height:30px;
	width:auto;
	margin: 0 30px 0 30px;
	background:url(../images/druzhina/woodboard_s_t.png) repeat-x;
}

#woodboard_tr {
	right:0px;
	background:url(../images/druzhina/woodboard_t_r.png);
}

А по вашему работает в этих же браузерах, кроме ИЕ + середина растягивается от и до не взирая на уголки и margin (наверно потому что нет позиционирования в вашем примере). Расположение слоев в обоих случаях одинаково.

Edited November 30, 2008 by noran

noran · December 4, 2008

Ладно, с этим я разобрался (сделал по другому). Теперь по ходу отладки следующий вопрос: как отодвинуть друг от друга модули, которые вставляются друг за другом в один элемент кода в CMS.

Часть кода php куда вкладываются модули:

<div id="leftcolumn">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?></div>

И вот внутри слоя "leftcolumn" нужно отодвигать друг от друга модули. В самих модулях я покопался и не понял где можно вставить margin. Вкладывал слой внутрь "leftcolumn" - тоже бесполезно. Как быть ?

P.s. Если нужна инфа по структуре модулей, то вот содержимое php модуля 1-го (PHP):

// no direct access
defined('_JEXEC') or die('Restricted access');

// Include the syndicate functions only once
require_once (dirname(__FILE__).DS.'helper.php');

$params->def('menutype', 			'mainmenu');
$params->def('class_sfx', 			'');
$params->def('menu_images', 		0);
$params->def('menu_images_align', 	0);
$params->def('expand_menu', 		0);
$params->def('activate_parent', 	0);
$params->def('indent_image', 		0);
$params->def('spacer', 				'');
$params->def('end_spacer', 			'');
$params->def('full_active_id', 		0);

// Added in 1.5
$params->def('startLevel', 			0);
$params->def('endLevel', 			0);
$params->def('showAllChildren', 	0);

require(JModuleHelper::getLayoutPath('mod_mainmenu'));

И 2-го (под ним сразу идет) (PHP):

// no direct access
defined('_JEXEC') or die('Restricted access');

// Include the syndicate functions only once
require_once (dirname(__FILE__).DS.'helper.php');

$params->def('greeting', 1);

$type 	= modLoginHelper::getType();
$return	= modLoginHelper::getReturnURL($params, $type);

$user =& JFactory::getUser();

require(JModuleHelper::getLayoutPath('mod_login'));

Edited December 4, 2008 by noran

sm0k · December 11, 2008

В FF 3 и ИЕ 6 тестировал. Вроди всё нормально работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
	<title>Тест</title>


	<style type="text/css">


#woodboard_tl {
	float:left;
	height:30px;
	width:30px;
	background:url(123.png) no-repeat;
}

#woodboard_t {
	height:30px;
	width:100%;
	background:url(111.png) repeat-x;
}

#woodboard_tr {
	float:right;
	height: 30px;
	width:30px;
	background:url(321.png) no-repeat;
}
	</style>

</head>
<body>

<div id="woodboard_t">
	<div id="woodboard_tl"></div>

	<div id="woodboard_tr"></div>
</div>
</body>
</html>

123.png - левый уголок

111.png - центральная планка (авторастяжение)

321.png - правый уголок

Edited December 11, 2008 by sm0k

Sign In

Автоматическое растягивание Div'а + очередность

Question

Link to comment

Share on other sites

23 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

Join the conversation

Обсуждения

Important Information