Блоки расплываются при масштабировании страницы! - HTML и CSS

i-luk-i@mail.ru · 01.02.2013, 18:40

Всем привет!
Верстаю сайт блоками.
Вроде всё нормально получается,но вот когда увеличиваешь сайт в браузере, блоки разлетаютя кто куда!Использую абсолютное позиционирование,тк по другому вообще не получается.
Жду советов
Третий день уже с ума схожу!!

100% размер,всё нормально

125% блоки лого,спрайты(менюшка)и текст поползли вправо,при уменьшении масштаба всё нормально

рамки вокруг блоков просто для удобства поставлены

Вот код
HTML

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Репетиция,репетиционная,база,студия,музыка,точка,реп-точка,репточка,свободный,звук" />
<meta name="description" content="Репетиционная студия "Свободный звук"" />
<meta name="author" content="Жора" />
<meta name="robots" content="all" />
<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css">
<title>Свободный звук</title>
</head>
 
 
<body>
<div id="fon">
 
<div id="head">
</div>
 
<div id="content">
 
<div id="textbox">
<h1>Кака-бяка</h1>
<p>
Бяка-бяка,кака-кака,бяка-кака,кака-бяка.
</p>
</div>
 
 
<ul id="tabs">
 
<li id="equipment">
<a href="#equipment" title="Аппарат">Аппарат</a>
</li>
<li id="price" >
<a href="#price" title="Цены">Цены</a>
</li>
 
<li id="contact">
<a href="#contact" title="Контакты">Контакты</a>
</li>
</ul>
 
</div>
 
 
 
</div>
</body>
</html>

CSS

Код HTML:

@import url('reset.css'); 
@import url('typography.css');
 
body {
background-color: #f8f8f8;
margin: auto;
width: 100%;
}
 
 div#fon {
    
background: url('../img/content.jpg') no-repeat;
background-color: #6eb9cc;
background-position: center;
 
width: 100%;
height: 1200px; 
 }
 
 div#head {
margin: auto;
background: url(../img/logo.png)
no-repeat;
width: 940px;
height: 323px;  
background-position: center; 
 
 }
 
div#content {
margin: auto;
width: 851px;
height: 875px;
border: 1px solid #b2b2b2;
 
}
div#textbox {
clear: both;
overflow: hidden;
border: 1px solid #bababa;
height: 486px;
width: 761px;
margin-top: 227px;
margin-left: 40px;
}
 
 
ul#tabs {
margin-top: -641px;
position: absolute;
margin-left: 10px;
 
margin-right: 0px;
 
 
 
 
}
ul#tabs li {
background: url(../img/tabs-sprite.png)no-repeat;
float: left;
height: 124px;
width: 151px;
}
ul#tabs li a {
display: block;
height: 100%;
text-indent: -9000px;
width: 100%;
}
ul#tabs li#equipment {
background-position: 0px 0px;
width:151px;
}
ul#tabs li#equipment:hover {
background-position: 0px -124px;
}
ul#tabs li#equipment.current, ul#tabs li#equipment:active {
background-position: 0px -248px;
 
}
 
ul#tabs li#price {
background-position: -151px 0px;
width:116px;
}
 
ul#tabs li#price:hover {
background-position: -151px -124px;
}
 
ul#tabs li#price.current, ul#tabs li#price:active {
background-position: -151px -248px;
}
ul#tabs li#contact {
background-position: -266px 0px;
width:133px;
}
 
ul#tabs li#contact:hover {
background-position: -266px -124px;
}
 
ul#tabs li#contact.current, ul#tabs li#contact:active {
background-position: -266px -248px;
}

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Создание новой страницы при id = 10	Masafi	PHP	8	11.02.2013 16:12
При нажатии на кнопку разлазятся блоки	Crabman	HTML и CSS	2	10.08.2012 17:10
Непонятный касяк при масштабировании	Montysson	Общие вопросы Delphi	2	15.12.2011 23:27
Проблема с выравниванием при масштабировании	wois	HTML и CSS	5	06.12.2011 08:45
Печатаю содержимое формы, шрифты расплываются.	Protsv	Общие вопросы Delphi	16	01.04.2008 10:49