Reputation: 33
I believe it's simple, but since I'm new to this I don't have a clue of how to do it. I just want to change the background color of a li tag - just for fashioning, nothing else.
This is my HTML:
<ul id="abas">
<li><a href="#tab1">PROGRAM</a></li>
<li><a href="#tab2">PROC</a></li>
<li><a href="#tab3">DDNAME</a></li>
</ul>
Sorry for being a noob but, this is the css part right?
#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
I noticed that here>>> "background-color:3B31FF;" is where I change the color of the background, but doing this, changes all the background colors of course ... I only need 1 "li" tab to change and any html tutorial would be nice too.
Upvotes: 2
Views: 5975
Reputation: 127
An alternative to using hex code is using RGB / RGBA:
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);
This gives you even more control over your color by adding alpha and transparency support, but unfortunately, it's not supported by some browsers (IE, namely, although I don't know about IE 10).
Upvotes: 0
Reputation: 377
You can also make your life a whole lot easier with the border-radius element. for what you are doing it would be:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
This will give you the same result. Also for example sake, you will need to add a height and a width to get some sort of result. so if that were the case you would need to do this:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
height: 100px;
width: 100px;
}
This will give you the result that I think you were looking for. If you are looking to use pixels instead of percents for a fluid layout, the you will need to use this. (Note this is only for the width, height and positioning).
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
height: 10%;
width: 10%; /*Replace these percentiles with your width and height*/
}
I will assume that you know how to make the
Upvotes: 0
Reputation: 38432
First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part do this
CSS
#abas li {
background-color: #xxxxxx ;
//your other style goes here
}
#abas li.current {
background-color: #xxxxxx ;
//your other style goes here
}
HTML
<ul id="abas">
<li class="current"><a href="#tab1">PROGRAM</a></li>
<li><a href="#tab2">PROC</a></li>
<li><a href="#tab3">DDNAME</a></li>
</ul>
Upvotes: 1
Reputation: 4173
If you want to for example add green to a <li>
tag you can do the following:
<li style="background: green;"><a href="#tab1">PROGRAM</a></li>
But this isn't really best practice because normally you want to keep your HTML and CSS separated. So in CSS you would do it like this:
li { background: green; }
or use hex color codes:
li { background: #00ff00; }
If you only want to change one specific <li>
tag you can add a class to it:
<li class="precious">
and then apply a css rule to this class:
.precious { background: #00ff00; }
and only this <li>
tag with the .precious class is going to get styled.
Live Example: http://jsfiddle.net/pulleasy/WEdmt/
Upvotes: 0
Reputation: 4723
Css code:
#abas li {
background-color: ... ;
}
fill in color code where dots are, like this:
background-color:#000000; //color black
Single tag:
Css code:
li.selected {
background-color: ... ;
}
Html code:
<ul>
<li></li>
<li class="selected"></li>
<li></li>
</ul>
Upvotes: 2
Reputation: 1671
To change the background color simply style it:
<li style="background-color:blue;">Program</li>
You will likely also want to set some height and width parameters.
Upvotes: 1
Reputation: 1180
This will make the first item have a red background:
<li style="background: red"><a href="#tab1">PROGRAM</a></li>
Upvotes: 0