thomson1979
10-15-2011, 04:47 PM
Howdy! New here and have a question that's been bogging my mind.
I'm tryin to make the text of the "Home" tab white instead of grey (enlosing pic)
I'm not that good at CSS AND HTML.... Still a newbie as you can tell :D
CSS part:
.navigation ul{
margin: 0;
list-style-type: none;
}
.navigation ul li a{
color:#292525;
text-shadow:1px 1px 0 #FFF;
text-transform:uppercase;
text-decoration: none;
height: 32px;
line-height: 32px;
padding: 0 18px;
border-right:1px dotted #6D7989;
}
.navigation ul li a:hover, .navigation ul li a.active,.navigation ul li:hover a {
color:#FFF;
text-shadow:1px 1px 0 #7D2727;
border-right:1px dotted #CA0002;
background:#CA0002;
text-decoration:none;
}
.navigation ul li.current_page_item a, .navigation ul li.current-cat a {
color:#FFF;
text-shadow:1px 1px 0 #7D2727;
border-right:1px dotted #CA0002;
background:#CA0002;
}
#menu {
float: left;
width:100%;
border-top: 3px solid #181B1C;
background:#F7F5F5;
position:relative;
z-index: 99;
}
#menu li {
display: block;
float: left;
}
#menu a {
display: block;
text-decoration: none;
font-size:14px;
text-transform:uppercase;
}
a:link, a:visited { color: #FFFFFF; text-decoration: none;}
a:active, a:hover { color: #FFFFFF; text-decoration: underline;}
HTML part:
<div id="menu" class="navigation">
<ul id=class="navigation"><li id="menu li" style="background-color:#CA0002;margin-left:-40px;">
<a href="http://www.NONE.com/">Home</a></li>
<li id="class="menu li">
<a href="http://www.NONE.com/">LINK </a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">link</a>
<li id=class="menu li">
<a href="http://www.NONE.com/">link</a>
</li>
</ul></div>
Will love your kick :D
Thanx & Love
Tom
I'm tryin to make the text of the "Home" tab white instead of grey (enlosing pic)
I'm not that good at CSS AND HTML.... Still a newbie as you can tell :D
CSS part:
.navigation ul{
margin: 0;
list-style-type: none;
}
.navigation ul li a{
color:#292525;
text-shadow:1px 1px 0 #FFF;
text-transform:uppercase;
text-decoration: none;
height: 32px;
line-height: 32px;
padding: 0 18px;
border-right:1px dotted #6D7989;
}
.navigation ul li a:hover, .navigation ul li a.active,.navigation ul li:hover a {
color:#FFF;
text-shadow:1px 1px 0 #7D2727;
border-right:1px dotted #CA0002;
background:#CA0002;
text-decoration:none;
}
.navigation ul li.current_page_item a, .navigation ul li.current-cat a {
color:#FFF;
text-shadow:1px 1px 0 #7D2727;
border-right:1px dotted #CA0002;
background:#CA0002;
}
#menu {
float: left;
width:100%;
border-top: 3px solid #181B1C;
background:#F7F5F5;
position:relative;
z-index: 99;
}
#menu li {
display: block;
float: left;
}
#menu a {
display: block;
text-decoration: none;
font-size:14px;
text-transform:uppercase;
}
a:link, a:visited { color: #FFFFFF; text-decoration: none;}
a:active, a:hover { color: #FFFFFF; text-decoration: underline;}
HTML part:
<div id="menu" class="navigation">
<ul id=class="navigation"><li id="menu li" style="background-color:#CA0002;margin-left:-40px;">
<a href="http://www.NONE.com/">Home</a></li>
<li id="class="menu li">
<a href="http://www.NONE.com/">LINK </a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">LINK</a></li>
<li id=class="menu li">
<a href="http://www.NONE.com/">link</a>
<li id=class="menu li">
<a href="http://www.NONE.com/">link</a>
</li>
</ul></div>
Will love your kick :D
Thanx & Love
Tom