I'm relatively new to CSS and have just been doing tutorials and looking at the source code of CSS websites.
I came across this interesting navigation:
<!-- w --><a class="postlink" href="http://www.jobowoo.com/test">www.jobowoo.com/test</a><!-- w -->
If you look at the left side of each link there is a 4px box which is really just a left border. Here is the code in the stylesheet:
.menu { border-left:4px solid #ACB2B2; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }
What I wanted to do was that when the link was in the hover state it would change the color of the 4px border.
So here's what I changed the code to:
.menu a { border-left:4px solid #ACB2B2; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }
.menu a:hover { border-left:4px solid black; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }
You can see the change here:
<!-- w --><a class="postlink" href="http://www.jobowoo.com/test2">www.jobowoo.com/test2</a><!-- w -->
But for some reason, after I made this change to the stylesheet, I somehow lose the text indent. The 4px border is directly next to the text.
Why is this? Does anyone know how to fix this? Thanks.I think you want to change "text-indent:10px" to "padding-left:10px", perhaps?
Also, for the ".menu a:hover" pseudo-class definition, you only need to enter the changes from the ".menu a" class, namely the color change.Your first code affects the menu directly, while your second code only affects the links. Try this.
.menu {
text-indent:10px;
margin-bottom:2px;
color:#ACABA7;
font-size:12px;
font-weight:bold;
}
.menu a {
border-left:4px solid #ACB2B2;
}
.menu a:hover {
border-color: #000;
}Awesome, it was the padding-left that did it.
Thanks a bunch
I came across this interesting navigation:
<!-- w --><a class="postlink" href="http://www.jobowoo.com/test">www.jobowoo.com/test</a><!-- w -->
If you look at the left side of each link there is a 4px box which is really just a left border. Here is the code in the stylesheet:
.menu { border-left:4px solid #ACB2B2; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }
What I wanted to do was that when the link was in the hover state it would change the color of the 4px border.
So here's what I changed the code to:
.menu a { border-left:4px solid #ACB2B2; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }
.menu a:hover { border-left:4px solid black; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }
You can see the change here:
<!-- w --><a class="postlink" href="http://www.jobowoo.com/test2">www.jobowoo.com/test2</a><!-- w -->
But for some reason, after I made this change to the stylesheet, I somehow lose the text indent. The 4px border is directly next to the text.
Why is this? Does anyone know how to fix this? Thanks.I think you want to change "text-indent:10px" to "padding-left:10px", perhaps?
Also, for the ".menu a:hover" pseudo-class definition, you only need to enter the changes from the ".menu a" class, namely the color change.Your first code affects the menu directly, while your second code only affects the links. Try this.
.menu {
text-indent:10px;
margin-bottom:2px;
color:#ACABA7;
font-size:12px;
font-weight:bold;
}
.menu a {
border-left:4px solid #ACB2B2;
}
.menu a:hover {
border-color: #000;
}Awesome, it was the padding-left that did it.
Thanks a bunch