Position: absolute (проблема в IE и Opera)

[Wasser]

Всем добрый день!

Помогите, пожалуйста, советом, как можно решить следующую проблему:

верхняя полоса в IE (ariel-kosmet.ru) выглядит нормально - по центру и c одинаковым отступом как справа, так и слева, в Opera - она убегает направо, а слева нормально.

Как сделать, что бы в Opera полоса была бы также как и в IE?

Вот соответствующий блок из глобальных стилей:

div.bgred {

background: #f01f16;

text-align: center;

padding: 8px 0 0 40px;

vertical-align: middle;

width:100%;

height: 28px;

color: #fff;

position:absolute;

top:28px;

z-index:1

}

* html div.bgred { height: 36px;}

#lay_f1 div.bgred a { float: left; padding: 5px 20px;}

Буду благодарен за любую помощь.

[swetlana]

для начала надо убрать position: absolute и width: 100%

всё то же правило: если можно что-то не делать, этого делать не следует.

Практического смысла в абсолютном позиционировании тут нет.

ширина 100% в таком случае высчитывается от ширины окна. С учётом отступа и получается, что полоса сдвигается. По умолчанию, если не задавать ширины явно, див размещается во всё доступное ему пространство.

[Wasser]

для начала надо убрать position: absolute и width: 100%

всё то же правило: если можно что-то не делать, этого делать не следует.

Практического смысла в абсолютном позиционировании тут нет.

ширина 100% в таком случае высчитывается от ширины окна. С учётом отступа и получается, что полоса сдвигается. По умолчанию, если не задавать ширины явно, див размещается во всё доступное ему пространство.

Большое спасибо! Сначала так и было, но мне нужно так, чтобы красная полоса была на некотором расстоянии от верха и наслаивалась на нижний рисунок. Если убрать width: 100%, но оставить position: absolute то полоса будет видна только слева, а справа нет, а если убрать position: absolute то она снова "убежит наверх" :-(

[swetlana]

для отступов есть свойства padding и margin.

[Wasser]

для отступов есть свойства padding и margin.

Большое спасибо, вечером попробую и отпишусь.

[swetlana]

Кстати, у вас там нагромождено много лишнего.

Всё это делается гораздо проще.

Например так

то есть, там, где сейчас 42 строки нечитабельного излишне сложного нагромождения, можно обойтись 15 сроками простейшего кода.

[Wasser]

Кстати, у вас там нагромождено много лишнего.

Всё это делается гораздо проще.

Например так

то есть, там, где сейчас 42 строки нечитабельного излишне сложного нагромождения, можно обойтись 15 сроками простейшего кода.

Супер! А как это будет применительно к моему div?

[swetlana]

да так же.

Основная мысль в чём: чем проще, тем лучше. Любой лишний наворот — место для ошибки. И ваш вопрос это наглядно демонстрирует.

Семантика кода — это не ради выпендрёжа. Это для простоты, стабильности, надёжности и безошибочности.

[Wasser]

да так же.

Основная мысль в чём: чем проще, тем лучше. Любой лишний наворот — место для ошибки. И ваш вопрос это наглядно демонстрирует.

Семантика кода — это не ради выпендрёжа. Это для простоты, стабильности, надёжности и безошибочности.

Светлана, я попробовал, но полностью связей я не понимаю. Умоляю помогите!

Вот код в в шапке главной страницы...

<div class="bgred">

<a href=""><img src="_img/home.gif"></a>

<a href="mailto:sales@ariel-kosmet.ru"><img src="_img/mail.gif"></a>

<a href="sitemap"><img src="_img/map.gif"></a></div><table width="100%" border="0" cellpadding="0" cellspacing="0">

<tbody>

<tr>

<td width="7"><br></td>

<td valign="bottom" width="336" nowrap="nowrap" style="text-align: left; vertical-align: middle; ">

<a href="/"><br><img style="width: 458px; height: 138px;" alt="" src="_mod_files/ce_images/business-logo.png" width="458" border="0" height="138"></a><br><br></td><td style="padding: 20px 30px 0px; vertical-align: middle; text-align: center;" width="100%"></td><td style="padding-top: 0px; text-align: right; vertical-align: top; " valign="bottom" width="100%" align="right"><img src="_mod_files/ce_images/_orchid_new.jpg" alt="" title="" style="width: 345px; height: 318px; " width="345" height="318" border="0" align="top"></td></tr></tbody></table>

А вот код в файле глобальных стилей home.css

div.bgred {

background: #F01F16;

height: 28px;

padding: 8px 0 0 40px;

margin-bottom: 1em;

}

* html div.bgred { height: 36px;}

#lay_f1 div.bgred a { display: block; float: left; padding: 5px 20px;}

Как же их увязать?

[swetlana]

Wasser, даже не представляю.

В приведённой каше сам чёрт ногу сломит.

К примеру, что означают такие конструкции:

<td width="7">
</td>

?

Да и вообще, где тут таблицы?

Я вижу в шапе только одну простеньку менюшку и один логотип.

Вот код:

<header><!-- вот тут шапа -->
	<nav><!-- та самая простенькая менюшка из трёх пунктов -->
		<menu>
			<li class="main"><a href="http://ariel-kosmet.ru/">на главную</a>
			<li class="email"><a href="mailto:sales@ariel-kosmet.ru">написать письмо</a>
			<li class="sitemap"><a href="http://ariel-kosmet.ru/sitemap">карта сайта</a>
		</menu>
	</nav>
	<h1 class="logo"><a href="http://ariel-kosmet.ru/">Ариэль-Космет</a></h1><!-- тот самый логотип -->
</header><!-- вот и вся шапа -->

и оно работает.

Как может работать приведённая выше каша кода — извините, не понимаю.

Зачем такую кашу городить — тем более не понимаю.

[Wasser]

Wasser, даже не представляю.

В приведённой каше сам чёрт ногу сломит.

К примеру, что означают такие конструкции:

<td width="7">
</td>

?

Да и вообще, где тут таблицы?

Я вижу в шапе только одну простеньку менюшку и один логотип.

Вот код:

<header><!-- вот тут шапа -->
	<nav><!-- та самая простенькая менюшка из трёх пунктов -->
		<menu>
			<li class="main"><a href="http://ariel-kosmet.ru/">на главную</a>
			<li class="email"><a href="mailto:sales@ariel-kosmet.ru">написать письмо</a>
			<li class="sitemap"><a href="http://ariel-kosmet.ru/sitemap">карта сайта</a>
		</menu>
	</nav>
	<h1 class="logo"><a href="http://ariel-kosmet.ru/">Ариэль-Космет</a></h1><!-- тот самый логотип -->
</header><!-- вот и вся шапа -->

и оно работает.

Как может работать приведённая выше каша кода — извините, не понимаю.

Зачем такую кашу городить — тем более не понимаю.

Согласен, но работает это все на амиро, и здесь куча всего. Есть макет гл.страницы

##init##

<body>

<!--Скрипт статистики в скрытом блоке-->

<div id=stat>##stat_agent##</div>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td id=lay_f1 valign="top" class="header"><!--шапка-->##lay_f1_body##</td>

</tr>

<tr height="100%">

<td><!--информационная область-->

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="165px" id=lay_f2 class="left_colum" valign="top"><!--левый столбец-->##lay_f2_body##</td>

<td class="body_colum" valign="top"><!--СРЕДНИЙ столбец-->

<div class="dsn_center_block1">

<div class=dsn_block_tr><img src="_mod_files/ce_images/inf_div_tr.png"></div>

<div class=dsn_block_tl><img src="_mod_files/ce_images/inf_div_tl.png"></div>

<div class=dsn_center_block1_content id=lay_body>

<!--Блок системных статусных сообщений-->

##status_messages##

<!--Основной информационный блок (тело) страницы-->

##lay_body_body##

</div>

<div class=dsn_block_br><img src="_mod_files/ce_images/inf_div_br.png"></div>

<div class=dsn_block_bl><img src="_mod_files/ce_images/inf_div_bl.png"></div>

</div>

</td>

<td width="165px" id=lay_f3 class="right_colum" valign="top"><!--правый столбец-->##lay_f3_body##</td>

</table>

</td>

</tr>

<tr><td height="70px"></td></tr>

<tr height="3px"><td bgcolor="#eeeeee"></td></tr>

<tr height="5px"><td></td></tr>

<tr height="1px" bgcolor="#eeeeee"><td></td></tr>

<tr><td id=lay_f4 class="footer" valign="top"><!--подвал-->##lay_f4_body##</td></tr>

</table>

</body>

##end##

который включает стили макета:

/* MAKET SPECIFIC STYLES */

#lay_f1 { }

#lay_f2 { }

#lay_f3 { }

#lay_f4 { }

#lay_body { }

.header { padding: 0 20px;}

.left_colum { padding: 15px 15px 0 20px;}

.body_colum { padding: 15px 0 0;}

.right_colum { padding: 15px 20px 0 15px;}

.footer { padding: 0 0 0 20px;}

и глобальные стили, в которых и сидит этот див. Мне было бы прощу настроить только этот див (bgred), а сам макет не трогать. Перевести Ваше предложение на амировский язык я, к сожалению, не смогу.

[swetlana]

к сожалению нет опыта работы с Амиро.

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

А вообще, джаббер: swetlana.bayer@gmail.com. И как раз сегодня вечер свободный.

Разберёмся, что к чему.

Ничуть не сомневаюсь, что если там какие сложности и есть, то искусственно созданные.