Div styles


#1


as i added my <a>tag, the div styles stopped working on the link.
why ? like color,text decoration.
https://www.codecademy.com/courses/web-beginner-en-WF0CF/0/3?curriculum_id=50579fb998b470000202dc8b


#2

Please paste in your code and the error you have.


#3

 <a href="https://www.facebook.com/?stype=lo&jlou=AffujpNo60dHU9ORR3CljghC4paf__O_3UYs7ssW2di7o187APiq8svilx_nX8wa71h8svKTk8t-8z6sJ0hkYzH0KYG6hg90rfwZcKLUHfov6Q&smuh=36325&lh=Ac86k7m0jYVajtJ4">Sign Up</a>

css:

div {
    background-color:#29b03f;
    height:40px;
    width:160px;
    margin:auto;
    text-align:center;
    font-size:30px;
    color:#ffffff;
    border-radius:20px;
}

#4

Can you post your full html and css code? Use markup:

We need your full code to understand the problem


#5

i don't have that code now.
but i have a similar problem with the same topic.


<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<li><a href="www.lifehack.org">Tips on getting things done</a></li>
<li><a href="www.google.co.in">Google!</a></li>
<li><a href="https://www.codecademy.com/learn">Codecademy</a></li>
</div>
</body>
</html>

css
a:link {
text-decoration:none;
color:#008b45;
font-size:30px;
font-family:sans-serif;
}
a:hover {
color:#00ff00;
}
a:visited {
color:#ee9a00;
font-size:20px;
}
why is it, that, the link is changing size and colour only when i change it in "a:link".. i have visited them all now..but i am unable to change the size and font family if i apply it to "a:visited"or a:hover".


#6

the changes of visited and hover work fine? If you want hover to work on visited, you should hover after visited:

a:visited {
    color:#ee9a00;
    font-size:20px;
}
a:hover {
    color:#00ff00;
}

all the property's you add in a:visited work fine?


#7

the thing is... if i apply font-family and font-size to "a:link" it works fine with all 3.
but if i apply it to "a:visited" and delete it from "a:link",then, everything goes back to its default size and font.


#8

then you haven't visited the links? can you upload screenshots or something of one with a:link and one without?


#9


you see, now in this picture, first 2 links are visited ones and the last one is not. But the font-size working on all 3 of them is the one set to the unvisited links. and the one set for visited links is not working on the first 2(which are visited ones)
Hope i made my point clear.


#10

Most browsers set limitations to a:visited for security reasons. And font-size is one of those limitations. You can't change the font-size for visited links.

Source


As for hover, add in a line-height style that is equal to your desired font-size for hover. In your case, add line-height: 40px; before your font-size. This ensures that you will give room to the increased size of your hovered text. ALSO, move a:hover after the other selectors to get its full effects (more so the colour override)!
You can remove/change the value of the font-size in your a:link selector to make it not equal to the one in a:hover to see this effect better.

a:hover {
    color: #00FF00;
    line-height: 40px;
    font-size: 40px;
}

Optional: You can make your links line up as lists if you put display: block; under your a:link selector :wink:


#11

isn't it already in "list" form ?


#12

List as in
Like
This.

Without those points. It's simply an aesthetic choice.


#13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.