is it possible to make the clicked link text bold, through the use of only HTML/css?
<body>
<div id="menu-bg">
<div id="menu-text">
<ul id="list">
<li>THE EXPERIENCE<br>
SERVICES<br>
ADVENTURE<br>
TOUR<br>
GALLERY<br>
REVIEWS<br>
LOCATION
</li>
</ul>
</div>
</div>
</body>
try
a:visited {
font-weight:bold;
}
Definitely Yes.
For html/css, you can use:
<style>
li a:active{
font-weight:bold;
}
</style>
You can also use javascript/jquery on that:
$('li a').click(function(e){
$(this).css('font-weight','bold');
})
You may try -
<style>
ul li a:visited {
font-weight:bold;
}
</style>
write me if problem persists.
Related
I have a nav menu that contain several list items. However, I have not been successful at removing the list item styling using CSS.
Here is my code so far:
.links {
overflow:auto;
}
.lnk {
list-style:none;
padding:0;
margin:0;
background:#111111;
}
.lnk li {
float:left;
}
<div class="links">
<ul class="lnk">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
Unfortunately, none of what I'm trying is working for me. I don't know what else to do. None of my CSS code is even working. They are external files and I have linked them to my page, but they are still not working. Please, I need help.
This will helpful for you
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
css part:
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
um I think it might work like this?
.links {
overflow:auto;
}
.lnk {
list-style:none;
padding:0;
margin:0;
background-color:#111;
}
li .lnk{
float:left;
}
I don't know your HTML code so I don't know the problem. Can you post that too? And please explain what your problem is clearer. Oh and I also organized it. I think the problem is that you put .lnk lk instead of li .lnk. There is a difference.
I have 3 links styled as a list in html, I used this code in CSS to bring them beside each other:
li
{
float:left;
margin-right:15px;
margin-top:40px;
}
But when I click one of them the other link on the right moves towards the one I clicked.
I don't know the reason why this happening. but how to make them fixed?
The code::
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp">Symptoms</li>
<li class="links1" id="doc">Doctors</li>
<li class="links1" id="health">Health Care Reform</li>
</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
html
{
background-image:linear-gradient(to top, white, #F5F9FA);
height:100%;
}
.logo
{
padding-left:176px;
padding-top:4px;
float:left;
}
li
{
float:left;
margin-right:15px;
margin-top:40px;
font-family:Candara;
font-size:12px;
color:#5895D4;
}
#symp
{
list-style-image:url(walking.png);
margin-left:55px;
}
#doc
{
list-style-image:url(doc.png);
}
#health
{
list-style-image:url(umb.png);
}
li a
{
color:#5895D4;
text-decoration:none;
}
li a:hover
{
text-decoration:underline;
}
li a:active
{
}
li a:visited
{
}
Currently, the CSS selects li, not li a.
If your HTML structure looks like this:
<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>
Try using the following CSS to target the links inside each li.
li a {
float: left;
margin-right: 15px;
margin-top: 40px;
}
The reason why your bug might be happening is because a::visitedis a separate element from li. See MDN's page on :visited.
I'm trying to get a drop down menu to work with this button so far it's all going well, but when I click on the menu and try to click one of the link's it closes the drop down menu instead of opening the link. Any ideas? (I know there's a way to format this post to have you be able to test the code in this browser, but I'm not sure how to do that)
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>index</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<nav class="nav-main">
<ul>
<li>
<img src="images/resume btn.jpg"/>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Acting</li>
<li>Choreographer/Dancer</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</body>
</html>
Here is the CSS
.nav-main .logo{
height:40px;
font-size:1.4em;
line-height:40px;
}
.nav-main > ul{
list-style-type:none;
}
.nav-main > ul > li{
float:left;
}
.nav-content{
overflow:hidden;
background-color:tan;
max-height:0;
}
.nav-content a{
color:black;
text-decoration:none;
}
.nav-content a:hover{
text-decoration:underline;
}
.nav-sub ul{
padding:0;
margin:0;
list-style-type:none;
}
.nav-sub ul li a{
display:inline-block;
padding:5px;
}
.nav-item:focus ~ .nav-content{
max-height:400px;
-webkit-transition:max-height 0.4s ease-in;
-moz-transition:max-height 0.4s ease-in;
transition:max-height 0.4s ease-in;
}
First of all you are using too much elements for task simple as that. Please use this markup:
<nav class="nav-main">
<ul>
<li>Menu item 1
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
</ul>
</li>
</ul>
</nav>
In this markup use this css:
nav ul li ul{display: none; // or whatever code you want for hiding sub menu items}
nav ul li:hover ul{display: block; // or whatever code you want for showing sub menu items}
Also, someone already mentioned that you should use 'http://' in links even though its not mandatory.
One more mistake you have made is inside img tag:
<img src="images/resume btn.jpg"/>
Space between resume & btn is not really cool.
Hope this helps you.
I had the same problem! I think you and I followed the same video and I checked the comment and someone posted this piece of code and it works! just add it after the other .nav-content markup! this was driving me crazy for 2 days straight.
.nav-content:active {
max-height: 400px;
}
you don't need the ">" in the css, example: .nav-menu ul li - also make sure your links have http:// before www
I've isolated the issue to the problem being with the max-height:0;. If you comment that out and click on the sub menu options, it should redirect.
With that said I don't know what to change to make the max-height work. It's needed since it will hide the submenu. You may need to use jquery.
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/
Not a web developer so i hope you will spare me if this question does not make sense.I tried many ways but due to lack of knowledge of CSS its not working for me.
i have a page with following structure
<div id="content">
<div class="archive">
<div class="left-archive">
<h3><a>Main Left tile</a></h3>
<ul>
<li><a link>Link title</a></li>
</ul>
</div>
<div class="right-archive">
<h3><a>Main Right tile</a></h3>
<ul>
<li><a link> Link title</a></li>
</ul>
</div>
</div>
</div>
Now my intention was that when the page first display all link should be underlined and when i hover over them text-decoration should be none.
i write this css code
.archive ul li a:hover{
text-decoration:none;
outline:medium none;
}
.archive ul li a:visited {
color:#4280B4;
text-decoration:underline;
}
.archive h3 a:visited{
color:#CE4F00;
text-decoration:underline;
}
.archive h3 a:hover{
color:#3C78A7;
text-decoration:none;
}
but this is not working and its picking the following CSS entry from same CSS file
a:link, a:visited {
color: #3c78a7;
text-decoration:none
}
a:hover, a:active {
color: #3c78a7;
text-decoration:underline;
}
Honestly what i did was simple hit and trial nothing being logical.Can any one guide me to right path how i can achieve correct behavioral.
Thanks in advance
Maybe because you have not written the css attributes for a general anchor tag link. Something like
.archive ul li a
{
text-decoration:underline;
}
.archive ul li a:hover
{
text-decoration:none;
}
Then when you hover, you will get the intended effect.
You have to specify the styles in a particular order when you define them:
link
visited
active
hover
Edit: response to your comment. The physical order that you write the CSS matters for anchors (a tags). In the CSS that is being used (your third code snippet), the CSS code for the visited links appears before the code for the active links.
In your own code in the second snippet, you have the CSS for ul li with hover before visited. You should simply reverse the order of those two CSS rules.
I'm not sure why your CSS for h3 doesn't work, except perhaps it wants a CSS rule for link.
This might be what you want.
<html>
<head>
<style rel="stylesheet" type="text/css">
.archive ul li a:hover{
text-decoration:none;
outline:medium none;
}
.archive ul li a:visited {
color:#4280B4;
text-decoration:underline;
}
.archive h3 a:visited{
color:#CE4F00;
text-decoration:underline;
}
.archive h3 a:hover{
color:#3C78A7;
text-decoration:none;
}
</style>
</head>
<body>
<div id="content">
<div class="archive">
<div class="left-archive">
<h3><a>Main Left tile</a></h3>
<ul>
<li><a class="link" href="#">Link title</a></li>
</ul>
</div>
<div class="right-archive">
<h3><a>Main Right tile</a></h3>
<ul>
<li><a class="link" href="#"> Link title</a></li>
</ul>
</div>
</div>
</div>
</body>
Your value for the hrefs may vary.
The only things changed are the anchor tag parts.
add this at the end of your css
li a
{
text-decoration:underline;
}
in some browsers the <a> (anchor) tag will not render as a hoverable link unless you specifiy an actual href='#'
This is the case in Chrome anyway. If I specify hrefs for the 4 <a>'s in your example html it works.
<div id="content">
<div class="archive">
<div class="left-archive">
<h3>Main Left tile</h3>
<ul>
<li>Link title</li>
</ul>
</div>
<div class="right-archive">
<h3>Main Right tile</h3>
<ul>
<li> Link title</li>
</ul>
</div>
</div>
</div>
You have anchors and no links. You also added underlines to all link, which is the opposite of what you said you wanted. I added an 'a' so that your style would apply to them as well. Also, there is no 'link' attribute for the anchor tag.
Here is a live example as well: http://jsfiddle.net/khalifah/jymK3/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a, a:link, a:visited {
color: #3c78a7;
text-decoration: underline
}
a:hover, a:active {
color: #3c78a7;
text-decoration: underline
}
.archive ul li a:hover{
text-decoration: none;
outline: medium none
}
.archive ul li a:visited {
color: #4280B4;
text-decoration: underline
}
.archive h3 a:visited{
color: #CE4F00;
text-decoration: underline
}
.archive h3 a:hover{
color: #3C78A7;
text-decoration: none
}
</style>
</head>
<body>
<div id="content">
<div class="archive">
<div class="left-archive">
<h3><a>Main Left tile</a></h3>
<ul>
<li><a>Link title</a></li>
</ul>
</div>
<div class="right-archive">
<h3><a>Main Right tile</a></h3>
<ul>
<li><a> Link title</a></li>
</ul>
</div>
</div>
</div>
</body>
<html>