Позиционирование блоков - Форум администраторов игровых серверов
Форум администраторов игровых серверов StormWall - Защита от DDos атак
Регистрация Мнения Справка Пользователи Календарь Все разделы прочитаны
Вернуться   Форум администраторов игровых серверов > Полезное / Common > Программирование / Programming

Программирование / Programming
Ищете помощи в написании программы, есть сложность в выполнении задания (в институте и т.д.), пожалуйста, спросите у нас в данном форуме и мы обязательно вам поможем.

Ответ
Опции темы
Непрочитано 23.10.2011, 18:44   #1
Пользователь

Автор темы (Топик Стартер) Позиционирование блоков

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

Речь пойдет о блоке <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.jpgrepeat;
    
margin0;
}
#imglt{
    
backgroundurl(/images/page_topbg_r1_c2.jpgno-repeat;
    
positionabsolute;
    
width437px;
    
height600px;
    
top0;
    
right100%;
}
#imgrt{
    
backgroundurl(/images/page_topbg_r1_c4.jpgno-repeat;
    
positionabsolute;
    
width439px;
    
height600px;
    
top0;
    
left100%;
}
#container{
    
margin0 auto;
    
min-width1044px;
    
max-width1044px;
    
positionrelative;
}
#head{
    
height238px;
    
width1044px;
    
backgroundurl(/images/page_topbg_r1_c3.jpgno-repeat;
    
margin0 auto;
    
padding0 0 0 18px;
}
#menu{
    
backgroundurl(/images/menu_teste2.pngno-repeat;
    
width1005px;
    
height62px;
    
positionabsolute;
    
margin-top238px;
}
#cont{
    
min-height100%;
    
backgroundurl(/images/page_topbg_r3_c3.jpgrepeat-y;
    
margin0 auto -16px;
    
padding61px 30px 20px;
    
overflowhidden;
}
#status{
    
height100%;
    
margin-top7px;
}
#statistika, #temsForuma{
    
height100%;
    
margin-top15px;
}
.
topCont {
    
backgroundurl(/images/top-menu.jpgno-repeat;
    
width208px;
    
height39px;
}
.
pageCont {
    
backgroundurl(/images/page-menu.jpgrepeat-y;
    
width208px;
    
min-height50px;
    
padding5px ;
    
color#fff;
    
text-align:center;
}
.
footCont {
    
backgroundurl(/images/foot-menu.jpgno-repeat;
    
width209px;
    
height17px;
}
#LKpng{
    
backgroundurl(/images/staff.jpgno-repeat;
    
width191px;
    
height143px;
    
margin-top25px;
}
#container2 {
    
floatright;
    
margin0;
}
#slaid{
    
backgroundurl(/images/l2_banner.jpgno-repeat;
    
width768px;
    
height248px;
    
margin-top10px;
}
#content{
    
height100%;
    
margin10px 4px 20px;
    
width760px;    
}
#content .top{
    
backgroundurl(/images/content_header.jpgno-repeat;
    
height12px;    
}
#content .page{
    
backgroundurl(/images/asff.jpg);
    
min-height700px;
    
color#fff;
    
padding0px 15px 5px;
}
#content .foot{
    
backgroundurl(/images/content_bottom.jpgno-repeat;
    
height12px;    
}
#footer{
    
backgroundurl(/images/1_r6_c2.jpgno-repeat;
    
height16px;
    
padding50px 0 40px 0;
    
color#fff;
    
text-align:center;

niko42 вне форума Ответить с цитированием
Непрочитано 23.10.2011, 20:17   #2
Изгнанные

По умолчанию Re: Позиционирование блоков

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

#imgrt {background-attachment: fixed;}
Gambit_J вне форума Отправить сообщение для Gambit_J с помощью ICQ Отправить сообщение для Gambit_J с помощью Skype™ Ответить с цитированием
Непрочитано 23.10.2011, 20:30   #3
Пользователь

Автор темы (Топик Стартер) Re: Позиционирование блоков

Цитата:
Сообщение от php_mysql Посмотреть сообщение
Если я правельно понял Вас.

#imgrt {background-attachment: fixed;}
К сожлению, Вы не правильно поняли. Постараюсь пояснить более корректно.

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

Мы поставили правый блок #imgrt при этом мой браузер более 1044px, то появилась нижняя полоса прокрутки, а этого не должно быть, т.е. браузер должен перекрывать на половину эту картинку или полностью (в зависимости от разрешение браузера) и при этом полосы прокрутки не должно быть, пока у меня браузер более чем 1044px, то по уровню блока #conteniar
niko42 вне форума Ответить с цитированием
Непрочитано 23.10.2011, 20:37   #4
Изгнанные

По умолчанию Re: Позиционирование блоков

Это нормально. Что Вы хотели, как должен отображать монитор с маленьким разрешением? У самой то страницы большое разрешение. Другое дело, если у Вас наоборот ситуация - при большом разрешении все смещаеться (для этого делают широкие картинки с разрешение 1600х... +)
Gambit_J вне форума Отправить сообщение для Gambit_J с помощью ICQ Отправить сообщение для Gambit_J с помощью Skype™ Ответить с цитированием
Непрочитано 23.10.2011, 20:51   #5
Пользователь

Автор темы (Топик Стартер) Re: Позиционирование блоков

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


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

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

Добавлено через 17 минут
PHP код:
html body{
    
background-color:#111;
    
margin0;
}
#imglt{
    
background-color:red;
    
positionabsolute;
    
width437px;
    
height600px;
    
top0;
    
right100%;
}
#imgrt{
    
background-color:green;
    
positionabsolute;
    
width439px;
    
height600px;
    
top0;
    
left100%;
}
#container{
    
margin0 auto;
    
min-width1044px;
    
max-width1044px;
    
positionrelative;
}
#head{
    
height238px;
    
width1044px;
    
background-color:#fff;
    
margin0 auto;
    
padding0 0 0 18px;
}
#menu{
    
background-color:#fff;
    
width1005px;
    
height62px;
    
positionabsolute;
    
margin-top238px;
}
#cont{
    
min-height100%;
    
background-color:#fff;
    
margin0 auto -16px;
    
padding61px 30px 20px;
    
overflowhidden;
}
#status{
    
height100%;
    
margin-top7px;
}
#statistika, #temsForuma{
    
height100%;
    
margin-top15px;
}
.
topCont {
    
background-color:#fff;
    
width208px;
    
height39px;
}
.
pageCont {
    
background-color:#fff;
    
width208px;
    
min-height50px;
    
padding5px ;
    
color#fff;
    
text-align:center;
}
.
footCont {
    
background-color:#fff;
    
width209px;
    
height17px;
}
#LKpng{
    
background-color:#fff;
    
width191px;
    
height143px;
    
margin-top25px;
}
#container2 {
    
floatright;
    
margin0;
}
#slaid{
    
background-color:#fff;
    
width768px;
    
height248px;
    
margin-top10px;
}
#content{
    
height100%;
    
margin10px 4px 20px;
    
width760px;    
}
#content .top{
    
background-color:#fff;
    
height12px;    
}
#content .page{
    
background-color:#fff;
    
min-height700px;
    
color#fff;
    
padding0px 15px 5px;
}
#content .foot{
    
background-color:#fff;
    
height12px;    
}
#footer{
    
background-color:#fff;
    
height16px;
    
padding50px 0 40px 0;
    
color#fff;
    
text-align:center;


Последний раз редактировалось niko42; 23.10.2011 в 21:11. Причина: Добавлено сообщение
niko42 вне форума Ответить с цитированием
Непрочитано 23.10.2011, 22:37   #6
Изгнанные

По умолчанию Re: Позиционирование блоков

Короче я понял, что Вам нужно. Во первых у Вас кривой код. Откуда взялось </table> ? открывающегося тега нету вобще. Вобщем щас все попробую перестоить.
Gambit_J вне форума Отправить сообщение для Gambit_J с помощью ICQ Отправить сообщение для Gambit_J с помощью Skype™ Ответить с цитированием
Непрочитано 24.10.2011, 09:37   #7
Пользователь

Автор темы (Топик Стартер) Re: Позиционирование блоков

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

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

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

Последний раз редактировалось niko42; 24.10.2011 в 11:58.
niko42 вне форума Ответить с цитированием
Непрочитано 24.10.2011, 12:48   #8
Изгнанные

По умолчанию Re: Позиционирование блоков

Цитата:
Сообщение от niko42 Посмотреть сообщение
В коде таблицы вообще нет =) И тега </table> тоже не видно=)

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

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

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

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



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

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

Последний раз редактировалось Gambit_J; 24.10.2011 в 14:46. Причина: Добавлено сообщение
Gambit_J вне форума Отправить сообщение для Gambit_J с помощью ICQ Отправить сообщение для Gambit_J с помощью Skype™ Ответить с цитированием
Непрочитано 24.10.2011, 16:46   #9
Пользователь

Автор темы (Топик Стартер) Re: Позиционирование блоков

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

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


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

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


© 2007–2024 «Форум администраторов игровых серверов»
Защита сайта от DDoS атак — StormWall
Работает на Булке неизвестной версии с переводом от zCarot
Текущее время: 00:20. Часовой пояс GMT +3.

Вверх