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>
Related
Trying to change colors when hovering over navigation links, never had a problem before but it will not work.
I have my navigation in several div's, I tried to set my a link style to all divs, nothing changes at all. I originally made my code in a CSS class. Trying to make a responsive website at home, didn't have links in the navigation bar originally, just text.
a.navBar:link {color: white; text-decoration: none; }
a.navBar:visited {color: white; text-decoration: none; }
a.navBar:hover {color: #16262E; text-decoration: underline; }
a.navBar:active {color: white; text-decoration: underline; }
<div id="outerWrapper"> </div>
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
I just want white text as navigation links that turn #16262E when the mouse is hovering over the link. Not receiving any errors, it just doesn't change from the default blue, underlined links.
a.navBar means that you are selecting a link tag wich have class 'navBar'. This selector does not exist.
No link tag have a class navBar.
To solve this you can apply color changing when you hover the list tag.
Use this selector :
#navBar ul li:hover a {color : #000fff}
This means that when you hover li (which is located inside #navBar) change the link color
Step 1
Remove a from starting of a.navBar.
Step 2
Change .navBar to #navBar you are declaring id attribute in element <div id="navBar">.
Step 3
Add space and a between #navbar and Pseudo-elements.
Below code snippet have all above mentioned fixes. Try this I hope it'll help you out. Thanks
body {
background-color:grey;
}
#navBar a:link {color: white; text-decoration: none; }
#navBar a:visited {color: white; text-decoration: none; }
#navBar a:hover {color: #16262E; text-decoration: underline; }
#navBar a:active {color: white; text-decoration: underline; }
<div id="outerWrapper">
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<body>
<ul>
<li><a class="navBar" href="#">About</a></li>
<li><a class="navBar" href="#">Our Work</a></li>
<li><a class="navBar" href="#">Contact Us</a></li>
</ul>
</body>
I have removed other div which are not nested properly.
Now put CSS inside "style" tag.
I will suggest to change either text-color or background-color, as text isn't visible on white background.
I have piece of following code and a tags from header inherit a tag's styles from main.
I know that I can prevent it adding classes to each a tag, but is there any other way to solve it?
header li{
display: inline-block;
}
header a:link, a:visited, a:active{
text-decoration: none;
color: #fff;
}
header a:hover{
color: #333;
}
main a:link, a:visited, a:active{
color: #0ba39c;
}
main a:hover{
color: #252525;
}
<header>
<ul>
<li>
First element
</li>
<li>
Second element
</li>
</ul>
</header>
<main>
<ul>
<li>
First element
</li>
<li>
Second element
</li>
</ul>
</main>
I also tried pointing it like: header > ul > li > a:link... but it doesn't work as well.
I saw on sites a lot of different styled anchors without additional classes, so I bet I am missing something.
The CSS comma combinator is used to list multiple individual selectors.
So instead of
header a:link, a:visited, a:active {
...
}
(which results in 3 selectors header a:link, a:visited and a:active)
the full selector for each link state has to be declared like so:
header a:link,
header a:visited,
header a:active {
...
}
(which results in 3 selectors header a:link, header a:visited and header a:active)
The same goes for main. I updated your example with distinguishable colors:
header li{
display: inline-block;
}
header a:link,
header a:visited,
header a:active {
text-decoration: none;
color: red;
}
header a:hover{
color: yellow;
}
main a:link,
main a:visited,
main a:active {
color: green;
}
main a:hover{
color: blue;
}
<header>
<ul>
<li>
First element
</li>
<li>
Second element
</li>
</ul>
</header>
<main>
<ul>
<li>
First element
</li>
<li>
Second element
</li>
</ul>
</main>
You and use their attribute to call a specific anchor tag in this manner
a[href="abc"]{
/*your css property*/
}
I have a floating pop-out menu (position:fixed) that is giving me a weird little problem if you click it after you have scrolled down the page. If your mouse happens to be where the sub-menu overlaps with the main menu when it opens, everything is fine. However if your mouse is not in the overlap, the page jumps right to the top (which I think some people might find a little confusing).
Is there any way to fix this, preferably just using just HTML and CSS?
HTML:
<div id="menu">
<ul class="levelone" >
<li class="active"> Home</li>
<li class="fly"> 1</li>
<li class="fly"> 2 »
<ul class="dropdown d1">
<li class="fly">2a</li>
<li class="fly">2b</li>
<li class="fly">2c</li>
</ul>
</li>
<li class="fly"> 3 »
<ul class="dropdown d1">
<li>3a</li>
<li>3b</li>
</ul>
</li>
<li class="fly"> 4</li>
</ul>
</div>
CSS:
#menu {display:initial; position:fixed; z-index:500; width: 150px;vertical-align: top;line-height: 200%;}
#menu ul {padding:0; margin:0; list-style:none; padding: 0;list-style: none;margin: 0px;}
#menu ul ul {z-index:501; position:absolute; left:-9999px; width:150px;}
#menu ul li {margin-right:5px; float:left;position:relative;line-height: 200%;position: relative;}
#menu ul li a {display:block; float:left; text-decoration:none;width: 150px;;display: block;line-height: 200%; text-align:center; border: 1px solid grey;background: white; }
#menu ul ul li {margin:0;}
#menu ul ul li a {text-align:center; width:144px;}
#menu ul li a:active + ul.dropdown {left:130px; }
#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2 {left:130px}
#menu ul li ul.dropdown:hover {left:130px}
#menu ul li ul li{background: #999999}
#menu ul li a:hover{ color: #FFF; background: #333;}
#menu li.active > a,
#menu li.active > a:hover,
#menu li.active > a:focus { color: #fff; background-color: #337ab7;}
Fiddle here.
This behaviour is due to the href attribute in the higher level link.
The anchor tag <a> should be used only to navigate, not as dummy "focusable" item. The problem is that these high level buttons are intended to open a sub-menu, not to navigate to a given location in the document.
Solution
Typically, pure HTML/CSS dropdown menus are hard to set up, but given what you have done, I would suggest you to use some unstyled <button> tags for the upper level items (and <a> for actual anchors). They have the benefit to better fit semantically and free you from placeholders like href="#" or href="javascript:void(0)".
Beyond pure semantic, the solutions with the dummy href is more hacky and a bit intrusive because some browsers shows them as the link target on the bottom of the screen (when it should be hidden from users perspective). As a user its really annoying when such content is displayed.
I recommend this question about using a button or a link in the first place.
Code
Here is a working jsFiddle with proper semantic and clean rendering.
The # in your link href will link to the top of the page (causing your jump).
Replace it with this <a href="javascript:void(0)">
When the # is used in an anchor, it is usually followed by an ID e.g. <a href="#HelpSection"> this is a way that you can link to an ID on the current page (or even a different page). As you are not adding an ID, it will jump to the top of the page.
Update css and html with this code, i had made update as i understand
#menu {display:initial; position:fixed; z-index:500; width: 150px;vertical-align: top;line-height: 200%;top:10px;}
#menu ul {padding:0; margin:0; list-style:none; padding: 0;list-style: none;margin: 0px;}
#menu ul ul {z-index:501; position:absolute; left:-9999px; width:150px;}
#menu ul li {margin-right:5px; float:left;position:relative;line-height: 200%;position: relative;}
#menu ul li a {display:block; float:left; text-decoration:none;width: 150px;;display: block;line-height: 200%; text-align:center; border: 1px solid grey;background: white; }
#menu ul ul li {margin:0;}
#menu ul ul li a {text-align:center; width:144px;}
#menu ul li a:active + ul.dropdown {left:130px; }
#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2 {left:130px}
#menu ul li ul.dropdown:hover {left:130px}
#menu ul li ul li{background: #999999}
#menu ul li a:hover{ color: #FFF; background: #333;}
#menu li.active > a,
#menu li.active > a:hover,
#menu li.active > a:focus { color: #fff; background-color: #337ab7;}
#wrapper{padding-top: 180px;}
<div id="wrapper">
<div id="menu">
<ul class="levelone" >
<li class="active"> Home</li>
<li class="fly"> 1</li>
<li class="fly"> 2 »
<ul class="dropdown d1">
<li class="fly">2a</li>
<li class="fly">2b</li>
<li class="fly">2c</li>
</ul>
</li>
<li class="fly"> 3 »
<ul class="dropdown d1">
<li>3a</li>
<li>3b</li>
</ul>
</li>
<li class="fly"> 4</li>
</ul>
</div>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
</div>
I have 2 CSS elements defined, one called horizontalmenu and another called footer-links. For some reason when I change the hover text color for one of the divs, it changes it for both.
Below is the HTML and CSS for the 2 sections in question.
HTML
<ul>
<li>Home</li>
<li> Products
<ul>
<li>Security</li>
<li>Managed Networks</li>
<li>Disaster Recovery</li>
<li>Cloud</li>
</ul>
</li>
<li> Why Indigo?</li>
<li> About Us</li>
<li> Contact</li>
</ul>
</div>
<div class="bottombar">
<div class="copyright">
<h7>© Copyright 2014 Company name</h7>
</div>
<div class="footer-links">
Privacy Policy |
GC24 |
Call Rates
</div>
</div>
CSS
.horizontalmenu a:link, a:visited{
color: #003399 !important;
}
#horizontalmenu li ul li:hover a,
#horizontalmenu li ul li a:hover {
color: #fff !important;
.footer-links a:link, a:visited{
font: 'Gill Sans MT';
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #fff;
}
.footer-links a:hover{
text-decoration: underline;
color: #fff;
}
Could someone help me understand why this is happening?
Thanks,
The comma does not have the precedence you think it does.
.horizontalmenu a:link, a:visited means:
Anchors that are unvisited links and descended from elements that are members of the horizontalmenu class
and
anchors that are visited links.
It does not mean:
Anchors that are unvisited links and descended from elements that are members of the horizontalmenu class
and
anchors that are visited links and descended from elements that are members of the horizontalmenu class
You need:
.horizontalmenu a:link, .horizontalmenu a:visited
(And similar for all your other instances of the same problem)
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.