I want the top nav bar links to be a certain color that is different than the side nav bar links, but since I am using css they are both the same color. How do I make it so the top ones are there own group of links with one color and the side nav bar links are also their own group of links with a different color?One way is with another level of selector. If each is in a div then give each div an id like "topnav" and "sidenav". Now you can style
#topnav a:link {...}
#sidenav a:link {...}If the links are within different containing elements, then your CSS can be written to limit a given effect to those elements within that containing element. For instance, if a link is within an element to which you've given the ID of "nav", e.g.:
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo">Link text</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bar">Link text</a></li>
</ul>
You can define how just those links look with:
#nav a {
text-decoration: none;
color: #933;
}
#nav a:hover, #nav a:active {
color: #fff;
}
Note that the above CSS would need to appear after any CSS specified for non-specifc A tags, i.e. "a" selectors that are not children of higher-level selecters, like the "nav a" used above.wow ok I understand what you guys are meaning but do not understand how to do it.
the first two lines of my css (the part I need to change):
<style TYPE="text/css">
A:link {color: #BC8F7A; text-decoration: none;}
ok now the way I understood it all I have to do is make it like:
<style TYPE="text/css">
A:link {color: #BC8F7A; text-decoration: none;}
a:visited {
color: #BC8F7A;
text-decoration: none;}
A:hover {color: #000000; text-decoration:underline;}
H1 {
color: #999999;
font-size: 16px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 20px;
}
H2 {
color: #666666;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-indent: 20pt;
}
#nav A:link, #nav A:visited {
color: #000;
text-decoration: none;}
then all I do is put <ul id="nav"> tag around the links i want to be that color??
is that correct? or am I lost?The UL tag and the id="nav" are hypothetical. It could be a DIV tag or a P tag, or whatever else makes semantic sense for your page, as long as the links are contained within it. The important thing is that the #xxx in the CSS corresponds to the id="xxx" you use to identify the containing element.thanks nog, it worked perfectlymmm guys I think I have a similar prob concernint the style of the link and the id...but i don't know how to solve it.
I have a <ul> in my page and this CSS file.
#divSx ul a:link, #divSx ul a:visited {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #0099FF;
}
.menulaterale {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#ffffff;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-image:url(../img/jpg/pallino_blu_22x22.jpg);
background-repeat:no-repeat;
background-position: right;
}
#divSx ul a:hover {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #ffffff;}
Let's say I set the class of a link to be .menulaterale
The problem is that I can not see the link styled with this class. I just see a mix of #divSx ul a:link, #divSx ul a:visited and .menulaterale.
what's wrong? thanks in advance
#topnav a:link {...}
#sidenav a:link {...}If the links are within different containing elements, then your CSS can be written to limit a given effect to those elements within that containing element. For instance, if a link is within an element to which you've given the ID of "nav", e.g.:
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo">Link text</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bar">Link text</a></li>
</ul>
You can define how just those links look with:
#nav a {
text-decoration: none;
color: #933;
}
#nav a:hover, #nav a:active {
color: #fff;
}
Note that the above CSS would need to appear after any CSS specified for non-specifc A tags, i.e. "a" selectors that are not children of higher-level selecters, like the "nav a" used above.wow ok I understand what you guys are meaning but do not understand how to do it.
the first two lines of my css (the part I need to change):
<style TYPE="text/css">
A:link {color: #BC8F7A; text-decoration: none;}
ok now the way I understood it all I have to do is make it like:
<style TYPE="text/css">
A:link {color: #BC8F7A; text-decoration: none;}
a:visited {
color: #BC8F7A;
text-decoration: none;}
A:hover {color: #000000; text-decoration:underline;}
H1 {
color: #999999;
font-size: 16px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 20px;
}
H2 {
color: #666666;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-indent: 20pt;
}
#nav A:link, #nav A:visited {
color: #000;
text-decoration: none;}
then all I do is put <ul id="nav"> tag around the links i want to be that color??
is that correct? or am I lost?The UL tag and the id="nav" are hypothetical. It could be a DIV tag or a P tag, or whatever else makes semantic sense for your page, as long as the links are contained within it. The important thing is that the #xxx in the CSS corresponds to the id="xxx" you use to identify the containing element.thanks nog, it worked perfectlymmm guys I think I have a similar prob concernint the style of the link and the id...but i don't know how to solve it.
I have a <ul> in my page and this CSS file.
#divSx ul a:link, #divSx ul a:visited {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #0099FF;
}
.menulaterale {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#ffffff;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-image:url(../img/jpg/pallino_blu_22x22.jpg);
background-repeat:no-repeat;
background-position: right;
}
#divSx ul a:hover {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #ffffff;}
Let's say I set the class of a link to be .menulaterale
The problem is that I can not see the link styled with this class. I just see a mix of #divSx ul a:link, #divSx ul a:visited and .menulaterale.
what's wrong? thanks in advance