Свойство background-repeat

ar. · December 13, 2011

Добрый день. Подскажите как правильно прописать свойство background-repeat, а то у меня кроме как указанным ниже способом не получается (много дубляжа при этом)?

И ещё, подскажите можно ли (и как) использовать не полностью имя селектора id, а только его часть, например вместо tabname_3, просто tabname... и чтоб стиль применялся ко всем селекторам id начинающихся с этого имени? Извините, но не мог найти ответа возможно на не сложную задачу. С уважением Артём.

html-

================

<li><a id='tabname_6' href="#">SHOPPING GUIDE</a></li>

<li><a id='tabname_5' href="#">AROMATHERAPY</a></li>

<li><a id='tabname_4' href="#">SPICE</a></li>

<li><a id='tabname_2' href="#">HERBS</a></li>

<li><a id='tabname_1' href="#" class="active">HOMEPAGE</a></li>

================

css-

================

#tabname_1.active{

background:url(images/Homepage.png);

background-repeat: no-repeat;

}

#tabname_2.active{

background:url(images/Herbs.png);

background-repeat: no-repeat;

}

#tabname_3.active{

background:url(images/Teas.png);

}

================

hedgehog · December 13, 2011


.active {background-repeat: no-repeat;}

а еще можно бекграунд задавать так:


#element {background: url('something.png') no-repeat;}

Edited December 13, 2011 by hedgehog

ar. · December 13, 2011

Не сработал не один из вариантов, кроме тех что у меня были.

А что на счёт вопрос об имени id селектора?

Ниже весь код

html -

<!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>New Beautyfull Tabs from Belyash</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".selectTabs").each(function () {
		var tmp = $(this);
		console.log($(tmp).find(" .lineTabs li"));
		$(tmp).find(".lineTabs li").each(function (i) {
			$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
				var tab_id=i+1;
				$(tmp).find(".lineTabs li a").removeClass("active");
				$(this).addClass("active");
				$(tmp).find(".content div").stop(false,false).hide();
				$(tmp).find(".tab"+tab_id).stop(false,false).show();
				return false;
			})
		})
	})
})
</script>
</head>
<body>
	<div id="wrap">
		<div class="selectTabs">
			<ul class="lineTabs">
				<li><a id='tabname_6' href="#" class="active">HOMEPAGE</a></li>
				<li><a id='tabname_5' href="#">HERBS</a></li>
				<li><a id='tabname_4' href="#">TEAS</a></li>
                <li><a id='tabname_3' href="#">SPICE</a></li>
                <li><a id='tabname_2' href="#">AROMATHERAPY</a></li>
				<li><a id='tabname_1' href="#">SHOPPING GUIDE</a></li>
			</ul>
			<div class="content">
				<div class="tab1">
					<h3>Напишите мне</h3>
					<form action="#">
						<label for="name">Ваше имя</label><br />
						<input name="name" type="text" /><br />
						<label for="email">Ваш E-mail</label><br />
						<input name="email" type="text" /><br />
						<label for="comment"">Текст сообщения</label><br />
						<textarea name="comment"></textarea>
					</form>	
				</div>
				<div class="tab2">
					<h3>Contrary to popular</h3>
					<p>Contrary to popular belief, Lorem Ipsum  is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
					<h3>Richard McClintock</h3>
					<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
					<h3>Lorem Ipsum</h3>
					<p>Lorem Ipsum  comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				</div>
				<div class="tab3">
					<img src="images/giraf.jpg" />
				</div>
				<div class="tab4" style="display:block;">
					<img src="images/zayac.jpg" style="float: left; padding-right: 15px;" />
					<p>Зайцы (лат. Leporidae) — семейство млекопитающих из отряда зайцеобразных, включающее в себя собственно зайцев (главным образом род Lepus, но также Pronolagus и Caprolagus) и кроликов (остальные роды). Зайцы распространены по всему миру, кроме Австралии и отдаленных островов, на многие из которых ввезены людьми. Отличаются от пищух развитыми задними конечностями, длинными ушами и наличием короткого хвоста.</p>
				</div>
			</div>
		</div>
	</div>
	<div style="position: absolute; bottom: 5px; left: 5px;">
		<a style="color: rgb(27, 100, 220); font: 12px arial;" href="http://web4develop.ru">web4develop.ru</a>
	</div>
</body>
</html>

css-

html, body{
	background:#aaa url(images/bg.png);
	color:#00557F;
	font:normal 14px Verdana;
	margin:0px;
	padding:0px;
}
h3{
	border-bottom:1px solid #4c9ac3;
}
form, label, 
input, textarea{
	font-size:11px;
}
input{
	background:#BBD9FA;
	border:1px solid #4c9ac3;
	height:12px;
	margin:0px 0px 5px 0px;
	width:150px;
}
textarea{
	background:#BBD9FA;
	border:1px solid #4c9ac3;
	height:36px;
	width:460px;
}
#wrap{
	margin:30px auto;
	width:1000px;
}
.lineTabs{
	height:30px;
	list-style:none;
	margin:0px auto;
	padding:0px;
	padding-right:30px;
	padding-left:10px;
	width:auto;
}
.lineTabs li{
	display:block;
	float:right;
	margin:0px;
	padding:0px;
	position:relative;
	overflow:visible;
	text-align:center;
	width:110px;
}
.lineTabs li a{
	background-repeat: no-repeat;
	color:#600;
	display:block;
	font:normal 14px Verdana;
	height:46px;
	margin:0px -10px;
	outline:none;
	padding:7px 20px;
	position:relative;
	text-decoration:none;
	width:90px;
}
.lineTabs li a.active{
	background-repeat: no-repeat;
	color: #600;
	font-weight: bold;
}
.lineTabs li a:hover{
	color: #600;
	font-weight: bold;
}

.active {background-repeat: no-repeat;}
#element {background: url('something.png') no-repeat;}


#tabname_1.active{
	background:url(images/ShoppingGuide.png);

}
#tabname_2.active{
	background:url(images/Aromatherapy.png);

}
#tabname_3.active{
	background:url(images/Spise.png);

}

#tabname_4.active{
	background:url(images/Teas.png);	

		   }

#tabname_5.active{
	background:url(images/Herbs.png);

}
#tabname_6.active{
	background:url(images/Homepage.png);

}


.content{
	background:white;
	border:1px solid #4c9ac3;
	display:block;
	float:left;
	clear:left;
	height:auto;
	margin:0px;
	padding:10px;
	position:relative;
	text-align:justify;
	width:460px;
}
.content div{
	background:white;
	display:none;
	height:auto;
	float:left;
	clear:both;
	left:0px;
	margin:0px;
	padding:0px;
	position:static;
	top:0px;
	width:100%;
}
.content div p{
	margin:5px 0px;
	padding:0px;
}
.selectTabs{
	float:left;
	margin:5px;
}

hedgehog · December 13, 2011

.active не сработает потому что не сможет переопределить заданный через идентификатор стиль. идентификаторы лучше не использовать там, где они не нужны. если сильно хочется, то после описания элементов списка:


.active {background-repeat: no-repeat !important;}

вместо

#element {background: url('something.png') no-repeat;}

подразумевалось добавить свой селектор и адрес изображения поставить свой, а не бездумно копировать

#tabname_1.active {background: url('something.png') no-repeat;}

ar. · December 13, 2011

я собственно крайне редко бездумно что либо делаю )) и моя думность в данном случае заключалась в том, что я думал что something.png подразумевает любую картинку с расширением .png )

"не сможет переопределить заданный через идентификатор стиль." у меня естественный вопрос почему? - только не посылайте меня к талмудам,я и так их стараюсь читать.

Это работает .active {background-repeat: no-repeat !important;} Только вопрос - что делалет значение!important?

А это #tabname_1.active {background: url('something.png') no-repeat;} получается всё равно дубляж, раз делать его нужно для каждого элемента.

Ну собственно вопрос про часть имени id я так и не услышал.

А вообще спасибо вам за помощь! пока всё работает

Edited December 13, 2011 by ar.

hedgehog · December 13, 2011

"не сможет переопределить заданный через идентификатор стиль." у меня естественный вопрос почему? - только не посылайте меня к талмудам,я и так их стараюсь читать.

потому что у стилей, заданных через идентификатор, приоритет самый высокий

Это работает .active {background-repeat: no-repeat !important;} Только вопрос - что делалет значение!important?

http://htmlbook.ru/css/!important

этим лучше не злоупотреблять. как и идентификаторами

А это #tabname_1.active {background: url('something.png') no-repeat;} получается всё равно дубляж, раз делать его нужно для каждого элемента.

если бы стили были заданы через класс (например, .tabname_1), то сработал бы класс .active без всяких !important . почитайте о приоритетах, я тут все не расскажу

Ну собственно вопрос про часть имени id я так и не услышал.

увы, не встречал информации, что такое вообще существует. в вашем случае, кстати, можно background заменить на background-image, чтобы не переопределялся стиль от '.lineTabs li a'.

troll · December 13, 2011

Ну собственно вопрос про часть имени id я так и не услышал.

Можно сделать через селекторы атрибутов (id - тоже атрибут). Но злоупотреблять не стоит, поскольку такие селекторы гораздо медленнее работают.

Sign In

Свойство background-repeat

Question

ar.

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

hedgehog

Link to comment

Share on other sites

ar.

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

ar.

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

troll

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information