CODEWITHSUNDEEP
htmlcss
AzDeveloper
AzDeveloper

Reputation: 341

How to stop background overwriting in CSS?

So i have this part of code:

.active {
	background-color: black;
	color: white;
}
span {
	margin: 10px;
}
a {
	text-decoration: none;
}
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tabButton {
	margin: 2px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	background-color: white;
}
#shop, var {
	font-style: normal;
}
button {
	font-size:15px;
	margin :3px;
}
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
	<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword		    
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
	</pre>
</div>
</HTML>

The proplem is, as you can see, my "Treasure room" button(the blank button) does not act like what it suppose to be(black background and white text). What do i think is the class .tabButton background-color over write the black background color of the class .active . Can someone please help me with this? Thanks!

Upvotes: 1

Views: 675

Answers (2)

ab29007
ab29007

Reputation: 7766

There are many ways you can give your give your css for .active priority.

  1. Add another class of the same element with it. that means replace .active with .tabButton.active.
  2. Declare the css for .active below the css for .tabButton.
  3. Use direct child (>) operator to declare it. that means replace .active with #tab a>.active
  4. Add !important after the css rules for .active

Here's the working snippet, only the first line in your css is changed.

.tabButton.active {
	background-color: black;
	color: white;
}
span {
	margin: 10px;
}
a {
	text-decoration: none;
}
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tabButton {
	margin: 2px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	background-color: white;
}


#shop, var {
	font-style: normal;
}
button {
	font-size:15px;
	margin :3px;
}
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
	<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword		    
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
	</pre>
</div>
</HTML>

Upvotes: 3

TheYaXxE
TheYaXxE

Reputation: 4294

A quick fix would be to add .tabButton in front of .active in your CSS:

.tabButton.active {
	background-color: black;
	color: white;
}
span {
	margin: 10px;
}
a {
	text-decoration: none;
}
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tabButton {
	margin: 2px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	background-color: white;
}
#shop, var {
	font-style: normal;
}
button {
	font-size:15px;
	margin :3px;
}
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
	<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword		    
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
	</pre>
</div>
</HTML>

Else you could use an !important rule, to your background-color like this:

.active {
    background-color: black !important;
    color: white;
}

But I would strongly recommend to use the first solution.

Upvotes: 1

Related Questions