хитрый вопрос позиционирования CSS - PullRequest
Новая
       0

хитрый вопрос позиционирования CSS

3 голосов
/ 19 августа 2010

my body имеет плиточный фон (синева на прикрепленном изображении)

Мне нужно горизонтально отцентрировать некоторую фиксированную ширину и высоту содержимого (зелень) на фиксированном расстоянии от верхней части страницы.

Затем мне нужно продолжить фоновое изображение центрированного контента до левых и правых краев страницы, как бы ни был широк браузер (фиолетовый)

Причина этого в том, что зеленый контентимеет "дыру", которая позволяет фону body просвечивать.Если это не было идентификатором требования, сделайте пурпурный цвет делителем ширины 100%, который оборачивает содержимое, и просто присвойте ему плиточное фоновое изображение.

alt text

Пока мне это удалось: 

<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>


#Left
{
    width: 50%;
    margin-right: 480px;
    position: absolute;
    top: 50px;
    right: 50%;
    height: 525px;
    background: transparent url(/images/purple.png) repeat-x scroll center top;
}
#Right
{
    width: 50%;
    margin-left: 480px;
    position: absolute;
    top: 50px;
    left: 50%;
    height: 525px;
    background: transparent url(/images/purple.png) repeat-x scroll center top;
}

#Content
{
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 525px;
    background: transparent url(/images/green.png) no-repeat scroll center top;
}

Который работает , за исключением того, что страница имеет горизонтальную полосу прокрутки с фиолетовым оттенком правой руки, расширяющимся в некотором роде.Как я могу преодолеть это?

Я не могу подделать дыру, просто дублируя фон, и я хотел бы избежать нанесения overflow-x: hidden на тело.

Редактировать: Мне также нужно иметь страницу с переменной высотой, так как заданное значение 525px height может быть намного больше, и поэтому страница должна будет v-scroll.

Это должно работать в IE7 +, FF, Safari

Спасибо

Ответы [ 3 ]

1 голос
/ 19 августа 2010

Я думаю, что это должно сработать: 

<html>

<head>
<style type="text/css">

body
{
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

#Left
{
    width: 50%;
    margin-right: 480px;
    position: absolute;
    top: 50px;
    right: 50%;
    height: 5525px;
    border: solid 2px purple;
}
#Right
{
    width: 50%;
    margin-left: 480px;
    position: absolute;
    top: 50px;
    left: 50%;
    height: 5525px;
    border: solid 2px purple;
}

#Content
{
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 5525px;
    border: solid 2px green;
}

</style>
</head>

<body>

<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>

</body>
</html>

Я добавил стили к тегу body (чтобы предотвратить горизонтальную полосу прокрутки) и использовал поле «auto» в элементе Content (не уверен, если это необходимо, но я так и сделал бы.)

Дайте мне знать, если я что-то пропустил.позиционирование обратно на содержание div.GD вам Internet Explorer ...

0 голосов
/ 19 августа 2010 
<!doctype html>
<style>
body {
    background: blue;
    margin: 0;
}
#wrapper {
    height: 300px;
    margin-left: 50%;
    position: relative;
    top: 100px;
}
#left {
    background: magenta;
    height: 300px;
    margin-right: 300px;
    position: absolute;
    right: 100%;
    width: 100%;
}
#center {
    border: 100px solid lime;
    float: left;
    height: 100px;
    margin-left: -300px;
    width: 400px;
}
#right {
    background: magenta;
    height: 300px;
    overflow: hidden;
}
</style>

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>
  • Я использовал абсолютное позиционирование для левой стороны, так как вы все равно не получили там полосу прокрутки.
  • Я плавал в центральном делителе, поэтому я мог использовать "секретное преимущество"«Переполнения , чтобы заполнить правую часть экрана, не создавая полосу прокрутки.
  • Я использовал границу для центрального элемента div, чтобы показать, что синий фон тела действительно« просвечивает », но выКонечно, вместо этого можно использовать фоновое изображение.

(я тестировал его в Firefox 3.6 и IE8 в режимах IE8 и IE7.)

0 голосов
/ 19 августа 2010

обычно я могу обойти это, установив: 

#content{
  margin-right:auto;
  margin-left:auto;
}

Тогда вы можете покончить с левым и правым (если, конечно, вы не хотите их сохранить).

Затем, чтобы получитьОтверстие просто делает фон содержимого PNG-изображением и делает отверстие прозрачным.Тогда он будет прозрачным на div.

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

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

...