Центрирование ширины жидкости div в пределах фиксированного div для вывода в верхнюю часть окна просмотра

Question

ОК, поэтому я проектирую страницу, которая требует ширины ширины 50% по центру страницы - без проблем. Мне также нужен заголовок шириной 50% в верхней части экрана - никаких проблем. Наконец, мне нужно иметь этот заголовок в фиксированном div, чтобы он оставался в верхней части экрана, когда я прокручиваю - и вот где я сталкиваюсь с проблемой, как бы я ни старался, я не могу получить этот верхний div по-видимому, потому, что это ширина жидкости, и я не могу указать маркер пикселя?

Вот код, я работаю на (вещи простыми сейчас) ....

<div id="wrapper"> 
    <div id="topwrapper"> 
     <div id="top"> 
      <div id="topleft"></div> 
      <div id="topright"></div> 
     </div> 
    </div> 
    <div id="table"> 
     Lorum Ipsum to fill here. 
     <div id="left"></div> 
     <div id="right"></div> 
    </div> 
</div> 

И мой CSS .....

#wrapper { 
    overflow:   auto; 
    position:   absolute; 
    top:    0px; 
    left:    0px; 
    height:   100%; 
    width:   100%; 
    background-image: url('images/background.jpg'); 
} 

#table { 
    position:   relative; 
    margin:   0 auto; 
    width:   50%; 
    background-image: url('images/midmiddle.png'); 
    padding:   50px; 
    padding-top:  130px; 
} 

#topwrapper { 
    position: fixed; 
    margin-left: -112px; 
    left:  50%; 
    width:  50%; 
    z-index:  20; 
    height:  169px; 
} 

#top { 
    position:   relative; 
    margin-left:  -8px; 
    left:    -50%; 
    width:   100%; 
    background-image: url('images/topmiddle.png'); 
    z-index:   20; 
    height:   169px; 
    padding-left:  112px; 
    padding-right: 112px; 
} 

#left { 
    position:   absolute; 
    margin-left:  -162px; 
    top:    0px; 
    width:   112px; 
    height:   100%; 
    background-image: url('images/midleft.png'); 
    z-index:   10; 
} 

#right { 
    position:   absolute; 
    right:   -112px; 
    top:    0px; 
    width:   112px; 
    height:   100%; 
    background-image: url('images/midright.png'); 
    z-index:   10; 
} 

#topleft { 
    position:   absolute; 
    margin-left:  -168px; 
    top:    0px; 
    width:   112px; 
    height:   169px; 
    background-image: url('images/topleft.png'); 
    z-index:   10; 
} 

#topright { 
    position:   absolute; 
    right:   -56px; 
    top:    0px; 
    width:   112px; 
    height:   169px; 
    background-image: url('images/topright.png'); 
    z-index:   10; 
} 

Так что я имею получил мою основную упаковку на 100% в ширину и высоту, чтобы взять партию, topleft, topright, left и right divs находятся в главном div, чтобы повторять боковые стороны моего ящика, но вершина - это то место, где я застрял.

код я отправил фактически работает, но как вы можете видеть, что это очень запутанный обходной путь, большинство полей должны делать с моими размерами боковых изображения, но #top -8px это единственный способ, которым я могу получить вокруг него работать - должен быть более простой способ ?!

Большое спасибо заранее за любую помощь :)

---

спасибо за вход - извините о форматировании кода, я поставил четыре пробела перед моим CSS, но я предполагаю, что вы, ребята, как это в списке, а не line - извините, старые привычки ....!

Мне удалось получить это снова, добавив 25% влево и вправо на верхнюю панель, ширину 100% сверху и край -120 пикселей ...... теперь смотря на это (учитывая, что мои изображения имеют ширину 112 пикселей) Я взял и добавил 8px где-то, что также можно увидеть в исходном коде (margin-left от -8px). Очень смутно, как это в уравнении .... но он работает!

Я посмотрю на этой скрипке, а не то, что я знаком с таким нетерпением узнать что-то новое :)

Большое спасибо за вашу помощь всем :)

Answer 1

Как о попытке установить маржу в auto для #wrapper? Может быть, проблема в том, что обертка не была исправлена ​​на месте, поэтому, возможно, #wrapper движется, а не таблица?

Answer 2

Я сделал это, создав фиксированную оболочку, а затем позиционируя видимый элемент как дочерний.См http://jsfiddle.net/LDVmu/

Таким образом, HTML был

<div id="top"><div>I am at the top!</div></div>

<div>blah blah blah</div>

И CSS я использовал

#top {position: fixed; width: 100%;}

#top div {width: 50%; margin: auto; border: 1px solid red; background: white;}

Я знаю, что это еще одна вложенная ДИВ, и это меньше, семантическая, но я думаю, что это единственный способ, это будет работать. Похоже, что центрирующий трюк с абсолютным и фиксированным позиционированием и слева/справа = 0 работает с явной шириной пикселей.

Answer 3

Я не уверен в вашем вопросе о том, полностью ли он не выравнивается по центру (т.е. он появляется слева от страницы), или если он слегка нецентральный или, как я подозреваю, почти полностью справа ,

#topwrapper имеет ширину 50%, а также левый 50%. Таким образом, он начинается на полпути через страницу и занимает половину страницы (правая половина). Только этот отрицательный запас полностью отталкивает его в правильном направлении. Вместо отрицательной маржи, уменьшите left до 25%. Тогда вам больше не понадобится отрицательное позиционирование/маржа на #top.

После этого все еще может быть немного не в центре. Если это так, то, вероятно, из-за полос прокрутки, появляющихся на #wrapper. #table настраивается, чтобы разрешить им, #topwrapper не делает (потому что это фиксированное положение, и поэтому он использует только то, что делают html и/или body). Решение - для Chrome и Firefox, по крайней мере, я не проверял в других - это сделать скроллбар вездесущий на html и никогда на body или #wrapper:

Изменение height к min-height в #wrapper, и добавить :

html { 
    margin:   0; 
    height:   100%; 
    overflow-y:  scroll; 
} 
body { 
    margin:   0; 
    min-height:  100%; 
} 

пару заметок ...

1. Если вы хотите #wrapper иметь высоту окна просмотра 100%, то body (и в большинстве браузеров html) тоже нужно иметь.
2. Ваш #table имеет прописку сверху 130px, но #topwrapper имеет высоту из 169px, поэтому ваш Lorem Ipsum спрятан под ним. Я увеличил толщину до 180 пикселей.