I've been looking a lot at this problem, but I can't find the bug hiding. Somehow it's overlapping, and I can't get the second menu to show up.
#menu > ul > li.has-dropdown = first
#menu > ul > li.has-dropdown > ul > li.has-dropdown = second
now #menu > ul > li.has-dropdown > ul > li.has-dropdown > ul shows up, but with no text, all transparent, I can't get it to show somehow.
Website link :
http://rscomposites.101-odense.dk/
Remove "overflow:hidden" from ul.dropdown and it will show. Just use the developer panel in your browser (F12) and you will find things like this.
By the way, there are several existing drop down menus on the internet you can use and just apply your style to it without having to deal with problems like this.
I like to use this method:
<ul>
<li>
<a href=''>First</a>
<ul>
<li>
<a href=''>Dropdown</a>
</li>
</ul>
</li>
<ul>
CSS:
ul{list-style-type:none;padding:0px;margin:0px;}
ul>li>ul{display:none;position:absolute;}
ul>li:hover>ul{display:block;}
Related
I am having a problem with NVDA screen reader, in that it will read all elements out on the same line in one block.
For example, with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul > li {
list-style: none;
display:inline-block;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
This will display all navigation links in a row, which is visually correct, but NVDA, in browse mode, when scrolling through with the arrow keys, will read all the links together. The user cannot move between each individual link, meaning it is impossible to stay on one and select it.
The same happens with a link in the middle of a paragraph:
<p>NVDA will not stop on This link so a user can select it.</a>
In my navigation example, changing the style so each link is on a separate line:
nav > ul > li {
list-style: none;
display:block;
}
Fixes the problem for NVDA - the user can move between links - but is visually wrong.
The only way I have found to make it visually correct and force NVDA to read it separately is to display each anchor as a block inside the list item:
nav > ul > li {
list-style: none;
display:inline-block;
}
nav > ul > li > a {
display: block;
}
But this feels hacky and is not a solution in every situation (this will not work within a paragraph for example).
Is there an attribute I can add, or any other better way to make NVDA read each element separately?
This issue is across all browsers.
You do not need to do anything, the user can navigate to each link and can activate them. The user can interrupt the reading at any point with the CONTROL key. Also after the link has been read, the user can use the SHIFT-TAB key to navigate backwards to each link. Also the user can use the K key to navigate between links. In addition, the user can use the NVDA+control+leftArrow key to move backwards word-by-word.
The key here is to ensure that each link is focusable with the TAB by ensuring that it has an href attribute. So <a>Not really a link</a> will not be identified as a link and will not be TAB focusable.
Here is a reference for the keyboard commands for NVDA http://community.nvda-project.org/documentation/userGuide.html
If you want to change the default behavior to make NVDA read links as if there were only one per line, as JAWS does, do the following:
Go to the NVDA menu (insert|n).
Go to preferences.
Choose Browse mode.
Uncheck the second check box, “Use screen layout when supported.”
Choose OK.
Go back to the NVDA menu (insert|n).
Choose “save configuration.” If you don’t do this, depending on how you have NVDA configured, this change might not persist across restarts.
Changing the display properties on ul and li changes the way NVDA will read out the list. From what I have seen so far, changing either of them to things like inline and inline-block will cause NVDA to read them as it would a paragraph (with a "list with x items" at the start), pausing after a certain number of words in the default configuration.
To get it to work with an inline list, you can use display: flex on the ul element
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul {
display: flex;
}
nav > ul > li {
list-style: none;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
You can also use display: block; float: left on both the ul element and li elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul {
display: flex;
}
nav > ul > li {
display: block;
float: left;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
Having the following structure:
<ul>
<li>
<div><span class="node">Content1</span></div>
</li>
<li>
<div><span class="node">Content2</span></div>
</li>
<!-- but also: -->
<li>
<div><span class="node">Content3</span>
<ul>
<li>
<div><span class="node">Content on 2nd level</span></div>
</li>
</ul>
</div>
</li>
</ul>
Now I want to select all span elements with the CSS class node which are on the first level of the hierarchy. How to do that without also matching the last span on level 2?
Edit: The div tags are just for demo purposes. They can change to span or even be nested within another div. I don't want to get a brittle CSS selector out of this (web testing), so I do not want to use direct child selectors. Furthermore, I cannot make changes to the HTML code myself.
You can use > selector:
#parent > ul > li .node
Or, if you haven't parent id:
ul > li :not(ul) .node
You will need to start from the parent of the top-level ul and work your way down using child selectors. For example, assuming the parent element is identified by #parent:
#parent > ul > li > div > span.node
If the hierarchy of elements between the li and the span.node is not fixed, then things get a little more complicated. In order to avoid matching the inner span.node elements, you will need to make some assumptions about the markup, since a simple descendant selector like the following will always return every span.node since every nested list occurs as a descendant of your top-level li elements:
#parent > ul > li span.node
Fix/Ammend your html code, simple is better.
Working fiddle
<div><span class="node test">Content2</span></div>
add 2 class names to your span
.node.test {
color: red;
}
points to the right span
I'm using twitter's Bootstrap css to create a basic tabbed nav, as shown here under "Basica tabs." You'll notice that the active tab is not underlined, which makes it feel like it is in the foreground. When I use the exact same code, my active tabs are still underlined, which really undermines the effectiveness.
I've created a JSFiddle here: http://jsfiddle.net/s_d_p/nRB5t/1/
Here's the HTML:
<div class="row" style="width:960px;">
<ul class="nav nav-tabs span12">
<li class="text-center active">HOW IT WORKS</li>
<li class=" text-center"><small>Login</small></li>
<li class=" text-center"><small>Join</small></li>
</ul>
</div>
Am I doing something wrong?
Lose the <small> tags and it works fine.
As answered by Rob, removing the small tag will correct it. If you would like to keep the styling though, you could change the font size on the anchor styling for inactive menu items (and set it to the def 100% on the active one so it stays at the proper size):
.nav-tabs > li > a {
font-size: 85%;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
font-size: 100%;
}
In fact, as a few online articles (and the MDN page) suggest, <small> has been re-purposed in HTML 5 to indicate fine print, copyright and legal print, and side-comments. So the above would be a more proper way to achieve the styling you're after anyway.
I made a menu and want to keep a pressed button a different color. I.E. If I am at the menu page, the menu button of the menu will be blue.
I have read some online guides about menus and ended up with the following:
<div id="menu">
<ul>
<li>
<a href="/index.php" >home</a>
</li>
<li>
<a href="/search.php" >search</a>
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul></div>
And the CSS would be something like this:
#menu ul li a.selected{
background:blue;
color:#000;
}
Of course every LI has height and stuff so that it has some color. The question is how can I tell the HTML that a button is selected? The HTML attribute or something?
And another dilemma that I have is how best to change these selected? I can check the address using PHP and change the selected according to it. Any suggestions how to best do it?
You could go with :
<li>
<a href="/search.php"
<?php
if(strstr($_SERVER["REQUEST_URI"], "YOURPATH/index.php"))
echo "class='selected'";
?>
> Home </a>
</li>
or using the Javascript equivalent "document.URL".
Might not be the cleanest solution but should do the thing.
for a use a:visited in css. it will be aplicated only if the link was used before
You can use a:visited and a:active in css.
It becomes active when you click on it. It becomes visited if you have visited it before.
If you want to manipulate buttons, you might consider using JavaScript (preferably jQuery), then you can easily change element attributes based on actions (e.g. onclick).
Try :active and :focus
#menu ul li a:active,#menu ul li a:focus{
background:blue;
color:#000;
}
I have the following html structure.
<ul>
<script id="agendaTmpl" type="text/x-jquery-tmpl">
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?session_id=${agenda_id}');">
</li>
</script>
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html? session_id=2');"> test</li>
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html? session_id=2');"> test</li>
</ul>
I need to apply class to the first li of the list.
The script tag cannot be removed, coz it is a template for the structure.
I tried with ul > li:first-child but it is not working. It works only if the li is the first child of the ul, i.e. if the script tag is not present.
Please suggest me a way to apply style to the first li of the ul.
Note: I am not allowed to add a new class to the first li.
Try using first-of-type instead:
ul > li:first-of-type
This is a CSS3 selector - so is not completely supported across older browsers. See #Boltclock's answer for much better cross-browser support
It works only if the li is the first child of the ul, i.e. if the script tag is not present.
Exactly.
Since you're using a jQuery template, and you're trying to manipulate the first li to give it a class without modifying the HTML source, you may as well do this all with jQuery:
$('ul > li:first').addClass('first');
There's also a trick for selecting all first items of adjacent lists of items:
li:not(li + li) {
background: #f00;
}
/* Or the more intuitive one: */
ul > :not(li) + li, ul > li:first-child {
background: #f00;
}
<ul>
<div></div>
<li>I'm selected</li>
<li>test</li>
<li>test</li>
<div></div>
<li>I'm selected</li>
<li>test</li>
</ul>