Вход

niko42 · 10-23-2011, 06:44 PM

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

Речь пойдет о блоке <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 код:
<?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>

~~Gambit_J~~ · 10-23-2011, 08:17 PM

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

#imgrt {background-attachment: fixed;}

niko42 · 10-23-2011, 08:30 PM

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

#imgrt {background-attachment: fixed;}

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

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

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

~~Gambit_J~~ · 10-23-2011, 08:37 PM

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

niko42

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

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

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

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

PHP код:
<?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~~ · 10-23-2011, 10:37 PM

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

niko42

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

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

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

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

~~Gambit_J~~

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

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

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

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

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

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

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

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

niko42 · 10-24-2011, 04:46 PM

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

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

Вход
Имя пользователя:
Пароль:	Забыли пароль?
	Запомнить меня