Jump to content
  • 0

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


noran
 Share

Question

Всем привет ! Предварительно воспользовался поиском, просмотрел все найденные темы, но решения для себя не нашел. Проблема похоже вечна и частая - растягивание слоя автоматически. Имеется 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). Посоветуйте как исправить, пожалуйста.

Link to comment
Share on other sites

23 answers to this question

Recommended Posts

  • 0

на вскидку.

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

Link to comment
Share on other sites

  • 0

2Scrum

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

иллюстрация

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

иллюстрация

Edited by noran
Link to comment
Share on other sites

  • 0

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

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

Edited by XAOPT
Link to comment
Share on other sites

  • 0

2XAOPT

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

css:

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

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

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

Edited by noran
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0
<!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>

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Edited by noran
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
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 by noran
Link to comment
Share on other sites

  • 0

Ладно, с этим я разобрался (сделал по другому). Теперь по ходу отладки следующий вопрос: как отодвинуть друг от друга модули, которые вставляются друг за другом в один элемент кода в 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 by noran
Link to comment
Share on other sites

  • 0

В 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 by sm0k
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

×
×
  • 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