Структура Div и CSS для левой стороны переполнения контейнера: скрытые

Я достаточно разбираюсь в CSS и HTML, но я просто могу окутать голову, как это будет работать правильно.Структура Div и CSS для левой стороны переполнения контейнера: скрытые

Я хочу, чтобы иметь ширину 990px для контейнера, но у меня есть около 1237px ширины из-за добавленную тень слева и справа

Айв получили его, расположенным, но я хочу, перелив не должны быть скрыт до 990px ширины ...

есть ли способ сделать это возможным? вот мой текущий код.

CSS:

body, html {margin:0; padding:0;} 
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;} 
#main-wraper { } 
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;} 
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;} 
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;} 
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}

HTML:

<body> 
    <div id="shadows"> 
    <div id="main-left"> 
     <div id="main-right"> 
     <div id="main-wraper"> 
      <div id="main-wraper-liner"> 
      <div id="main-container"> 
       <div id="main-container-liner"> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

Вот ссылка

http://hithouse.businesscatalyst.com/index.html

спасибо заранее.

источник

2012-11-14 raffi keklikian

Если я прав, вы не хотите, чтобы тень отображалась, когда экран меньше 990px. Что я хотел бы сделать это:

покидает тело, как это
создать прозрачный PNG с высотой 1px и шириной 990px + тени (слева и справа)
использует это гораздо более простой разметка
вы готовы пойти

HTML

<div class="content"> 
    <div class="shadow"></div> 
    <h1>Normal content goes here</h1> 
</div>

CSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

div.content { 
    position: relative; 
    width: 400px; 
    height: 100%; 
    margin: 0 auto; 
    border: 1px solid red; 
} 

div.shadow { 
    position: absolute; 
    top: 0; 
    left: -28px; 
    width: 456px; 
    height: 100%; 
    background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0; 
}

DEMO

Try before buy

источник

2012-11-14 22:11:25 insertusernamehere

Структура Div и CSS для левой стороны переполнения контейнера: скрытые

ответ

Смежные вопросы