содержимое блока шире самого блока

whiteRed · 12.04.2007, 17:54

как нужно сделать, чтобы блок, содержащий горизонтальное меню, полностью его охватывал, когда это меню не уменьшается в окне браузера по ширине? (применительно к примеру - чтобы вылезающая за пределы окна вправо часть меню была на сером фоне)

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
</head>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
}
#header {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: yellow;
    height: 40px;
}

#header #menu{
    background-color: gray;
    white-space: nowrap;
    text-align: right;
    margin-left: 200px;
}

#header #menu div {
    display: inline;
    border: 1px solid red;
}
</style>



<body>

<div id="header">
    <div id="menu">
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
        <div>menu item</div>
    </div>
</div>

</body>
</html>

etc · 12.04.2007, 17:56

Убери ширину в 100%, просто вообще не указывай её. Сталкивался с такой фенечкой когда-то.

whiteRed · 12.04.2007, 17:58

оперативненько... щас попробую

etc · 12.04.2007, 17:59

Я не проверял, может и не помочь.

whiteRed · 12.04.2007, 18:01

ээ, ты чего
тогда у меня футер будет не на всю ширину в широком окне

т.е. хедер

etc · 12.04.2007, 18:04

Жди тогда спецов. У меня на слово «вылезает» сразу реакция «убрать 100%». В данном случае 100% тоже виноваты в таком поведении.

Kikasso · 12.04.2007, 19:07

тупой способ, но работает:

Код:

<nobr>д л и н н о е  м е н ю</nobr>

Можно попробовать такой параметр как min-width
Возможно, iE потребуется отдельно указать _width.

Но я так, методом тыка. Ждём специалиста.

Skubent · 12.04.2007, 21:02

Таблицы... Ну или как-то вот так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
</head>
<style>
* 
{
padding : 0px;
margin  : 0px;
}

#header 
{
    background-color : yellow;
    position   : absolute;
    top        : 0px;
    left       : 0px;
    right      : 0px;
    height     : 40px;
    text-align : right;
}

#header #menu
{
    background-color : gray;
    white-space      : nowrap;
    margin-left : 200px;
}

#header #menu div
{
    display : inline;
}

#container
{
    background-color : gray;
    display : inline;
}
</style>

<body>
<div id="header">
    <div id="menu">
        <div id="container">
        <div>menu item1</div>
        <div>menu item2</div>
        <div>menu item3</div>
        <div>menu item4</div>
        <div>menu item5</div>
        <div>menu item6</div>
        <div>menu item7</div>
        <div>menu item8</div>
        <div>menu item9</div>
        <div>menu item0</div>
        </div>
    </div>
</div>
</body>
</html>

KidsKilla · 13.04.2007, 14:56

нарисуй 2 картинки -- чо надо при широком окне и чо при узком.
а то я не понял.-

whiteRed · 13.04.2007, 15:24

1.сделай html как в первом посте
2.открой его в файрфоксе или опере
3.сожми окно по горизонтали, чтобы появилась полоса прокрутки
4.проверни его вправо
5.смотри: серый фон кончается раньше, чем пункты меню

надо, чтобы не кончался