Такая проблема,
при уменьшении в браузере, весь контент смещается влево, а картинка остается по центру, как сделать чтобы контент не смещался ?
скриношот прилагается !
заранее спасибо!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TAMILA collection. Бижутерия своими руками.</title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<link href="work/css_pirobox/style_5/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="work/js/jquery_1.5-jquery_ui.min.js"></script>
<script type="text/javascript" src="work/js/pirobox_extended_feb_2011.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.piroBox_ext({
piro_speed :700,
bg_alpha : 0.5,
piro_scroll : true,
piro_drag :false,
piro_nav_pos: 'bottom'
});
});
</script>
</head>
<body>
<!-- ЛЕВАЯ КОЛОНКА -->
<div id="lh-col">
<div id="menu">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="brasleti.html">Браслеты</a></li>
<li><a href="sergi.html">Серьги</a></li>
<li><a href="kolehki.html">Кольешки</a></li>
<li><a href="podveski.html">Подвески</a></li>
<li><a href="nabori.html">Наборы</a></li>
<li><a href="broshi.html">Броши</a></li>
<li><a href="raboti_na_devushkah.html">Работы на девушках</a></li>
<li><a href="zakaz.html">Сделать заказ</a></li>
<li><a href="kontakti.html">Контакты</a></li>
</ul>
</div>
</div>
<!-- КОНЕЦ ЛЕВОЙ КОЛОНКИ -->
<!-- ПРАВАЯ КОЛОНКА -->
<div id="rh-col">
<div class="new_work">
<p class="new"> НОВЫЕ РАБОТЫ </p>
<ul class="fotogalery">
<li>
<a href="work/image/1.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/1s.jpg" width="210" height="160" />
</a>
</li>
<li>
<a href="work/image/2.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/2s.jpg" width="210" height="160" />
</a>
</li>
<li>
<a href="work/image/3.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/3s.jpg" width="210" height="160" />
</a>
</li>
</ul>
</div>
<div class="all_work">
<p class="all">ОСТАЛЬНЫЕ РАБОТЫ</p>
<ul class="fotogalery">
<li>
<a href="work/image/4.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/4s.jpg" width="210" height="160" />
</a>
</li>
<li>
<a href="work/image/5.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/5s.jpg" width="210" height="160" />
</a>
</li>
<li>
<a href="work/image/6.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/6s.jpg" width="210" height="160" />
</a>
</li>
<ul class="fotogalery">
<li>
<a href="work/image/7.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/7s.jpg" width="210" height="160" />
</a>
</li>
<li>
<a href="work/image/8.jpg" rel="gallery" class="pirobox_gall" title="">
<img src="work/image/8s.jpg" width="210" height="160" />
</a>
</li>
</ul>
</div>
<div class="footer">
<p class="footer"> Частная коллекция мастера Тамилы Венюковой 2011г.</p>
</div>
</div>
<!--КОНЕЦ ПРАВОЙ КОЛОНКИ -->
</body>
</html>
[CSS]body{background-image:url(main-bg2.jpg); background-repeat:no-repeat;
margin: 0 auto;
background-attachment: fixed;
background-position: top;
widht: 120%;
height: 120%;
padding:0;
}
/* Левая КОЛОНКА */
#lh-col{
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
position: absolute;
top: 250px;
left: 40px;
width: 190px;
background: #666;
margin: 0px;
padding: 0px;
height: 360px;
}
/*ПРАВАЯ КОЛОНКА */
#rh-col{
width:750px;
margin-bottom:50px;
background-color: #7E5281;
padding: 10px;
margin-left:250px;
margin-top:250px;
border-radius:6px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
p.new {color: #F9C; text-decoration:blink; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:18px;
margin:auto}
p.all {color: #96C ; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:18px;
margin:auto}
/* МЕНЮ */
#menu{
padding: 15px 5px 5px 5px; }
#menu ul {
margin-top:0;
background: #666 ;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 180px;
height:100%;
}
#menu li {
font: 80% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-left:0px;
}
#menu a {
color: #FFF;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight:normal;
}
#menu a:hover {
background: #93F ;
color: #fff;
padding-bottom: 8px;
}
/* DIV верхний в Правой колонке для новых работ */
.new_work {border:0px solid #520776 ;border-radius:6px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
margin-bottom:10px;
background-color:#FFF}
/* DIV нижний в Правой колонке для всех работ */
.all_work {border:0px solid #520776 ;border-radius:6px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
background-color:#FFF}
/* параметры для галлереи */
ul.fotogalery { margin-left:0px; margin-top:0px;
display: inline-block;}
ul.fotogalery img {border:0px;display: inline-block;padding-top:10px; padding-left:0px }
ul.fotogalery li {list-style:none;
display: inline-block;
padding-right:5px;
padding-top:0px;
padding-left:25px;
padding-bottom:15px;
margin-top:0px;
}
/* DIV footer */
.footer {
height:40px;
background-color:#660099;
border-radius:6px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
margin-bottom:10px;
}
p.footer { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:12px; color: #FFF; text-align:right; padding-top:10px;}[/CSS]