Body background изменить положение

d0ublezer0 · June 25, 2009

Здрасте.

Вот есть такая верстка: www.zebra-tara.ru/test.html

Я сделал div

#bg_main {
background: url(/images/bg_main.jpg) no-repeat;
width:1081px;
height:558px;
position:absolute;
z-index:-1;
left:50%;
margin-left:-440px;
}

,

он у меня выполняет роль подложки сайта.

Но так как в бэкграунде используется большая картинка, страница получается с горизонтальным скроллом.

Как положить картинку в фон к тегу BODY, чтобы она располагалась так, как сейчас в слое?

Veseloff · June 25, 2009

Используем для body свойства background-image и background-position

Great Rash · June 25, 2009

body {
background: url(/images/bg_main.jpg) 50% 50% no-repeat;
}
первая цифра - левый отступ
вторая цифра - отступ сверху

d0ublezer0 · June 26, 2009

Спасибо

Еще, чтобы не создавать новую тему, может кто подскажет, как сделать, чтобы ссылки в главном меню не сползали одна под другую, если размер окна браузера сделать меньше?

Также сползают правый и левый скругленные элементы черные вокруг ссылок.

Все это происходит, если меню на экране целиком не умещается.

Как бы можно min-width для контейнера использовать, но IE его не поймет.

Searcher · June 26, 2009

Вариантов возникновения проблем, которые вы описали очень много. Может мы не будем гадать, а посмотрим на код вашей странички.

А min-width для ИЕ например есть тут http://trifler.ru/blog/i/users/min-height.htm

d0ublezer0 · June 26, 2009

Ссылку на страницу я приводил в первом посте ссылка еще раз

На всякий случай, кусок кода, с меню:

<div id="mm" class="black_back">
  <div class="left"></div>
  <div class="center"><a href="#">компания</a> <a href="#">каталог</a> <a href="#">новости</a> <a href="#">контакты</a></div>
  <div class="right"></div>
</div>

И код CSS:

#mm {
	left:50%;
	margin-left:-175px;
	overflow:hidden;
	position:absolute;
	top:200px;
}
.black_back .left {
	background:url(/images/mm_back_left.png) no-repeat;
	width: 26px;
	height:47px;
	float:left;
}
.black_back .right {
	background:url(/images/mm_back_right.png) no-repeat;
	width: 26px;
	height:47px;
	float:left;
}
.black_back .center {
		height:47px;
		background:  url(/images/mm_back.png) repeat-x;
		float:left;
}
#mm a {
	display:block;
	background:url(/images/mm_button.png) no-repeat;
	width:136px;
	height:28px;
	line-height:28px;
	color:#FFF;
	float:left;
	font-size:1em;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	margin:7px 0 0 -3px;
	white-space:nowrap;
}
#mm a:hover {
	text-decoration:none;

}

Edited June 26, 2009 by d0ublezer0

Searcher · June 26, 2009

Переделайте все на список, семантичнее будет. Вот так работает без переноса, оформление уже добавляйте сами всякими бэкграундами:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {margin:0; padding:0; }
html, body {height:100%; width:100%; background: white;}

ul#menu {
	font-family: "Impact", "Arial", sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	color: #444;
	text-align: center;
	white-space: nowrap;

}

ul#menu li {
	display: inline;
	white-space: nowrap;
}

ul#menu li a {
	color: #520;
	text-decoration: none;
}


</style>
</head>
<body>
	<ul id="menu">
		<li><a href="#">Компания</a></li>
		•
		<li><a href="#">Каталог</a></li>
		•
		<li><a href="#">Новости</a></li>
		•
		<li><a href="#">Контакты</a></li>
		•
		<li><a href="#">Ещё что-то</a></li>
		•
		<li><a href="#">Ну и ещё</a></li>
	</ul>
</body>
</html>

d0ublezer0 · June 29, 2009

Переделайте все на список, семантичнее будет. Вот так работает без переноса, оформление уже добавляйте сами всякими бэкграундами:

Поправил, с учетом ваших рекомендаций.

Всё так же слетает

Как в списке, так и по краям.

Sign In

Body background изменить положение

Question

d0ublezer0

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Veseloff

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information