елементарная задача усложненная кроссбраузерностью.

[ua.rik]

здравствуйте. уже 2 дня занимаюсь любовью с следующей задачей:

в шапке сайна нужно поместить горизонтальную полоску определенного цвета которая начинается с координат top:77px, left:200px. и продолжается к правому краю екрана. на полоске должно быть меню. в следующем примере все работает в ИЕ. опера растягивает экран на 200 пикселей в ширину (100% ширины меню + 200 отступ с левого края)

доктайп не указан. но его указание делает в опере еще хуже - пропадает цвет фона, тк. высота блока inhead становится равной 0.

html

<div id="head">
 <div id="inhead">
 <ul>
 <li><a href="index.html" class="menu">пунктменю</a></li>
 <li><a href="index.html" class="menu">пунктменю </a></li>
 <li><a href="index.html" class="menu">пунктменю</a></li>
 <li><a class="menu" href="index.html">пунктменю </a></li>
 </ul>
 </div>
</div>

css

#head{ 
 background:url(img/logo.jpg) no-repeat;
 height: 159px;
 width: 100%;
 margin:0 0 0 0; padding:0 0 0 0;
 }

#inhead{
 position:relative;
 top:77px;
 left:200px;
 width:100%;
 background-color:#FFCC00;
 }

#inhead ul{
 background-color:#FFCC00; // это на всякий случай
 list-style:none;
 margin:0 0 0 0; padding:0 0 0 0;
}

#inhead ul li{float:left;}

может есть другой путь?

заранее благодарен

[Scrum]

ставим для inhead float: left; и продолжаем заниматься любовью.

[ua.rik]

не помагает. и где тут логика?

inhead почему то выходит за правый край блока head.

[ua.rik]

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

[yopopt]

Если я правильно понял задачу:

  Quote

#head{

background:url(img/logo.jpg) no-repeat;

height: 159px;

width: 100%;

margin:0;

padding:0;

}

#inhead{

position:relative;

top:77px;

margin-left:200px;

left:0;

background-color:#FFCC00;

}

#inhead ul{

list-style:none;

margin:0;

padding:0;

}

#inhead ul li{

display:inline;

}

[ua.rik]

yopopt, большое спасибо!

хотя и здесь какая-то лажа... так как Вы порекомендовали не прошло:

в опере все вместилось в экран, зато пропал фон (точнее блок inhead почемуто стал толщиной в ноль а список сам по себе появился в нужном месте но как бы вне блока inhead)

в IE то же самое + список не позиционировался правильно - отобразился тупо сверху страницы

но, вопреки логике, все стало отлично, когда добавил height: 19px; для блока inhead.

кто нибудь может это обьснить?