Позиционирование блоков

niko42 · 23.10.2011, 18:44

Здравствуйте уважаемые.

Речь пойдет о блоке <div id="imgrt"></div> - данный блок с позиционирован блоку <div id="container">. Блок <div id="container"> максимальной ширины 1044 px, верстка статическая. Дело в том, что у меня браузер при разрешение 1024px появляется горизонтальная полоса прокрутки из-за блока <div id="imgrt"></div> в данном блоке картинка дополняющая из блока <div id="container">, вопрос, как сделать так, что браузер перекрывал блок <div id="imgrt"> и при этом не было полосы прокрутки.

Более понятнее, вот пример http://wow.mmotop.ru/ - справа и слева картинка (рекламный банер).

P.S. - это моя первая верстка.

PHP код:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta charset="UTF-8">

<link href="style/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">

<div id="imglt"></div>

<div id="imgrt"></div>

    <div id="head">

        <div id="menu">

        </div>

    </div>

    <div id="cont">

        <div id="container2">

            <div id="content">    

                <div class="content top">

                </div>

                <div class="content page">

                </div>

                <div class="content foot">

                </div>

                </table>

            </div>

        </div>

        <div id="status">

            <div class="status topCont"></div>

            <div class="status pageCont">

                Статус

            </div>

            <div class="status footCont"></div>

        </div>

        <div id="statistika"></div>

            <div class="statistika topCont"></div>

            <div class="statistika pageCont"></div>

            <div class="statistika footCont"></div>

        <div id="temsForuma">

            <div class="temsForuma topCont"></div>

            <div class="temsForuma pageCont"></div>

            <div class="temsForuma footCont"></div></div>

        <a href="#"><div id="LKpng"></div></a>

    </div>

    <div id="footer">

        

    </div>

</div>

</body>

</html>

PHP код:


			
html body{

    background:url(/images/asgsdg_10.jpg) repeat;

    margin: 0;

}

#imglt{

    background: url(/images/page_topbg_r1_c2.jpg) no-repeat;

    position: absolute;

    width: 437px;

    height: 600px;

    top: 0;

    right: 100%;

}

#imgrt{

    background: url(/images/page_topbg_r1_c4.jpg) no-repeat;

    position: absolute;

    width: 439px;

    height: 600px;

    top: 0;

    left: 100%;

}

#container{

    margin: 0 auto;

    min-width: 1044px;

    max-width: 1044px;

    position: relative;

}

#head{

    height: 238px;

    width: 1044px;

    background: url(/images/page_topbg_r1_c3.jpg) no-repeat;

    margin: 0 auto;

    padding: 0 0 0 18px;

}

#menu{

    background: url(/images/menu_teste2.png) no-repeat;

    width: 1005px;

    height: 62px;

    position: absolute;

    margin-top: 238px;

}

#cont{

    min-height: 100%;

    background: url(/images/page_topbg_r3_c3.jpg) repeat-y;

    margin: 0 auto -16px;

    padding: 61px 30px 20px;

    overflow: hidden;

}

#status{

    height: 100%;

    margin-top: 7px;

}

#statistika, #temsForuma{

    height: 100%;

    margin-top: 15px;

}

.topCont {

    background: url(/images/top-menu.jpg) no-repeat;

    width: 208px;

    height: 39px;

}

.pageCont {

    background: url(/images/page-menu.jpg) repeat-y;

    width: 208px;

    min-height: 50px;

    padding: 5px ;

    color: #fff;

    text-align:center;

}

.footCont {

    background: url(/images/foot-menu.jpg) no-repeat;

    width: 209px;

    height: 17px;

}

#LKpng{

    background: url(/images/staff.jpg) no-repeat;

    width: 191px;

    height: 143px;

    margin-top: 25px;

}

#container2 {

    float: right;

    margin: 0;

}

#slaid{

    background: url(/images/l2_banner.jpg) no-repeat;

    width: 768px;

    height: 248px;

    margin-top: 10px;

}

#content{

    height: 100%;

    margin: 10px 4px 20px;

    width: 760px;    

}

#content .top{

    background: url(/images/content_header.jpg) no-repeat;

    height: 12px;    

}

#content .page{

    background: url(/images/asff.jpg);

    min-height: 700px;

    color: #fff;

    padding: 0px 15px 5px;

}

#content .foot{

    background: url(/images/content_bottom.jpg) no-repeat;

    height: 12px;    

}

#footer{

    background: url(/images/1_r6_c2.jpg) no-repeat;

    height: 16px;

    padding: 50px 0 40px 0;

    color: #fff;

    text-align:center;

}

~~Gambit_J~~ · 23.10.2011, 20:17

Если я правельно понял Вас.

#imgrt {background-attachment: fixed;}

niko42 · 23.10.2011, 20:30

Цитата:

Сообщение от php_mysql

Если я правельно понял Вас.

#imgrt {background-attachment: fixed;}

К сожлению, Вы не правильно поняли. Постараюсь пояснить более корректно.

Возмем сайт http://la2.mmotop.ru/ - по бокам мы видим банеры. У меня тоже самое по бокам две кртинки. Далее, разрешение браузера 1280px, а разрешение основого контента 1044px, если у нас браузере менее чем 1044px, то появится нижняя полоса прокрутки, а если более то данной полосы нет (сайт ститический).

Мы поставили правый блок #imgrt при этом мой браузер более 1044px, то появилась нижняя полоса прокрутки, а этого не должно быть, т.е. браузер должен перекрывать на половину эту картинку или полностью (в зависимости от разрешение браузера) и при этом полосы прокрутки не должно быть, пока у меня браузер более чем 1044px, то по уровню блока #conteniar

~~Gambit_J~~ · 23.10.2011, 20:37

Это нормально. Что Вы хотели, как должен отображать монитор с маленьким разрешением? У самой то страницы большое разрешение. Другое дело, если у Вас наоборот ситуация - при большом разрешении все смещаеться (для этого делают широкие картинки с разрешение 1600х... +)

niko42 · 23.10.2011, 20:51

Нижняя полоса прокрутки должна появлятся тогда когда разрешаение браузера менее чем 1044px. А здесь блоки спозиционированы обсалютно - означает, что браузер должен перекрывать данный блок и при этом не будет полосы прокрутки - p.s. здесь даже нам не помогает overflow-x:hidden;

Переделал CSS, чтоб можно было увидеть блоки.
Если Вы запустите у себя вебсервер и запустити мою верстку, то увидите три блока. Блеый блок - это основной блок. Красный и зеленый блок это как бы дополняющий основной блог.

Так будет на много понятнее, что я хочу реализовать.

Добавлено через 17 минут

PHP код:


			
html body{

    background-color:#111;

    margin: 0;

}

#imglt{

    background-color:red;

    position: absolute;

    width: 437px;

    height: 600px;

    top: 0;

    right: 100%;

}

#imgrt{

    background-color:green;

    position: absolute;

    width: 439px;

    height: 600px;

    top: 0;

    left: 100%;

}

#container{

    margin: 0 auto;

    min-width: 1044px;

    max-width: 1044px;

    position: relative;

}

#head{

    height: 238px;

    width: 1044px;

    background-color:#fff;

    margin: 0 auto;

    padding: 0 0 0 18px;

}

#menu{

    background-color:#fff;

    width: 1005px;

    height: 62px;

    position: absolute;

    margin-top: 238px;

}

#cont{

    min-height: 100%;

    background-color:#fff;

    margin: 0 auto -16px;

    padding: 61px 30px 20px;

    overflow: hidden;

}

#status{

    height: 100%;

    margin-top: 7px;

}

#statistika, #temsForuma{

    height: 100%;

    margin-top: 15px;

}

.topCont {

    background-color:#fff;

    width: 208px;

    height: 39px;

}

.pageCont {

    background-color:#fff;

    width: 208px;

    min-height: 50px;

    padding: 5px ;

    color: #fff;

    text-align:center;

}

.footCont {

    background-color:#fff;

    width: 209px;

    height: 17px;

}

#LKpng{

    background-color:#fff;

    width: 191px;

    height: 143px;

    margin-top: 25px;

}

#container2 {

    float: right;

    margin: 0;

}

#slaid{

    background-color:#fff;

    width: 768px;

    height: 248px;

    margin-top: 10px;

}

#content{

    height: 100%;

    margin: 10px 4px 20px;

    width: 760px;    

}

#content .top{

    background-color:#fff;

    height: 12px;    

}

#content .page{

    background-color:#fff;

    min-height: 700px;

    color: #fff;

    padding: 0px 15px 5px;

}

#content .foot{

    background-color:#fff;

    height: 12px;    

}

#footer{

    background-color:#fff;

    height: 16px;

    padding: 50px 0 40px 0;

    color: #fff;

    text-align:center;

}

~~Gambit_J~~ · 23.10.2011, 22:37

Короче я понял, что Вам нужно. Во первых у Вас кривой код. Откуда взялось </table> ? открывающегося тега нету вобще. Вобщем щас все попробую перестоить.

niko42 · 24.10.2011, 09:37

Цитата:

Сообщение от php_mysql

Короче я понял, что Вам нужно. Во первых у Вас кривой код. Откуда взялось </table> ? открывающегося тега нету вобще. Вобщем щас все попробую перестоить.

В коде таблицы вообще нет =) И тега </table> тоже не видно=)

И хотелось бы услышить Ваши замечания по коду (c учетом того, что я не ипользовал таблицу).

Я так понимаю, это некий финт такой, что я хочу сделать - и я так думаю, что здесь без javascript не обойтись. В CSS все примочки перебпробыл.

~~Gambit_J~~ · 24.10.2011, 12:48

Цитата:

Сообщение от niko42

В коде таблицы вообще нет =) И тега </table> тоже не видно=)

И хотелось бы услышить Ваши замечания по коду (c учетом того, что я не ипользовал таблицу).

Я так понимаю, это некий финт такой, что я хочу сделать - и я так думаю, что здесь без javascript не обойтись. В CSS все примочки перебпробыл.

Нет, css обойтись можно. Честно меня в тупик поставила Ваша задача, т. к. я не верстальщик в основном, а работаю внутри (веб-програмирование), во всякие примочки верстки я не углублялся. Если время будет я подумаю как можно сделать. Если конечно ни кто не ответит ранее.

P.S. Хотя я удивлен, что ни кто из верстальщиков на форуме (а такие есть) не смог Вам помоч или проигнорировал тему. Им то как раз расплюнуть - решить эту проблему.

Добавлено через 15 минут
Вот смотрите внимательно закрывающийся тег <\table>:

P.S. клиент ла2 кританул бы Вас за такие косяки в комунке

Добавлено через 1 час 58 минут
Да, пожалуй Вы были правы. Это при помощи JS надо делать. ПОсмотрел как на л2топе, там целый скрипт по выравнению, братите внимание как он работает. Выравнивает и назначает ширино и длину левой/правй картинки автоматически по браузеру и т. д.

niko42 · 24.10.2011, 16:46

Спасибо. Действительно тег лишний - я не в notepad писал код, а в Sublime Text - там пока не привычно, но интерфейс мне очень понравился.

Так же завдавал данный вопрос на phpforum.ru и в итоге при совместном обсуждение, пришли к такому выводу, что здесь без js не обойтись.

23.10.2011, 20:17	#2
~~Gambit_J~~ Изгнанные Регистрация: 09.10.2011 Сообщений: 981 Отблагодарили 159 раз(а) Рейтинг мнений:	Re: Позиционирование блоков Если я правельно понял Вас. #imgrt {background-attachment: fixed;}

23.10.2011, 20:37	#4
~~Gambit_J~~ Изгнанные Регистрация: 09.10.2011 Сообщений: 981 Отблагодарили 159 раз(а) Рейтинг мнений:	Re: Позиционирование блоков Это нормально. Что Вы хотели, как должен отображать монитор с маленьким разрешением? У самой то страницы большое разрешение. Другое дело, если у Вас наоборот ситуация - при большом разрешении все смещаеться (для этого делают широкие картинки с разрешение 1600х... +)

23.10.2011, 20:51	#5
niko42 Пользователь Регистрация: 08.11.2010 Сообщений: 175 Отблагодарили 15 раз(а) Рейтинг мнений:	Re: Позиционирование блоков Нижняя полоса прокрутки должна появлятся тогда когда разрешаение браузера менее чем 1044px. А здесь блоки спозиционированы обсалютно - означает, что браузер должен перекрывать данный блок и при этом не будет полосы прокрутки - p.s. здесь даже нам не помогает overflow-x:hidden; Переделал CSS, чтоб можно было увидеть блоки. Если Вы запустите у себя вебсервер и запустити мою верстку, то увидите три блока. Блеый блок - это основной блок. Красный и зеленый блок это как бы дополняющий основной блог. Так будет на много понятнее, что я хочу реализовать. Добавлено через 17 минут PHP код: html body{ background-color:#111; margin: 0; } #imglt{ background-color:red; position: absolute; width: 437px; height: 600px; top: 0; right: 100%; } #imgrt{ background-color:green; position: absolute; width: 439px; height: 600px; top: 0; left: 100%; } #container{ margin: 0 auto; min-width: 1044px; max-width: 1044px; position: relative; } #head{ height: 238px; width: 1044px; background-color:#fff; margin: 0 auto; padding: 0 0 0 18px; } #menu{ background-color:#fff; width: 1005px; height: 62px; position: absolute; margin-top: 238px; } #cont{ min-height: 100%; background-color:#fff; margin: 0 auto -16px; padding: 61px 30px 20px; overflow: hidden; } #status{ height: 100%; margin-top: 7px; } #statistika, #temsForuma{ height: 100%; margin-top: 15px; } .topCont { background-color:#fff; width: 208px; height: 39px; } .pageCont { background-color:#fff; width: 208px; min-height: 50px; padding: 5px ; color: #fff; text-align:center; } .footCont { background-color:#fff; width: 209px; height: 17px; } #LKpng{ background-color:#fff; width: 191px; height: 143px; margin-top: 25px; } #container2 { float: right; margin: 0; } #slaid{ background-color:#fff; width: 768px; height: 248px; margin-top: 10px; } #content{ height: 100%; margin: 10px 4px 20px; width: 760px; } #content .top{ background-color:#fff; height: 12px; } #content .page{ background-color:#fff; min-height: 700px; color: #fff; padding: 0px 15px 5px; } #content .foot{ background-color:#fff; height: 12px; } #footer{ background-color:#fff; height: 16px; padding: 50px 0 40px 0; color: #fff; text-align:center; } Последний раз редактировалось niko42; 23.10.2011 в 21:11. Причина: Добавлено сообщение

23.10.2011, 22:37	#6
~~Gambit_J~~ Изгнанные Регистрация: 09.10.2011 Сообщений: 981 Отблагодарили 159 раз(а) Рейтинг мнений:	Re: Позиционирование блоков Короче я понял, что Вам нужно. Во первых у Вас кривой код. Откуда взялось </table> ? открывающегося тега нету вобще. Вобщем щас все попробую перестоить.

24.10.2011, 16:46	#9
niko42 Пользователь Регистрация: 08.11.2010 Сообщений: 175 Отблагодарили 15 раз(а) Рейтинг мнений:	Re: Позиционирование блоков Спасибо. Действительно тег лишний - я не в notepad писал код, а в Sublime Text - там пока не привычно, но интерфейс мне очень понравился. Так же завдавал данный вопрос на phpforum.ru и в итоге при совместном обсуждение, пришли к такому выводу, что здесь без js не обойтись.

23.10.2011, 18:44	#1
niko42 Пользователь Регистрация: 08.11.2010 Сообщений: 175 Отблагодарили 15 раз(а) Рейтинг мнений:	Позиционирование блоков Здравствуйте уважаемые. Речь пойдет о блоке <div id="imgrt"></div> - данный блок с позиционирован блоку <div id="container">. Блок <div id="container"> максимальной ширины 1044 px, верстка статическая. Дело в том, что у меня браузер при разрешение 1024px появляется горизонтальная полоса прокрутки из-за блока <div id="imgrt"></div> в данном блоке картинка дополняющая из блока <div id="container">, вопрос, как сделать так, что браузер перекрывал блок <div id="imgrt"> и при этом не было полосы прокрутки. Более понятнее, вот пример http://wow.mmotop.ru/ - справа и слева картинка (рекламный банер). P.S. - это моя первая верстка. PHP код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <link href="style/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="imglt"></div> <div id="imgrt"></div> <div id="head"> <div id="menu"> </div> </div> <div id="cont"> <div id="container2"> <div id="content"> <div class="content top"> </div> <div class="content page"> </div> <div class="content foot"> </div> </table> </div> </div> <div id="status"> <div class="status topCont"></div> <div class="status pageCont"> Статус </div> <div class="status footCont"></div> </div> <div id="statistika"></div> <div class="statistika topCont"></div> <div class="statistika pageCont"></div> <div class="statistika footCont"></div> <div id="temsForuma"> <div class="temsForuma topCont"></div> <div class="temsForuma pageCont"></div> <div class="temsForuma footCont"></div></div> <a href="#"><div id="LKpng"></div></a> </div> <div id="footer"> </div> </div> </body> </html> PHP код: html body{ background:url(/images/asgsdg_10.jpg) repeat; margin: 0; } #imglt{ background: url(/images/page_topbg_r1_c2.jpg) no-repeat; position: absolute; width: 437px; height: 600px; top: 0; right: 100%; } #imgrt{ background: url(/images/page_topbg_r1_c4.jpg) no-repeat; position: absolute; width: 439px; height: 600px; top: 0; left: 100%; } #container{ margin: 0 auto; min-width: 1044px; max-width: 1044px; position: relative; } #head{ height: 238px; width: 1044px; background: url(/images/page_topbg_r1_c3.jpg) no-repeat; margin: 0 auto; padding: 0 0 0 18px; } #menu{ background: url(/images/menu_teste2.png) no-repeat; width: 1005px; height: 62px; position: absolute; margin-top: 238px; } #cont{ min-height: 100%; background: url(/images/page_topbg_r3_c3.jpg) repeat-y; margin: 0 auto -16px; padding: 61px 30px 20px; overflow: hidden; } #status{ height: 100%; margin-top: 7px; } #statistika, #temsForuma{ height: 100%; margin-top: 15px; } .topCont { background: url(/images/top-menu.jpg) no-repeat; width: 208px; height: 39px; } .pageCont { background: url(/images/page-menu.jpg) repeat-y; width: 208px; min-height: 50px; padding: 5px ; color: #fff; text-align:center; } .footCont { background: url(/images/foot-menu.jpg) no-repeat; width: 209px; height: 17px; } #LKpng{ background: url(/images/staff.jpg) no-repeat; width: 191px; height: 143px; margin-top: 25px; } #container2 { float: right; margin: 0; } #slaid{ background: url(/images/l2_banner.jpg) no-repeat; width: 768px; height: 248px; margin-top: 10px; } #content{ height: 100%; margin: 10px 4px 20px; width: 760px; } #content .top{ background: url(/images/content_header.jpg) no-repeat; height: 12px; } #content .page{ background: url(/images/asff.jpg); min-height: 700px; color: #fff; padding: 0px 15px 5px; } #content .foot{ background: url(/images/content_bottom.jpg) no-repeat; height: 12px; } #footer{ background: url(/images/1_r6_c2.jpg) no-repeat; height: 16px; padding: 50px 0 40px 0; color: #fff; text-align:center; }

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Позиционирование	flashboom777	PHP	0	10.03.2011 20:00