I would like the entire box to be a link to my page tomatoes.html, however the user has to click specifically on the word "tomatoes" to go to the new page. How can I make its surrounding box also a link? I tried to do
<a><li>a href="tomatoes.html">Tomatoes</li></a>
but my research tells me this is not proper HTML coding. Any ideas? Thanks.
<div class="subMenu subGrub">
<ul>
<li>Tomatoes</li>
<li>Potatoes</li>
</ul>
</div>
Leave it to this:
<li>Tomatoes</li>
and use this CSS to get the whole <li>-element to be "clickable":
li > a {
display: block;
}
Related
Within a ul element i have a list of anchor tags that represent social media icons like so :
<ul class="social-menu">
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
</ul>
On Android mobile (the only OS that displays such behaviour by default)i'm noticing that when you click an item the highlight colour will appear correctly the first time. However, after that first time if you select a different icon the highlight appears over the previously selected icon.
I've tried explicitly declaring the -webkit-tap-highlight-color, ensuring the correct anchor tag has been clicked with some console logs for each item and even stripping back the content in the <a> tag to make sure that wasn't interfering but with no luck.
Check the yellow block on the top of this page :)
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
You can try :active or :active and :visited instead.
a:active {
background-color: yellow;
}
If you like my answer, please vote. I need some points to write comments :D If its not well answered, write the exact purpouse you need highlighting for. There wil be someone who will help for sure!
I am using a nav tag in index page and also want to use that in second page but I want to remain just one same css file. Now the problem is that if I will change .nav styling in css file for second page then it will be change in index page.
Should I make separate css files for every page or is there any other solution as well?
I tried to give id to nav in second html page to make it different in the css file but it is not making changing in second page nav.
   
one
two
three
It should be change in the second page.
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
I have a smidge of custom code on my Squarespace site. I know this isn't the Squarespace forum, but I'm blanking on how to target just one specific element in my custom CSS.
So here's the site: http://www.roboticsrookie.com/
I've tried putting #main-navigation a.folder {padding: 0px}; in my sitewide CSS, but it's proven to be ineffective. Any tips would be greatly appreciated.
The problem seems to be that Squarespace generates an empty navigation link that has padding, but I figure out how to get rid of the specific element's padding.
Screen shot
It's not "padding" it's an anchor tag, probably designed to hold an icon for drop down menus.
Remove the empty anchor tag there if possible.
<li aria-haspopup="true" class="folder-collection folder">
<!-- < this anchor is the space -->
Reviews
<span class="delimiter">/</span>
<div class="subnav">
<ul>
<li class="page-collection">Robotics Reviews</li>
<li class="page-collection">Book Reviews</li>
<li class="blog-collection">Reviews</li>
</ul>
</div>
</li>
Or add CSS :
li.folder-collection.folder > a:nth-child(1) { display: none;}
This should remove that first empty anchor.
You're css selector was incorrect. #main-navigation a.folder is looking for an anchor tag with the class "folder".
In other words <a class="folder" href="#"></a>.
What you have is a list item with the class folder and an anchor tag within that list item. Or <li class="folder-collection folder"></li>.
You can't (easily) target that specific anchor because there's nothing unique about it. There's no class or id apples to the anchor and there are other anchors within that list item. So you need to use more specific selectors, such as nth-child, to select it.
I have bunch of links and I need to change the texts color to red after user clicks them
I have something like:
<li class="test" ng-repeat="item in items">
<a href="" ng-click="clickMe()" class="test-li">
{{item.name}}
</a>
</li>
Currently the style is like
.test-li {
color: black;
}
I want my texts to turn red after user clicks them.
So I do:
.test-li:visited {
color:red;
}
It works when I click the item, but the color changes back to black after I click another item. I feel like this can be archive simply in CSS without setting ng-class. Can anyone help me about it? Thanks a lot!
You don't have any destination url given in your links, so there really isn't a way for the browser to know which links have been visited. I think if you were to add a simple #test, #test1, #test2, etc to your href attribute in your links, you would find that your CSS does work as intended.
Since your link doesn't actually go anywhere, you'd be better off adding a 'visited' class to your <a> element when clicked, via JS.
jQuery exmample:
$('li a').click(function(){
$(this).addClass('visited');
// or you could use $(this).toggleClass('visited'); depending on what you want to achieve.
});
Whats the best way to implement rollover 'buttons' like Stackoverflow has for 'Questions', 'Tags', 'Users' at the top.
It is actually implemented like this :
<div class="nav">
<ul class="primarynav">
<li class="">
Questions
</li>
<li class="">
Tags
</li>
<li class="">
Users
</li>
<li class="">
Badges
</li>
<li class="">
Unanswered
</li>
</ul>
I kinda gave up trying to find the javascript for this since all the javsascript seems to be on one line.
I was just wondering what people think is the simplest / most reliable way to implement simple buttons like this.
I found it very interesting that stackoverflow is using <li> and not something like <span>. Curious as to why...
PS. I'm using ASP.NET -- currently with no other libraries such as JQuery, but willing to try something like that if it'll help.
There's no javascript needed for hover effects on links. Just use the :hover pseudo-class:
a:hover {
background-color:#FF9900;
}
Regarding the menu, it is quite common to implement navigation using unordered lists.
using li elements makes sense because these are lists (of links), giving the links semantics. When things are semantically marked up, the document can be understood by non-visual browsers, such as search engines and visualy-impared persons using screen-readers.
Decomposing it, its css driven:
.primarynav li {
margin-right:7px;
}
.primarynav li:hover {
background-color:#FF9900;
}
Firebug is my friend.
However, there's no reason why it couldn't be done with javascript
jQuery(function($){
$("ul#nav li").each(function(i,v){
$(v).hover(function(){
$(v).addClass("hovered");
},function(){
$(v).removeClass("hovered");
});
});
});
CSS only:
a.tagLink {
background-color: red;
}
a.tagLink:hover {
background-color: blue;
}
You don't need to use JavaScript for this; some simple CSS will suffice:
a:hover {
background-color: /* something magical */;
}
Note the ":hover" part of the selector; that's the magic bit, and it works on non-<a> elements, too, although some older versions of IE will disregard it for anything other than a link.
Obviously, you can combine additional bits in the selector to limit this effect to your navigation links, or whatever you want to achieve.