I have problem while make menu using CSS. The problem is I would like to use :active to make my current button highlighted. But after tried so many times, I still can't find how to implement it in my code.
I use <li> tag inside <a> tag to make sure the button background and text color change while selected, because after tried to put <a> tag outside <li> tag the text color not changed when select the button, the text only change after I put the cursor into the text.
Need your help.
This is my CSS code:
a, body {
margin-top:-30px;
text-decoration:none;
}
#topmenu {
margin-left:170px;
cursor:pointer;
}
#topmenu li {
color:white;
list-style:none;
float:left;
margin-right:5px;
padding:20px 15px 10px 15px;;
box-shadow:1px 1px 1px grey;
-webkit-box-shadow:1px 1px 1px grey;
-moz-box-shadow:1px 1px 1px grey;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #004890);
background: -webkit-gradient(linear, left top, left bottom, from(#004890), to(#2F2727));
text-shadow: 1px 1px 1px #555;
}
#topmenu li:hover, #topmenu li:active
{
background: -moz-linear-gradient(100% 100% 90deg, #FED93A, #FEC13A);
background: -webkit-gradient(linear, left top, left bottom, from(#FEC13A), to(#FED93A));
color:black;
padding-top:30px;
}
#topmenu #home {
margin-right:10px;
}
#topmenu #logout {
background:#000;
color:white;
}
and this my HTML code:
<div id="topmenu">
<ul>
<img src="includes/menu/pics.gif" alt="" style="float:left;"/>
<li id="home">Home</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li id="logout">Logout</li>
</ul>
</div>
You are missing the point mates. The :active pseudo class does not work like this.
:active sitepoint CSS reference
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners
What he wants to acheive is apply styles to the current a which has nothing to do with the above "active pseudo-class".
There are many ways you could acheive this.
First
Second
Third
Fourth
I think the problem is that :active doesn't mean what you think it does.
:active triggers when you click on an element, but before you let up on the mouse button. See the CSS spec on dynamic pseudo classes.
Here's an example HTML page, with :active on both the <a> and <h1> elements, you'll see the text color changes to blue when you click and hold down the mouse button.
<html>
<head>
<style type="text/css">
a, h1 { color: red; }
a:active, h1:active { color: blue; }
</style>
</head>
<body>
<h1>headline</h1>
link
</body>
</html>
First of all you need to have the links inside the li items, like this:
<li>A</li>
That's the proper way of nesting them. Then you want to give the active list item a class="active" atribute and set the css styles for it that you want.
I was getting that issue too. So what I did is I added a class into the . For example in your case, I would have done this:
(1)Add a class named active in your HTML code as the first step.
<div class="topmenu">
<ul>
<img src="includes/menu/pics.gif" alt="" style="float:left;"/>
<a class="active" href="../folder/home.php"><li id="home">Home</li></a>
<li>A</li>
<li>B</li>``
<li>C</li>
<li id="logout">Logout</li>
</ul>
</div>
Secondly, what I did is I went to my CSS code and I would type in :
div.topmenu ul.active {`
`background-color:black;
color:white;
}
It worked for me. Hopefully, it helps you. Happy coding!
I'm fairly certain that :active only triggers on links (A tags). It doesn't (and shouldn't) work on arbitrary elements like LI.
I think there may be a way for you to work around this. Have you tried keeping structural properties (float, margin, etc.) on the LIs, but moving the visual properties (border, padding, colors, etc.) to the As? That way, you can just style #topmenu li a:hover, #topmenu li a:active, and so on.
Related
I'm trying to create a guitar-related website and learn html and css in the process, but I've ran into a problem: I've created a list where all the elements are links and I'd like for them to be white but turn yellow when hovered over. I can't seem to accomplish both of these objectives at the same time. Either they're always white or they turn yellow when hovered over but otherwise stay purple.
I've tried creating the hover function as an id (using it only once, as you do with id's), creating a div with all the necessary classes, inserting the hover function into the ul list or into each of the list elements or into the link descriptions. Nothing has worked so far.
HTML and CSS (separate files):
<div class="ul2 alink1 ahover1 avisited1">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank"
>Electric guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Acoustic_guitar" target="_blank"
>Acoustic guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Semi-acoustic_guitar"
target="_blank" >Semi-acoustic/semi-hollow guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Guitar_synthesizer#MIDI_guitars"
target="_blank" >MIDI-guitars</a></li>
</ul>
</div>
</body>
.body {
background-color:black;
}
.alink1 a:link {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
.avisited1 a:visited {
color:white;
}
.ul2 {
list-style-type:circle;
color:white;
}
When it comes to pseudo selectors, they work in a specific order. So the the hierarchy is as follows:
:link
:visited
:hover, :focus
:active
What you want to achieve can be done with these simple modifications:
.alink1 a {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
Remove the a:visited selector from your CSS as it's not needed, remove the a:link and have it as an a tag only.
I believe this is what you are after.
I have a set of links in the left navigation panel. And I wanted to highlight the opened link. I'm using css for my website.
HTML code:
<div id="LEFTmenu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
CSS code:
#LEFTmenu {
line-height:30px;
width: 200px;
float: left;
margin-top: 10px;
background-color: #FFFFFF;}
#LEFTmenu ul {
padding: 0;
margin: 0 0 20px 15px;
list-style: none;
list-style-type: none;
font-size: 14px; }
#LEFTmenu ul li a:link, a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333; }
#LEFTmenu ul li a:hover {
color: #CC3366; }
#LEFTmenu ul li a:active {
color: #33FFFF; }
By using a:active, the link will have this property only for a very short time of just one click on the link. But I'm expecting the link to be highlighted while its page is opened. Is there such feasibility in CSS?
The :active pseudo class is only for elements tht are currently in the selected stage. For example in the case of a button, the button could be red color , when you hover the mouse over it it turns to blue. Here you use the :hover pseudo class. Now when you click the button ( just left click down, dont release it yet) the button turns green. Now that is the :active pseudo class.
for what you are wanting, where the link is continuously highlighted when the page is opened and displayed, you can do it either using javascript or just plain css.
the simplest way, the plain css way is just have a class called "highlighted" and set some css property like background ans stuff like,
.highlighted{
background-color:#000;
color:#fff;
}
just apply the "highlighted" class to the link you want.For example, if you are on link2.html page then you want the "link2" in your ul list to be highlighted. So inside your link2.html page, in your ul element referencing the links, just apply the class to link2 like..
.highlighted{
color:#fff;
background-colo:#000;
}
<div id="LEFTmenu">
<ul>
<li>Link1</li>
<li class="highlighted">Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
This is the easiest css solution for what you want to achieve.
Now the javascript version of doing this is not difficult by any means, but a little more complicated than the just css approach. I say it is a little more complicated because you are dynamically going to manipulate the element properties. Now you do have to watch out for what you are doing bcause you might accidentally change some DOM property that you do not want to change but altogether it is not difficult.
now for javascript approach now you can decide to do this in native javascript or use some jquery or other libraries. Jquery makes writing the code simpler but you have to link the jquery source to you html file, which adds memory/file size to your page. This part I will let you decide what you want to do and how you want to proceed.
HopefullyI have shed some light into what you are wanting to do. Good luck
On the main menu, if a menu link is active, there is a border on the bottom. It works fine. I have the following CSS:
.active {
text-decoration: none;
border-bottom: 4px solid #888;
}
Currently the border-bottom is as wide as the text inside the list item. But I would like to make it much narrower. Is that possible?
Here is the HTML
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
</ul>
Try using the pseudo-element :after to achieve that, as I don't think it's possible to make the border narrower than the element's width.
Check this fiddle: http://jsfiddle.net/6QfNs/
A border can't be narrower than the element it is set on. So you can't achieve your aim with a border.
BUT
You can use a pseudo element, set the border on it and give it the desired width :
DEMO
CSS :
.active:after {
content:'';
display:block;
width:20px;
border-bottom: 4px solid #888;
}
The technique of using pseudo-elements is very familar and well-known in solving the problems of this kind. However I would like to introduce another way using linear-gradient background, just a share for every one:
/* span is your menu item here */
span {
font-size:20px;
padding:4px;
cursor:pointer;
}
span:hover {
background:linear-gradient(red,red) no-repeat;
background-size:60% 4px;
background-position:center bottom;
}
Demo.
So.. I'v added a bottom border to my anchor tags, to make them stand out. But I have some images that are also warped around with anchor tags. The thing is, I don't know how to remove the border from the image.
Please note that I'm using WordPress and I can't edit how links and images are displayed
This is my CSS Code:
.entry-content a {
padding:0 3px;
color: #104273;
border-bottom:2px solid #104273;
}
And my question is, that is there any way to make something like this?
.entry-content a img {
border:none;
}
So it only removes the border from the images with links?
http://codepen.io/andornagy/pen/sdzBq
The problem you are having is that you're styling the anchor tag and then trying to overwrite that style on an <img> tag, which doesn't actually have the style being applied to it, but rather it's parent.
If you don't want to use Javascript, you can wrap your text in the links in a <span> tag and style that span instead of the anchor itself.
HTML
<a href='#'><span>This is a blank Link</span></a>
CSS
a {
padding:0 3px;
color: #104273;
text-decoration:none;
}
a span {
border-bottom:2px solid #104273;
}
Here is a fiddle of it in action: http://jsfiddle.net/xVSA9/
UPDATE
Ok, here is a solution using jQuery's parent() selector.
$('img').parent('.entry-content a').css("border-bottom", "none");
Leaving your CSS/HTML the same, this should work just fine.
Here is a fiddle: http://jsfiddle.net/GeR85/
presuming you're HTML looks as follows:
<div class="entry-content">
<img src=""/>
</div>
the image is a direct child of the anchor so you can use the 'direct child' selector in CSS which is a more than symbol.
.entry-content>a>img{}
I like to use organised lists when making menus because it's in the name. They're organised lol.
<ol id="menu">
<li>
<img src=""/>
</li>
<li>
This is a blank link
</li>
<li>
Another link
</li>
</ol>
CSS
img{
border:1px solid #000000
}
ol#menu{
list-style-type:none;
margin:0px;
padsding:0px;
}
ol#menu>li{
}
ol#menu>li>a{
display:block;
padding:10px 5px;
font-size:20px;
text-decoration:none;
border-bottom:1px solid #000000;
}
ol#menu>li>a>img{
border-bottom:none;
}
Avoid using !important.
There you go... :)
the HTML :
<div class="entry-content">
test
<a href="#">
<img src="https://www.google.co.il/images/srpr/logo11w.png" />
</a>
</div>
the CSS:
.entry-content a:not(a img) {
padding:0 3px;
color: #104273;
border-bottom:2px solid #104273;
}
the jsFiddle :
http://jsfiddle.net/3RJ3Q/2/
I'm attempting to use tabs generated by CSS to show an active state of an arrow under the tab. I was trying to position the image for the hover event with the background position properties, but it would bring the image outside of the given proportions of the tab.
This is the page: http://thegoodgirlsnyc.com/holly/about. The active tab should look like this:
The CSS styles are the following one:
#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p
How can I get this image to show at the bottom of the predefined background? These tabs will be included in multiple locations, with varying length of text, so they should only use the one image.
Due to the background image with diagonal lines I doubt it is possible to do what you need by styling one tag only.
The solution could be either styling both the LI and the inner A tags (see an example that is very close to your image there: http://www.litecommerce.com/services.html) or wrapping the anchor text into SPAN and styling the A and the inner SPAN tags.
Here's is HTML and CSS i got from tweaking your page in Firebug that gets the desired effect:
<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
Featured
</li>
You can convert the inline styles to the appropriate CSS styles. The above markup is just for the selected LI element and the anchor element inside.
Hope this helps you.
Ok, here's an updated version for you that should work (note, the above CSS should only be applied to the selected LI and the A element within):
Your HTML Markup
<ul class="nav">
<li class="nav-one current">Services</li>
<li class="nav-two">Clients</li>
</ul>
NOTE: class='nav-one current' on selected LI element instead of A element
Your NEW CSS
ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }
There is an error in your CSS selector. It should be:
#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }
Here's a sample of what i did in Chrome and the result:
NOTE: Also, it looks like your image path is not resolving to the image on your server correctly, in my case it is because I put in the full path to the image.
NOTICE: You didn't change the markup to have the "current" class on the LI element instead of the A element.