Как содержать ширину элемента, чтобы он не переполнял тело, но был видим? - PullRequest
Новая
       22

Как содержать ширину элемента, чтобы он не переполнял тело, но был видим?

0 голосов
/ 08 сентября 2010

Я пытаюсь создать элемент, ширина которого больше, чем у тела, но не вызывает горизонтальную прокрутку.

http://jsfiddle.net/hYRGT/

Надеюсь, это несколько демонстрирует мою проблему. #Header содержит #imghead и имеет ширину 960 пикселей.

Мне нужно, чтобы браузер «думал», что страница имеет ширину 960 пикселей. Потому что #imghead шире, чем #header и расположен относительно, поэтому он находится в центре.

Я не могу использовать фоновое изображение, потому что #imghead будет заменен флэш-компонентом.

Я также не могу использовать переполнение: скрытый, потому что я хочу, чтобы элемент отображался за пределами 960 пикселей. Я просто не хочу, чтобы это вызывало прокрутку.

Я не хочу вообще отключать h-scrolling, мне бы очень понравилось решение CSS. Но если javascript - единственный способ справиться с этим, я думаю, это подойдет.

Ответы [ 2 ]

0 голосов
/ 09 сентября 2010

Я думаю, что получил то, что хотел: http://jsfiddle.net/hYRGT/3/

На случай, если jsfiddle не работает:

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />

<title>WEBSITE title</title>

</head>
<body>
    <div id="header">
        <div id="imghead"><img src="/img.jpg" alt=""/></div>
    </div>
    <div id="wrapper" class="index">
        <div id="container">SOME CONTENT</div>
    </div>
</body>

CSS: 

/*RESET*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;text-align:left;vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a img,:link img,:visited img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
img{display:block}
a{color:inherit}

/*STYLES*/
html, body{
height:100%}
body{
background:#000;
text-align:center;
overflow:auto;
overflow-x:hidden;
overflow-y:auto}

#wrapper{
    z-index:12;
    position:relative;
    height:auto!important;
    min-height:100%;
    width:100%;
    background:#0f0;
    overflow:auto;
    overflow-x:auto;
    overflow-y:visible}
#container{
    width:960px;
    margin:0 auto;
    overflow:auto;
    background:#00f}

#header{
    z-index:50;
    position:relative;
    overflow:visible;
    width:960px;
    margin:0 auto;
    height:0px;
    background:#f00}
#imghead{
    width:1100px;
    position:relative;
    left:-70px;
    background:#ff0}

Контент по дизайну перекрывает заголовок, надеюсь, это кому-нибудь поможет.

1 ограничение заключается в том, что заголовок не прокручивается горизонтально, но в моем дизайне это не нужно.

Проверено в FF3, IE8, S4 и C5

0 голосов
/ 08 сентября 2010

Разве вы не можете просто расположить его относительно тела, на 50% слева, а затем на внутреннем элементе сделать отрицательное левое поле в половину от общей ширины самого элемента, который бы центрировал его?

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

Похожие темы

...