нужна помощь по абсолютному центрированию слоя

Marishkas · March 13, 2013

Ребят, помогите, пожалуйста, по верстке немного.

То ли я уже заработалась, то ли еще что-то.

Вещь вроде несложная, но никак не рожается.

<!DOCTYPE html>

<html>

<head>

#sloy4{

top: 50px;

width: 900px;

height:50px;

background:red;

position: absolute;

left: 50%;

margin-left: -450px;

}

</style>

</head>

<body>

<div id="sloy4">wertwert</div>

</body>

</html>

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

Николя223 · March 13, 2013

читайте про overflow-x

Edited March 13, 2013 by Николя223

Marishkas · March 13, 2013

Подскажите, пожалуйста, как все же это сделать на моем примере, указанном в первом посте. Код же специально написала.

Про оверфлоу прочитала.

~~~~~~~~~~~~~~~~~~~~~~~

Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.

overflow-x: auto | hidden | scroll | visible

В указанный мною пример я добавила

#sloy4{

top: 50px;

width: 900px;

height:50px;

background:red;

position: absolute;

left: 50%;

margin-left: -450px;

display:block;

overflow-x:visible;

}

Edited March 13, 2013 by Marishkas

Justnewone · March 13, 2013

Вы немного задачу поставили... непонятно.

"Как сделать так, чтобы слой в любом случае оставался по середине страницы, а полоса прокрутки не появлялась, т.к. равномерно заходила за левый и правый край окна браузера."

Кто "так как заходила", полоса прокрутки? Но ведь она и не должна появляться. Если вам надо чтобы красное куда-то заходило без прокрутки, да еще и равномерно влево - боюсь что только javascript. А еще лучше, покажите исходный макет.

Marishkas · March 13, 2013

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

Мне нужно сделать так, чтобы эта полоса прокрутки вообще не появлялась, как бы я не сужала страницу.

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

Edited March 13, 2013 by Marishkas

Justnewone · March 13, 2013

Я не очень понимаю, что значит уходил? Если в нем есть контент, допустим текст - он так же "равномерно уходит" за края без прокрутки?

Marishkas · March 14, 2013

Уходил означает - пропадал, заезжал.

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

Switch74 · March 14, 2013

Чтобы не появлялась горизонтальная полоса прокрутки overflow-x:hidden; нужно поставить для body а не для #sloy4.

Тогда должно получиться что-то подобное, что вам требуется.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
width:100%;
overflow-x:hidden;
}
#sloy4{
top: 50px;
width: 900px;
height:50px;
background:red;
position: absolute;
left: 50%;
margin-left: -450px;
}
</style>
</head>
<body>
  <div id="sloy4">wertwert</div>
</body>
</html>

Edited March 14, 2013 by Switch74

Николя223 · March 14, 2013

зачем JS-то, ну нафиг...

http://jsfiddle.net/nikolya223/xJsLt/

Edited March 14, 2013 by Николя223

Marishkas · March 14, 2013

зачем JS-то, ну нафиг...
http://jsfiddle.net/nikolya223/xJsLt/

Николя, посмотрела то, что вы предложили. Там ПОЧТИ то, что нужно.

НО при открытии страницы с вашим кодом (ничего не меняла) как в опере, так и в ие сразу появляется полоса прокрутки внизу на все окно браузера.

Как от нее избавиться?

Edited March 14, 2013 by Marishkas

Николя223 · March 14, 2013

А сами - то поэкспериментировать не можете?

так пробуйте

проверил во всех доступных браузерах, в тот раз косячил только IE7, сейчас везде одинаково

Switch74 · March 14, 2013

ххх...

подставили храмому костыль с одной стороны - начал заваливаться на другую сторону,

с другой стороны еще один и вот оно, немного не то что нужно, но хотя бы так...\

курите position: absolute; в .sloy4_overflow

Edited March 14, 2013 by Switch74

Николя223 · March 14, 2013

нда... так то там и так абсоют =)) поясните ваше высказывание)) у меня во всех браузерах все отлично)) или я что то не вижу?

Edited March 14, 2013 by Николя223

Switch74 · March 14, 2013

Сейчас может быть полоски и нет, но в браузерах появился отступ справа, а нужен ли он?..

Николя223 · March 14, 2013

ну дак я же и пишу)) САМИМ смотреть нужно, а не расчитывать на кого то и пальцем тыкать)) width: 98% не убрал... уж извините =) соизвольте сами на 100 поставить

Switch74 · March 14, 2013

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

про это я и писал выше: решаем одну проблему, появляется другая.

ладно, извиняюсь, давно не спорил на этом форуме

Edited March 14, 2013 by Switch74

Николя223 · March 14, 2013

рассуждаем:

Мы убираем абсолют контейнеру, что происходит? контейнер перестает иметь абсолютную привязку. если убираем контейнер, что происходит?

правильно)) мы возвращаемся к прежнему результату - появляется нижний скролл. чтобы его убрать, можно поставить overflow-x: hidden на весь body.. а оно нам надо? конечно нет. мы же не хотим, чтобы не отображался основной контент, который не вписывается в окно) возможно на каких то страницах и не будет этого, я так предполагаю - банера))

ну вот) гораздо проще - сделать для него такой контейнер, в котором и будет находится содержимое , и (если это всё таки баннер, возможно он будет закрываться) при закрытии просто скрывать весь контейнер) и оставить в покое overflow всего документа =)

просто я всегда думаю на шаг - два вперед))

и upd: посмотрите внимательно на исходный код, который нам Marishkas любезно предоставила - там у нужного элемента position: absolute =) ну и как выдумаете в контексте будет использоваться этот блок? =) думаю она сама нам ответит))

Switch74 · March 14, 2013

да я уже понял свою ошибку, вот и извинился

Marishkas · March 14, 2013

Николя, спасибо. Помогло. Вопрос закрыт.

Я много чего пыталась менять, но в каждом случае получалось "чуточку" не то.

Edited March 14, 2013 by Marishkas

Sign In

нужна помощь по абсолютному центрированию слоя

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information