As you can see, On hovering a li element,the right background image also disappears along with it with the help of background-image:none property. However only the hovered li disappears but the background image of previous li is still seen.Although a minor , I would like it removed. Can anyone tell me how?. :)
As I am new , Im not allowed to post images. Check the website out at http://ashwin931996.webege.com/
Thanks a lot btw
Use this jquery. Here i paste the full html code. use this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
#header ul {
padding-top:1em;
}
#header ul li a.currentpage {
color:white !important;
background-color: #F96E5B !important;
}
#header ul li a {
text-decoration: none;
color:#676767;
font-family: 'Oswald', sans-serif;
font-size: 1em;
float:right;
line-height: 3em;
padding-right: 1em;
padding-left:1em;
}
#header ul li a.active
{background-color: #F96E99;
color: white;}
</style>
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.jpg">
<ul>
<li>
<a class="one active" href="#">CONTACT</a>
</li>
<li>
<a class="two" href="#">GALLERY</a>
</li class="one">
<li>
<a class="three" href="#">EVENTS</a>
</li>
<li>
<a class="four" href="#">HOME </a>
</li>
</ul>
</div>
<script type="text/javascript">
$("#header ul li a").click( function() {
$("#header ul li a").removeClass("active");
$(this).addClass("active");
})
</script>
</body>
</html>
Demo: http://jsfiddle.net/PbMg2/2/
Related
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 have a navigation bar that has a black background with white text. The text changes to red when hovered over. however when the user is on the select page that specific background will change to red. however the hover over change the text to red. I want it so that when the user is on the home page, and they hover over the home button, the text doesnt change to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TL Custom Printing</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="topbar">
</div>
<div id="navbar">
<div id="navbtn">
<ul>
<li>Home</li>
<li><a href="custom.php" >Custom Printing</a></li>
<li>Products</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="logo">
<img src="testlogo.png" alt="logo">
</div>
</body>
</html>
the CSS:
#navbtn {
width:100%;
Margin:20px;
white-space: nowrap;
text-align:center
}
ul {
width:100%;
list-style:none;
margin:0;
padding:0;
display: inline-block;
padding-top: 2.25em;
}
li {
width: 140px;
display: inline-block;
}
a {
text-align:center;
font-size: 1.25em;
padding:8px 0;
display:block;
width:100%;
text-decoration:none;
color:#FFF;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
a:hover {
color:#F00;
background-color:#000;
}
You can use an active class to fix this easily: JSFiddle
<li>Home</li>
a.active {
background-color:#F00;
}
a.active:hover {
color: #fff;
}
I also added your active tab background color into the .active class removing your inline style
You could add:
<style type="text/css">
a:hover {
color:#FFF !important;
background-color:#000;
}
</style>
In your html pages but your "home" so it will rewritte the main css sheet.
index.html and style.css are on my local machine to practice coding.
Chrome and Safari are rendering the CSS correctly but FireFox 29 is not. Firefox recognize the css file but it's not rendering it. I've tried on a different machine and still have the same issue.
I've already validated my code and there were no errors. Am I missing any tag that is preventing this from rendering in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="test/css" href="style.css">
<title>Welcome!</title>
</head>
<body>
<div id="pagewrap">
<!-- Top Head of My Page -->
<div id="header">
<nav id="nav">
<div id="socialnetwork">
<img src="./Social_Icons/Linkedin.png" alt="LinkedIn">
<img src="./Social_Icons/facebook.png" alt="FB">
<img src="./Social_Icons/Instagram.png" alt="InstaGram">
<img src="./Social_Icons/Twitter.png" alt="Twitter">
<img src="./Social_Icons/Skype.png" alt="Yelp">
<!-- Icons from Dribble by Dawid Dapszus https://dribbble.com/dashoo-->
</div>
<!-- End of Social Network Links-->
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Resume</li>
<li>About Me</li>
<li>Contact </li>
</ul>
</nav>
</div>
</div>
<!--End of Page Wrap -->
</body>
</html>
body {
font-family:'Century Gothic', sans-serif;
}
a {
text-decoration: none;
}
#pagewrap {
width:950px;
margin: 0 auto;
}
#socialnetwork {
padding-top: 100px;
float:right;
}
#socialnetwork img{
height:30px;
}
#nav ul{
text-align: left;
border-bottom: groove;
}
#nav li{
margin:0 15px 0 0;
display: inline;
}
#nav li a:link{
color:#868686;
}
#nav li a:visited{
color:#868686;
}
#nav li a:hover{
color:#324EDC;
}
#nav li a:active{
color:#324EDC;
}
You are typing the wrong word in Link tag attribute value, you are typing "test/css" instead of "text/css"
Your Tag:
<link rel="stylesheet" type="test/css" href="style.css">
Updated Tag:
<link rel="stylesheet" type="text/css" href="style.css">
type="test/css"
Shouldn't it be: text/css?
So here's my current HTML code, within the <head> section:
<ul class="nav">
<li>
<a href="http://www.greg-holmes.com/#/title" target="_blank">
<img src="img/home.png">
</a>
</li>
... <!-- Deleted some elements for readability -->
<li>
<a href="http://www.instagram.com/djspiffy" target="_blank">
<img src="img/instagram.png">
</a>
</li>
</ul>
Here's the CSS that goes along with it:
.nav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
The code is live at greg-holmes, but for some reason the links aren't working.
You need to put your HTML code inside <body> tag not <head> tag
HTML doesn't go in the page header, all HTML belongs in the body.. your code should be
<html>
<head>
...
</head>
<body>
<ul class="nav">
<li>...</li>
</ul>
</body>
</html>
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>