i have a site, 4yourtype.com. On the home page there is a button "Blood Type Diet App" i'm tryin to replace it with a dropdown menu button. However whenever i add the following the drop menu does not appear but does seem to be working:
<div class="Cusdropbtn">
<button onclick="cusMenu()" class="Cusdropbtn has-child">I'm here to...</button>
<div id="myDropdown" class="Cusdropbtn-content">
<ul>
<!--edit links here-->
<li>Weight Loss</li>
<li>Gain Energy</li>
<li>Reduce Stress</li>
<li>Immune & Seasonal Support</li>
<li>See Best Sellers</li>
</ul>
</div>
</div>
I have tried replacing and removing most of the css and just cant seem to find what is stopping it from functioning properly. Any help would be greatly appreciated. I tried replacing the code between the <li></li> tag where the current button resides.
Now that I understand your problem, I've discovered the solution. You have conflicting styles in your menu: specifically your dropdown list (.Cusdropbtn-content ul) and generic lists in the header (.sf-menu ul, .PageMenu li ul).
You'll see that the latter styles both have the same or higher specificity and are defined later in stylesheets with higher priority than yours.
My first note is that your custom styles should be included after the base styles in your HEAD element to ensure that any style you overwrite have priority. Second, both .sf-menu ul and .PageMenu li ul set the position of the list to absolute, which means that it's being moved out of its container. You should have something like postion: static !important on .Cusdropbtn-content ul if you want to ensure that it is unaffected by the offending styles.
Related
(navigation layout picture)
I have the navigation-layout of tabs and sub-tabs, which i want to make accessible via text-reader/lynx. It consists of the main pages "Startseite", "Über", "Interessant", "Orte", as well as the sub-pages "Linköping", "München" and "Baustelle". The logical structure would thus be:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
But since I use a layout of several div-tags, it only yields this in lynx:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
The questions (or solutions I don't know how to implement yet) now are:
(1) how do I improve my layout to make it accessible via text-reader/lynx
... or
(2) how do I adjust a layout of unorderd lists and sub-lists (see code) too look like my current tabbed navigation-layout?
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</li>
<li>Orte</li>
</ul>
</nav>
keep in mind that my main tasks is making it text-reader/lynx accessible. I though of using a layout like this, since it is easily styled with #some_ul_id {display: inline-block}:
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant</li>
<li>Orte</li>
</ul>
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</nav>
My third question is:
(3) Is this good practice? Should I do it?
It is the easiest way, though solution (2) would be nicer, since it is more logical.
From an accessibility perspective, the way to markup the solution so that it semantically represents what you are trying to achieve is to use the WAI-ARIA menubar, menu and the various menuitem roles. You should also use the aria-haspopup="true" attribute to show sub-menus and the aria-expanded attribute to track when the menu is expanded. In order to achieve the semantic markup of the hierarchy, you will want to have hierarchical lists as this is the easiest way to represent the hierarchy in an understandable way.
Here is a link to a full dynamic ARIA menu example http://dylanb.github.io/bower_components/a11yfy/examples/menu.html
You will need to ensure that each menu item is keyboard focusable using an href attribute on an anchor tag will do this for you as long as you look for the 'click' event and don't do anything funky with mousedown/mouseup etc.
One way to achieve this could be to absolutely position the sub-menu – of course that requires that you know beforehand that there’ll be enough space, so that items don’t go over multiple lines (resp. you have an alternative at hand for smaller screens via media queries).
So you would position the outer ul (or the nav itself) relative, and then on :hover over a main menu item you make the sub-ul visible, that is positioned absolutely in such a way that it comes to lay underneath the line of main menu items – like this: http://jsfiddle.net/0rpyLqtn/
Other slight variations are easily imaginable; if you don’t want “blank space” underneath the single line of main menu items, you could f.e. give that ul a border-bottom instead of a margin-bottom, and have the border color of it visible at all times, like this: http://jsfiddle.net/0rpyLqtn/1/
Since you have accessibility in mind, you might also want to pay attention to how this kind of menu behaves on devices that do not have a “mouse” as input device. Getting such a menu to be accessible via keyboard can be tricky, and on touchscreens a menu based on :hover might not work that well either. Anyhow, such issues have been discussed on the net already, so with a little research you should be able to find solutions/workarounds for these issues as well.
I am pretty new to CSS. There seems to be a ton of properties and values and it is a bit overwhelming. I am currently trying to emulate a stylesheet I found online. I am currently stuck on this portion
.tabs nav li.tab-current {
...
...
...
}
I understand .tabs is class and .tabs nav is the nav within where the tabs class I used in the html page. Same goes for li. I'm not sure what the .tab-current means and how it is being used. I'm not sure where to look to find notes/documentation on this topic.
The structure looks something like this
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
I just added the ul tags in there since most li tags are found within them.
Anyway, the li.tag-current part of the selector just means that it's going to select the Hey and style it.
From the looks of it the tab-current class acts much like an active class you'd put on a list item or a menu item to show that it's the currently selected item.
li.tab-current means li element with class tab-current.
So basically your CSS rule will be applied to all li tags with class tab-current being inside nav elements which are inside elements with class tabs
I've this code generated with php:
<li class="current"><li>Page1</li></li>
<li><li>Page2</li></li>
<li><li>Page3</li></li>
<li><li>Page4</li></li>
I want to add a css property to tag a inside to list with class current.
I've tried with .li + li + a {property:attribute} etc...
Any suggestions ?
////////////////////// Edit
Ok guys... We did nothing. I tried to simplify the code. Here is the whole code (generated by wordpress):
http://pastebin.com/GJ3zXd93
You can use:
li.current li a
But most likely the double list items are a mistake, so you probably want to use this instead:
li.current a
Also, as a sidenote, the "." in the selector you wrote is trying to find elements with a class of "li", not a list item element.
With the recent update of your question:
I think I know what's going on here. You probably have a widget generating the menu for you. The call to the widget is inside a ul in your PHP. The widget generates the menu inside a div. You are probably also using arguments for the widget call to wrap each menu item inside an li. Which would give you the structure you have:
<ul>
<div>
<ul>
<li><li></li></li>
</ul>
</div>
</ul>
To fix, find where you are calling the widget, and remove the ul that's wrapped around it. Then remove the before and after arguments from the widget call. That should give you this structure:
<div>
<ul>
<li></li>
</ul>
</div>
Then you should have an easier time styling the menu.
You want:
.current a {}
(All links which are descendant of the .current element).
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
I've never come across this problem before and its quite annoying me. I have a list which when hovered over, a box appears around it.
I have a list set out like the following
<div id="sidebar">
<h2>Our Services</h2>
<ul>
<li>Furniture</li>
<li>Kitchens</li>
<li>Bedrooms</li>
<li>Flooring</li>
<li>External Joinery</li>
<li>Commercial Work</li>
<li>Staircases</li>
<li>Tiling</li>
</ul>
</div>
But for some reason firefox doesnt render the whole list item as a link, only the text.
It works across other browsers (even IE) but not firefox.
Change
<li>Furniture</li>
To
<li>Furniture</li>
Inside a UL you are supposed to have LI elements, not anything else. However, inside the LI you can have other tags such as A
Update
You can set the style of A to display:block as mwgriffith suggested on comments.
or to make the whole line a link you can also assign a click event on the LI, here is an example using jQuery
I figured it out, instead of having the <li> display the background I used display:block on the <a> tags and uses the a:hover to create the background.