I have linked between different pages. Now I want that if a visitor visits any page by clicking on the link, that link will changed into different colors.
In my case it's not working, I don't know why.
My code:
HTML:
<div id="pageLink">
<ul>
<li><div id="indexDiv">Welcome</div></li>
<li><div id="aboutMeDiv">Bio</div></li>
</ul>
</div>
CSS:
#index,#aboutMe{
text-decoration:none;
}
#index:visited,#aboutMe:visited{
color:red;
}
#indexDiv,#aboutMeDiv {
display:block;
text-decoration:none;
padding:5px;
color:green;
font-family:Tahoma;
font-size:20px;
}
#indexDiv:hover,#aboutMeDiv:hover{
color:gray;
}
#pageLink li{
display:inline-block;
list-style:none;
}
Here is the Live
you are having a div inside a anchor tag with style color:green;
change the css snippet as
#index:visited > div,
#aboutMe:visited > div {
color:red;
}
you will get red color when the anchor tag has :visited pseudo class.
Related
I'm building a page with a header at the top, a menu on the left and a footer at the borrom. I've defined all of these using .
The link is in the menu. As long as I'm not applying the css, the links work, but as soon as I apply the css that is in an external file it stops working.
I can see it change when I hover and disappear when I click on it, but the page doesn't change.
It only works if I open the link in a new window or in a new tab. Why is it doing this? How can I fix it?
Here's the HTML code :
<body>
<div id="container">
<div id="header">
<h1>Site HTML</h1>
</div>
<div id="menu" >
<h1>Navigation</h1>
<ul>
<li> Javascript </li>
</ul>
</div>
<div id="content">
<p>
</p>
</div>
</body>
and here is the CSS for the menu and the link to clic on.
#menu {
min-width:20%;
max-width:20%;
min-height:80%;
max-height:80%;
background-color:#
margin:0;
padding:0;
position:fixed;
top:10%;
overflow:auto;
}
#menu li {
list-style-type:none;
font:large, arial,sans-serif;
}
#menu a:link,a:visited{
display:block;
font-weight:bold;
color:#FF6600;
background-color:black;
width:75%;
text-align:center;
padding:4px;
text-decoration:none;
}
#menu a:hover {color:#0000FF;}
#menu a:active {visibility:hidden;}
Remove #menu a:active {visibility:hidden;}
Don't think it makes any difference.
Because you are setting the property visibility hidden on active pseudo class. Just remove the line:
#menu a:active {
visibility:hidden;
}
http://jsfiddle.net/gomflo/KEq8U/
I have a row of buttons in a Tritter Bootstrap NavBar and I want to apply some special styling to some but not all. I have a class from BootSnip but try as I might with selectors, I can't get it to apply to just the li's that I want. It works fine if I apply it to the UL, but obviously that applies to all of them.
You can see I've got the class ds-btn on the third li down
I've tried changing the top line of CSS to
ul.ds-btn
ul.ds-btn li
ds-btn li
but to no avail. I'm probably missing something dead simple.
Any help would be warmly welcomed.
Thanks.
HTML
<ul class="navbar-right">
<li class="people-button"></i><br />People</li>
<li class="books-button"></i><br />Books</li>
<li class="review-button ds-btn">
<a class="btn btn-lg" href="http://dotstrap.com/">
<i class="fa fa-bullseye fa-2x"></i><span>User<br>Profile</span>
</a>
</li>
</ul>
CSS
.ds-btn li { list-style:none; float:left; padding:10px; }
.ds-btn li a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
.ds-btn li a span small{width:100%; display:inline-block; text-align:left;
Your selectors are in the wrong order, you need to use:
li.ds-btn ...
This is because you have the class ds-btn on your li, your current selector .ds-btn li is basically saying look for all li within any element with the class ds-btn, none of which exist in your code. li.ds-btn is basically saying look for any li with the class ds-btn
li.ds-btn { list-style:none; float:left; padding:10px; }
li.ds-btn a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
li.ds-btn a span small{width:100%; display:inline-block; text-align:left;
I think you should write css something like this
li.ds-btn {
list-style:none;
float:left;
padding:10px;
}
li.ds-btn a span{
padding-left:15px;
padding-right:5px;
width:100%;
display:inline-block;
text-align:left;
}
li.ds-btn a span small{
width:100%;
display:inline-block;
text-align:left;
}
Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.
Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}
I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/
BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}
This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>
I have a <ul> <li> list where in HELP, MISC and POLICIES are the headings with no <a> tag.
other <li> elements have hover effect as font-size:16px (normal size is 14px).
how can i remove hover of headings??
FIDDLE
you can use
.footer_ul li.bold1:hover {
font-size:14px;
text-decoration:none;
}
to remove the hover of headings
updated jsFiddle File
or alternate you can use .footer_ul li a:hover instate of .footer_ul li:hover
.footer_ul li a:hover {
text-decoration:underline;
font-size:16px;
}
jsFiddle
I checked you fiddle it was good.
The only change you need to make is you have to add :hover class for a tag and not li tag
`
.footer_ul li a:hover {
text-decoration:underline;
font-size:16px;
}
`
Use :not() selector. A single change is required like so.
.footer_ul li:hover:not(.bold1) {
text-decoration:underline;
font-size:16px;
}
Working demo
Add this css after ".footer_ul li:hover"
.footer_ul li:hover:first-child {
text-decoration:none;
font-size:14px;
}
I'm having a problem getting a pseudo class working with my code. The code in question is a horizontal ordered list that's being placed at the top of a slider. The list is stretched out to fill the full horizontal width of the slider. I put a left-border on each of the list elements by assigning a border to the links contained within the list elements (so that the border didn't make the list too wide).
But I wanted to remove the first link's left-border so that borders were only shown between each list element, and not on the first or last list element.
The problem arises though when I add a first-child pseudo class to the link. The pseudo class seems to assign the class to all of the links.
Here's what I have:
CSS
ol.bjqs-markers{
display:inline-block;
list-style:none;
margin:0;
padding:0;
z-index:9999;
width:100%;
position:absolute;
top:0px;
}
ol.bjqs-markers li{
display:inline;
float:left;
height:30px;
width:20%;
background:rgba(0,0,0,0.7);
float:left;
margin:0 0px;
}
ol.bjqs-markers li a{
display:block;
font-size:22px;
color:#FFF;
text-align:center;
text-decoration:none;
height:100%;
display:block;
overflow:hidden;
border-left:1px solid #F00;
}
ol.bjqs-markers li a:first-child{
border-left:none;
}
And HTML:
<ol class="bjqs-markers">
<li class="active-marker">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
</ol>
Can someone point me in the direction of why that a:first-child applies a border of "none" to all the tags?
Thanks guys!
:first-child works just like expected, but every A in your example is a first-child. It is the first child of its parent LI.
What you're looking for is this:
ol.bjqs-markers li:first-child a {}
It is because you apply this pseudo class to first link in li element. Use
ol.bjqs-markers a:first-child {
border-left:none;
}
Or
ol.bjqs-markers li:first-child a {
border-left:none;
}
maybe you want to do
ol.bjqs-markers li:first-child a{
It it because you are applying the border to the first <a> tag in each <li> tag. Try this instead:
ol.bjqs-markers li:first-child a { }