CSS: полная ширина на конкретном - PullRequest
Новая
       1

CSS: полная ширина на конкретном

2 голосов
/ 14 августа 2010

Привет! У меня есть контейнер шириной 1150 пикселей. Теперь у меня есть другое главное меню с шириной: 100%, которое я хочу разместить внутри контейнера. Но, конечно, он получает только 100% (1150 пикселей), но я хочу, чтобы он был на всю ширину из стороны в сторону, поэтому он должен игнорировать установленную ширину только для .mainmenu

Я попробовал положение: абсолют, что сделало все это неправильным и странным 

#mainmenu
{
    height: 37px;
    width: 100%;
    margin: 0px auto;
    background-image: url(../images/mainmenu_bg5.jpg);

}

Ответы [ 5 ]

1 голос
/ 30 октября 2010

Почему меню в контейнере на первом месте? Если вы хотите, чтобы меню охватывало всю ширину, но содержимое контейнера составляет всего 1150 пикселей, я думаю, что по определению неправильно помещать меню в контейнер. Рассмотрите возможность реструктуризации вашего документа. Это пример, у меня нет вашего полного кода: 

<body>
 <div id="page">
  <div id="header" style="background:Blue;">
   header header header
  </div>
  <div id="mainmenu" style="background:Green;">
   menu menu menu menu
  </div>
  <div id="container" style="width:1150px;margin:auto;background:Red;">
   container container container
  </div>
 </div>
</body>

И если вы хотите, чтобы содержимое заголовка и меню охватывало не более 1150 пикселей, что, я думаю, то, что вам нужно, то подумайте: 

<head>
<style type="text/css">
.pagewidth {
  width: 1150px;
  margin: auto;
}
</style>
</head>
<body>
 <div id="page">
  <div id="header" style="background:Blue;">
   <div class="pagewidth">
    header header header
   </div>
  </div>
  <div id="mainmenu" style="background:Green;">
    <div class="pagewidth">
      menu menu menu menu
    </div>
  </div>
  <div id="container" class="pagewidth" style="background:Red;">
   container container container
  </div>
 </div>
</body>
0 голосов
/ 21 ноября 2010
Позиция

: абсолютный - лучший способ получить это , сохраняя фон в # mainmenu . На самом деле, это единственное, что я могу придумать с моей головы. Без JavaScript, конечно. Все остальное потребует изменения HTML или перемещения свойства фона в другое место. 

#mainmenu
{
    position:absolute;
    left:0;top:??px;
    width:100%;
    height:37px;
    background-image: url(../images/mainmenu_bg5.jpg);
}

Поскольку # mainmenu width: 100%, то станет 100% области просмотра, а не содержащего блока. (Если родитель не находится в положении: относительное или переполнение: скрыто)

Поэтому, когда вы говорите, что "все странно", я предполагаю, что это из-за других вещей на странице. И абсолютные, и с плавающей точкой выводят элементы из нормального потока документов. Так что вещи под меню могут и окажутся под ним. 

#mainmenu
{
    position:absolute;
    left:0;top:??px;
    width:100%;
    height:37px;
    background-image: url(../images/mainmenu_bg5.jpg);
}
    #mainmenu + *
{
        padding-top:37px;
    }
    /* Exact selector not recommended due to poor browser support */

Решением этой проблемы является применение 37px поля или отступа к первому элементу после #mainmenu. Вы также не сможете центрировать абсолютно позиционированные элементы, используя margin: 0 auto, но если вы хотите, чтобы он занимал всю ширину области просмотра, это не должно вызывать беспокойства ... Если вы хотите центрировать живые секции меню, конечно, вам понадобится какой-то потомок по центру: 

#mainmenu
{
    position:absolute;
    left:0;top:??px;
    width:100%;
    height:37px;
    background-image: url(../images/mainmenu_bg5.jpg);
}
    #mainmenu > *
    {
        margin:0 auto;
    }
    /* Exact selector not recommended due to poor browser support */
    /* & more properties needed if descendant is list with floated <li>s */
    #mainmenu + *
    {
        padding-top:37px;
    }
    /* Exact selector not recommended due to poor browser support */

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

Вы можете найти другое решение, но если вы этого не сделаете - опубликуйте страницу, на которую я смогу взглянуть, и я смогу помочь вам со странностями, с которыми вы столкнулись при абсолютном позиционировании. То есть, если он будет работать с этим конкретным макетом.

0 голосов
/ 21 ноября 2010

Чтобы получить фоновое изображение для имитации строки меню, охватывающей всю ширину страницы, вам необходимо применить #mainmenu фон к body или элементу контейнера следующим образом: 

body {
    background: url(YOURIMAGE) repeat-x left 64px;
}

64px должно быть на расстоянии #mainmenu от вершины.

Если у body уже есть фоновое изображение, вам понадобится еще один div прямо внутри тела, содержащего все остальное.Если у вас нет контроля над HTML, тогда используйте javascript для вставки div, который либо обернет весь контент, либо будет отображаться за ним (используя position и z-index.)

0 голосов
/ 10 ноября 2010

css ниже, но иногда это зависит от содержимого внутри: 

#mainmenu
{
    height: 37px;
    width: 100%;
    margin: 0px;
    position: relative;
    background-image: url(../images/mainmenu_bg5.jpg);
}

Это решение jQuery: 

$('#mainmenu').width() == $('#container').width();
0 голосов
/ 14 августа 2010

Если ваш контейнер имеет фиксированную ширину, но вы хотите, чтобы меню имело фон с полной шириной страницы, тогда вы можете иметь фон меню в качестве позиционированного фона html и поддерживать тот же код HTML. Это заставит фоновую полосу меню покрывать всю ширину страницы.

Пример этого метода: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html

Как это сделать: использовать позиционированные фоны:

http://www.w3schools.com/css/pr_background-position.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...