Речь пойдет о блоке <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/ - справа и слева картинка.
<!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>
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;
}
Спустя 32 минуты, 15 секунд (23.10.2011 - 11:04) redreem написал(а):
#container{
margin: 0 auto;
min-width: 1044px;
max-width: 1044px;
position: relative;
overflow-x:hidden
}
Спустя 11 минут, 23 секунды (23.10.2011 - 11:15) niko42 написал(а):
Прописывали в контенир overflow-x:hidden, но к сожалению, тогда вообще пропадают два блока (т.е. две картинки по бокам)
<div id="imglt"></div>
<div id="imgrt"></div>
или там нужно указывать с префиксами под оперу, мазилу, ИЕ и т.д. -moz-overflow-x: hidden; ?
<div id="imglt"></div>
<div id="imgrt"></div>
или там нужно указывать с префиксами под оперу, мазилу, ИЕ и т.д. -moz-overflow-x: hidden; ?
Спустя 16 минут, 48 секунд (23.10.2011 - 11:32) niko42 написал(а):
К сожалению, overflow-x:hidden не помогло.
Спустя 1 час, 27 минут, 44 секунды (23.10.2011 - 13:00) niko42 написал(а):
Задалали overflow-x:hidden - в html body"
Получилось, не то что мы хотим, а именно при смещение окна браузере менее чем 1044px, то не появляется полоса прокрутки.
Получилось, не то что мы хотим, а именно при смещение окна браузере менее чем 1044px, то не появляется полоса прокрутки.