Проблема с фиксацией фона

DarkSim · July 18, 2011

Добрый день форумчани.

Собственно проблема такая:

- При уменьшении окна браузера фон макета начинает сдвигаться, что не есть правильно.

Пробовал его зафиксировать с помощью min-width, реакции 0.

Примеры:

http://www.rzonline.ru/ - Фон не фиксированный (как у меня)

http://pw.mail.ru/ - Фон фиксированный (как нужно)

Фотографии моей проблемы:

- Нормальное разрешение

- При уменьшении окна

CSS:


@font-face {
	font-family: 'Trajan Pro';
	src: url('systemFonts/Trajan.eot?') format('eot'), 
	     url('systemFonts/Trajan.woff') format('woff'), 
	     url('systemFonts/Trajan.ttf')  format('truetype'),
		 url('font/TrajanPro.otf')  format('opentype'),
	     url('systemFonts/Trajan.svg#svgTrajan') format('svg');
}
body {
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #ffffff;
	min-width: 663px;
}
a {
	text-decoration:none;
}
h1 {
	font-family: Trajan Pro;
	font-size: 18px;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	text-indent: 55px;
	color: #3b2402;
	text-shadow: #efe7d3 0px 1px 0px;
}
h2 {
	font-family: Tahoma;
	font-size: 16px;
	color: #170d00;
	font-weight:normal;
	text-indent: 70px;
}
h3 {
	font-family: Tahoma;
	font-size: 10px;
	color: #a49673;
	font-weight: normal;
	text-indent: 70px;
	margin-top: -15px;
}
p {
	font-family: Tahoma;
	font-size: 11px;
	color: #1c1000;
	text-indent: 70px;
	padding-top: 7px;
}
.intro {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	width: 663px;
	height: auto;
	padding: 0px;
	min-width: 663px;
}
.head {
	background-image: url(images/head.png);
	height: 240px;
	width: 663px;
	margin: 0px;
	padding: 0px;
}
.menu {
	height: 107px;
	width: 663px;
	margin: 0px;
	padding: 0px;
}
.left {
	background-image: url(images/menu_left.png);
	height: 107px;
	width: 200px;
	float: left;
	margin: 0px;
	padding: 0px;
}
.left:hover {
	background-image: url(images/menu_left_on.png);
}
.logo {
	background-image: url(images/logo.png);
	height: 107px;
	width: 263px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.right {
	background-image: url(images/menu_right.png);
	float: right;
	height: 107px;
	width: 200px;
	margin: 0px;
	padding: 0px;
}
.right:hover {
	background-image: url(images/menu_right_on.png);
}
.content {
	background-image: url(images/content.png);
	height: 503px;
	width: 663px;
	margin: 0px;
	padding: 0px;
}
.foot {
	background-image: url(images/footer.png);
	height: 35px;
	width: 663px;
	margin: 0px;
	padding: 0px;
	font-family: Tahoma;
	font-size: 9px;
	color: #886d46;
	text-shadow: #dcceae 0px 1px 0px;
}
.news {
	width: 525px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.item {
	background-image: url(images/icon.png);
	background-position: left top;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
}
.copy {
	width: 150px;
	float: left;
	padding-left: 50px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.links {
	float: right;
	width: 310px;
	padding-top: 10px;
}
.links a:link{
	color: #886d46;
}
.links a:hover{
	color: #604a29;
}
.links a:visited{
	color: #8b7b64;
}
.links a:active{
	color: #886d46;
}

HTML


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mu Online GameServer - Intro</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="intro">
<div class="head"></div>
<div class="menu">
<a href="#"><div class="left"></div></a>
<a href="#"><div class="right"></div></a>
<div class="logo"></div></div>
<div class="content">
<h1>GameServer News</h1>
<div class="news">
<div class="item">
  <h2>Lorem ipsum dolor sit amet</h2>
  <h3>10.07.2011 | 05:35 PM</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
  <div class="item">
    <h2>Lorem ipsum dolor sit amet</h2>
    <h3>10.07.2011 | 05:35 PM</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="item">
  <h2>Lorem ipsum dolor sit amet</h2>
  <h3>10.07.2011 | 05:35 PM</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="foot">
<div class="copy">© 2011 Mu Online GameServer.<br />
Design: DarkSim</div>
<div class="links"><a href="1">News</a> | <a href="2">Registration</a> | <a href="3">Downloads</a> | <a href="4">About</a> | <a href="5">Contacts</a> | <a href="6">Forum</a></div>
</div>
</div>
</body>
</html>

Заранее спасибо за помощь.

Great Rash · July 18, 2011

http://forum.htmlbook.ru/index.php?showtopic=22778

UPD: читать весь топик до конца

DarkSim · July 18, 2011

Большое спасибо.

Sign In

Проблема с фиксацией фона

Question

DarkSim

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

DarkSim

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information