background-position via class

Philidor · #1 (**permalink**) 03.08.2014, 14:43

liebe leute,

ich steh auf der leitung. was hab ich hier nicht berücksichtigt?

#a {
width:160px;
height:34px;
background:#fff url('x.png'); }
.bg {
background-position:bottom; }

<div id="a" class="bg"></div>

das hintergrundbild will sich nicht verschieben.

herzlichen dank

threadi · #2 (**permalink**) 03.08.2014, 15:37

Die ID hat eine höhere Wertigkeit, und setzt vermutlich einen Vorgabewert für background-position. Du müsstest der Klasse eine höhere Wertigkeit geben, entweder durch ein umgebendes Element oder mit !important (nicht zu empfehlen, aber zum Testen geeignet).

Philidor · #3 (**permalink**) 03.08.2014, 17:41

jedenfalls zeigt das hier keinen effekt:

#home {
width:160px;
height:34px;
background:#fff url('home.png'); }

.active div {
background-position:bottom; }

<div class="active"><div id="home"></div></div>

x.png ist ein menüpunkt. background-position "top" zeigt innerhalb des divs den schriftzug in grauer farbe, background-position "bottom" in rot.
class="bg" wird hinzugefügt, sofern man sich auf der dem menüpunkt entsprechenden unterseite befindet. könnte man das anders charmant lösen? oder soll ich das wie folgt machen?

#home {
width:160px;
height:34px;
background:#fff url('home.png'); }

#home_active {
width:160px;
height:34px;
background:#fff url('home.png');
background-position:bottom; }

<div id="home_active"></div>

Philidor · #4 (**permalink**) 04.08.2014, 23:38

HTML-Code:

<!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" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<meta name="generator" content="BBEdit 10.5" />
	
	<style type="text/css">
		body {
			width:100%;
			height:100%;
			margin:0;
			padding:0; }
		ul#navigation li {
			display:inline;
			list-style:none; }
		ul#navigation li a {
			display:block;
			float:left;
			height:17px;
			margin:0 10px; }
		a#kalender {
			width:66px;
			background:url('html/grafics/navigation/kalender.png');
			background-size:100%; }
		a#kontakt {
			width:57px;
			background:url('html/grafics/navigation/kontakt.png');
			background-size:100%; }
		a#kalender_active {
			width:66px;
			background:url('html/grafics/navigation/kalender.png');
			background-size:100%;
			background-position:bottom; }
		a#kontakt_active {
			width:57px;
			background:url('html/grafics/navigation/kontakt.png');
			background-size:100%;
			background-position:bottom; }
		ul#navigation li a span {
			display:none; }
	</style>
</head>
<body>
<ul id="navigation">
	<li><a href="/kalender/" id="kalender"><span>Kalender</span></a></li>
	<li><a href="/kontakt/" id="kontakt_active"><span>Kontakt</span></a></li>
</ul>
</body>
</html>

so sieht das momentan aus. kann ich #kalender_active und kontakt_active als eigene ids einsparen?

Philidor · #5 (**permalink**) 05.08.2014, 00:52

ich habe die lösung gefunden:

ul#navigation a.active { background-position:bottom; }

K.Roland · #6 (**permalink**) 05.08.2014, 13:05

Zitat:

Zitat von Philidor

..kann ich #kalender_active und kontakt_active als eigene ids einsparen?

Ja.
Versuch das mal so umzusetzen.

HTML-Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
   <title>Test </title>

<style type="text/css">
body, ul {
     margin: 0; padding: 0;
}
ul#navigation {
     background: fuchsia; 
}
ul#navigation:after {
     display: block;
     clear: both;
     content: " ";   
}
ul#navigation li {
     float: left;
     list-style: none; 
}
ul#navigation li a, 
ul#navigation li span {
     display: block;
     margin: 0 10px;  
     line-height: 2em;
}
ul#navigation li a {
     background: #bbbbbb url( ) bottom;
     background-size: 100%; 
}
ul#navigation li span {
     background: #ffffff url( ) top;
     background-size: 100%; 
}
</style>

</head>
<body>

<ul id="navigation">
	<li><a href="#">Kalender</a></li>
	<li><span>Kontakt</span></li>
</ul>

</body>
</html>

______________
MfG Roland

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Navigation positionieren	maybebabe	CSS	4	08.04.2013 22:17
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Inline Listenelement wird nicht richtig im background befüllt	SteveB	CSS	3	28.04.2011 20:41
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22