Based answers to other questions, ie Link inside a button not working in Firefox, HTML5 disallows <a> in <button> and <a> in <a>, etc. I have a design (no pushback permitted) which has a row of three clickable tabs which switch the content displayed - on two of them when active there are two arrows at either end which paginate the tab. Quick mockup:
How can I nest clickable targets using correct HTML5 markup and proper interactive elements?
There are many ways to make, for example, <div>s clickable. I'm asking about a HTML5 solution, not a JS hack.
What I would do is have the tabs as part of a unordered list, each with <a> tags within. For the one(s) needing arrows include additional <a> tags within the <li>, and use CSS to position them above the primary <a>.
ul {
line-height: 2em;
text-align: center;
padding: 0;
margin: 0;
display: block;
}
ul > li {
position: relative;
width: 10em;
padding: 0;
margin: 0;
display: inline-block;
}
ul > li > a {
text-decoration: none;
color: green;
border: 1px solid green;
display: block;
}
ul > li > a:hover {
background-color: lightgrey;
}
ul > li > a.back, ul > li > a.next {
position: absolute;
top: 0;
width: 2em;
color: darkgreen;
border-color: darkgreen;
}
ul > li > a.back {
left: 0;
}
ul > li > a.next {
right: 0;
}
<ul>
<li>One</li>
<li>Two<></li>
<li>Three</li>
</ul>
One possible solution - <label> is an interactive tag which expressly allows interactive content (intended for form elements). The <label> could set values of a hidden radio element which can be used via CSS or JS to pick which tab content to display, while (potentially) allowing nested <a> tags inside for prev/next.
Related
I have one CSS file which I found it in one website, but I have a confusion about it. The code is:
ul li a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
}
So, what I am styling here? as I know, it should be (( a )) tag, so if I add
display:inline-block;
to (( ul )) tag styling which I found here (( UL display: block )) it should work, but unfortunately I failed to make it.
Maybe I will have one more question later, but for timing i want to understand the code and correct my information.
Best regards and thanks in advance,
Gharib
edit:
I want to use both inline-block and block, and here is my full code:
ul.ablock {
display: block;
}
ul.aninline {
display: inline-block;
float: right;
width: 50%;
}
a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
a:active, a:hover {
background-color:2F62AC;
color:FFFFFF;
}
and the html is something like:
<ul class="ablock">
<li><div align="center">Find</div></li>
</ul>
<ul class="aninline">
<li><div align="center">Back</div></li>
<li><div align="center">Next</div></li>
</ul>
The above selector will target all a elements which are nested under li which is further nested under ul, that's a general element selector, which will target all the a element which falls in that pattern. It is better to be specific and use a class instead, like
ul.class_name li a {
/* Styles goes here */
}
The above selector will only target a elements which are nested under li which are further nested under an ul element having a class called .class_name
As you commented, it seems like you want to target a ul element, now instead of using something like
ul {
/* Styles goes here */
}
Will apply the styles to all the ul elements, instead, be specific, either assign a class to your ul element and use a selector like
ul.class_name {
/* Styles goes here */
}
Or you can also use a nested selector like
div.wrapper_div ul {
/* Styles goes here */
}
Here, in the above selector we are selecting all the ul which are nested under .wrapper_div.
Just a side note, you seem to be confused so don't wanna confuse you more, so don't read this, you can simply ignore, but if you want to learn, just make sure that, if you are targeting ul, make sure you use > selector which will select direct child, as users tend to nest a ul element under li, say for example dropdown menu, this is common, so it is better to use a selector like
div.class_name > ul { /* Selects first level ul elements */
/* Styles goes here */
}
ul > li > ul { /* Selects nested level ul elements */
/* Styles goes here */
}
You are targeting the <a> element here. The reason for the ul and li is that, you're targeting a specific nesting of a. Namely, you are targeting a <a> that is a descendant of <li> that is in turn, a descendant of a <ul>.
If you want to add dispay: inline-block to all <ul> elements then above the rule for ul li a you want to add:
ul { display: inline-block; }
This question seems crazy long, but I wanted to clearly explain everything.
Desired Result
I have a horizontal menubar with submenus. I created it from scratch, so I am not using any existing framework. It uses a combination of buttons, anchors, and spans for semantic markup.
anchors for items that go to a new page
buttons for items that don't go anywhere but have submenus
spans for disabled items
Note: This site is for a limited number of specific users so I am not concerned about the lack of accessibility.
Submenus should be as wide as the widest menu item that it contains. And each menu item should fill the width of the submenu so that the cursor and focus outlines display as desired.
The Problem
In Firefox, a submenu does not expand to the width of the widest item in the following scenario:
submenu is absolutely positioned
submenu is contained within a block that has position other than static
longest menuitem is a button
I've tested with Chrome, IE 8, Firefox 12, and Firefox 20. It displays as desired in Chrome and IE, but not in either version of Firefox.
I created a scaled down version with JavaScript, images, disabled items, and many of the menu items removed. Code is below and also on jsFiddle. Here's a screenshot in Firefox 20.
Note how the Section Titles item is squished. The submenu is only as wide as the Page Titles item (with padding). Also note how this is not a problem in the top level submenu - that menu expanded to the width of Customize PDF Titles.
The Section Titles item is a button. If I change it to an anchor, the submenu expands as desired. If I change the button CSS to remove width: 100%, then the submenu expands as desired. But then, menu items that are narrower than the submenu no longer fill the width (even if I add display: block).
Here's a screenshot of how the above fix breaks other parts of the menu.
Note how the cursor is not a pointer when hovering outside the text. Yes, I could fix that by changing the cursor for the li, but the other problem is the focus outline. I want the focus outline to be around the whole menu item not just the text (which is how it works with width: 100%).
I also tried playing around with -moz-box-sizing, but still no joy.
As a simple workaround, for this particular case, I've just added a few to Page Titles to make it longer. But that solution won't work when the menu is created dynamically.
HTML Code (jsFiddle)
<ul id="navAdminMenu">
<li>Companies</li
><li class="hasSubmenu"><button type="button">Books</button>
<ul>
<li>Manage Books</li
><li>PDF Profiles</li
><li class="hasSubmenu"><button type="button">Customize PDF Titles</button>
<ul>
<li>Page Titles</li
><li class="hasSubmenu"><button type="button">Section Titles</button>
<ul>
<li>Profile Section</li
><li>Index Section</li>
</ul>
</li>
</ul>
</li>
</ul>
</li
><li class="hasSubmenu"><button type="button">Lists</button>
<ul>
<li class="hasSubmenu"><button type="button">Categories</button>
<ul>
<li>Manage</li
><li>Reports</li>
</ul>
</li
><li>Key Contact Positions</li>
</ul>
</li>
</ul>
CSS Code
#navAdminMenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
list-style: none;
margin: 0;
padding: 0;
background-color: #efefef;
}
#navAdminMenu button {
margin: 0;
padding: 0;
vertical-align: baseline;
border: none;
background-color: transparent;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
#navAdminMenu button::-moz-focus-inner {
padding: 0;
border: none;
}
#navAdminMenu a {
text-decoration: none;
}
#navAdminMenu li {
display: inline-block;
margin: 0;
border-right: 1px solid #ccc;
}
#navAdminMenu li:hover {
background-color: #4b545f;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
display: inline-block;
height: 2.3em;
line-height: 2.6;
padding: 0 10px;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
color: #06c;
}
#navAdminMenu > li > button:focus, #navAdminMenu > li > a:focus {
outline: 0; /* Firefox displays outline outside the menu box-shadow */
box-shadow: 0 0 0 3px #06c;
}
#navAdminMenu > li:hover > button, #navAdminMenu > li:hover > a {
color: #fff;
}
#navAdminMenu > li.hasSubmenu > button:after {
content: "v";
display: inline-block;
width: 13px;
margin-left: 5px;
}
#navAdminMenu ul {
display: none;
position: absolute;
padding: 0;
background-color: #5f6975;
}
#navAdminMenu li:hover > ul {
display: block;
}
#navAdminMenu ul > li {
display: block;
position: relative;
border-top: 1px solid #999;
border-bottom: 1px solid #000;
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
height: 2em;
line-height: 2;
padding: 0 30px 0 10px;
white-space: nowrap;
}
#navAdminMenu ul > li > button {
width: 100%; /* full width of submenu */
text-align: left;
}
#navAdminMenu ul > li > a {
display: block; /* full width of submenu */
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
color: #fff;
}
#navAdminMenu ul > li > button:focus, #navAdminMenu ul > li > a:focus {
outline: #fdcb01 solid 3px;
}
#navAdminMenu ul > li.hasSubmenu > button:after {
content: ">";
width: 16px;
position: absolute;
right: 0;
}
#navAdminMenu ul ul {
left: 100%;
top: 0;
}
Question
Is there something simple I am missing? Or should I report this as a bug to Mozilla?
Note: I don't want to change the buttons to anchors.
I spent way too much time on this tiny glitch, but I am like a dog with a bone.
After all the trial and error and the time spent drafting the question, I found a very simple solution. I thought of just discarding my question, but maybe it can help someone else.
Very, very simple solution. So simple I could almost cry.
#navAdminMenu ul > li > button {
/* full width of submenu (even when its the longest item) */
min-width: 100%;
}
Note the use of min-width.
I have this HTML code:
<nav id="menu">
<ul>
<li>
Item1
Item1
</li>
<li>
Item2
Item2
</li>
</ul>
</nav>
Demo page
As you can notice, it's a menu with 2 links for each item. The menu is horizontal, and the aim is to hide the "alt" link when the item is not hovered and to show it when it is hovered.
Each <li> element is therefore a box with a specific height (34px) and each link has a height of 34px as well, so that the "alt" link is below the main link, and is hidden.
When the item is hovered, a negative top margin of 34px is applied to the main link, making the "alt" one appear.
But when "hovering out" the top margin of 0 is not really applied back by Google Chrome as you can notice on the demo page I made. Just hover several times on the links and you will notice that elements are not put back to their correct positions.
How can I solve that? I need to keep 2 links (main and "alt") for more complex reasons, the demo being simplified.
For your information, here is the CSS:
nav#menu {
background-color: #e9e9e9;
}
nav#menu > ul {
margin: 0;
height: 39px;
display: block;
list-style-type: none;
}
nav#menu > ul > li {
display: inline-block;
height: 34px;
overflow: hidden;
width: 200px;
}
nav#menu > ul > li > a {
display: block;
height: 34px;
line-height: 34px;
}
nav#menu > ul > li > a:first-child {
margin-top: 0;
}
nav#menu > ul > li:hover > a:first-child {
margin-top: -34px;
}
nav#menu > ul > li > a.alt {
color: white;
background-color: #8d8d8d;
}
Sorry for all the comments. I was trying to get it to work and just thinking out loud. Here is the solution you are looking for...
You need to change two of the styles.
/* add the overflow: hidden; to the end of this tag set */
nav#menu > ul { .... overflow: hidden; }
/* replace the inline-block with float:left;*/
nav#menu > ul > li { float:left; height: 34px; overflow: hidden; width: 200px; }
Here is the working link jsFiddle
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Navigation hyperlinks only work when mouse is on the text
Can you set a link to the whole width of an < li > instead of just where the text is?
This is what I mean, I want the user to be able to click on anywhere on the button and go to the link and not just the text: http://jsfiddle.net/b7S4L/
One of the problems is that I cannot use display: block; because I have a number after the < a > link for example (1)
Don't style the LI at all, (other than float:left and clearing padding, marging and list-style-type) if needed. Put all styling on the A (and use display:block).
I don't want the number on the right to be on a seperate line that's
the problem, it should be on the right of the Text
I think I understand what you're trying to do here. Though, I'm not sure because your question has been quite confusing..
First, do set display: block on the a. That is the right thing to do here.
Then, move the number inside the a, and add a span inside:
<li class="cat-item cat-item-147">
<a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indlæg i kategorien Food">
<span>Food</span> (4)
</a>
</li>
Then, some extra CSS is needed. You should merge the new CSS with what you already have - for the demo, I've added it within the HTML pane for simplicity (marked with <!--new css right here-->):
http://jsfiddle.net/thirtydot/b7S4L/3/
div.gg_newscats li a {
display: block;
padding: 16px 0;
color: #333
}
div.gg_newscats ul li {
padding-top: 0;
padding-bottom: 0
}
div.gg_newscats li a span {
color: #cc0014
}
div.gg_newscats li a:hover {
text-decoration: none
}
div.gg_newscats li a:hover span {
text-decoration: underline
}
The messing around with span and :hover is to keep the colour and underline exactly as you had it.
Anchor tags by default are inline boxes, which means that they don't fill their parent entirely (they don't take all the space) and they shrink only to fit their content. Thus you should use this CSS to make'em fill the space of li element:
li a
{
display: block;
height: 100%;
}
Also keep in mind that you should remove any padding from the li elements and remove margins of a elements. This way, border of anchor tags meet borders of li tags. For an example, look at links of Thought Results.
One solution I tend to use is to make the <a /> element within a <li /> element blocklevel with
display: block;
After that removing any padding you specified on the <li /> element and add it on the <a /> element instead and you should get the same visual output, but with the entire <li /> as a link
While you can manage this with jQuery, you can also use simple CSS for most browsers:
<style>
ul { width: 200px; background: #ccc; }
li { line-height: 3em; }
a { display: block; width: 100%; height: 100%; padding: 5px; }
</style>
<ul>
<li>This is a link</li>
</ul>
Add display:block; to the style and you're all set!
EDIT
Eh, didn't see the jsFiddle example. If you remove the top/bottom padding from the LIs and put it on the As, plus put the count in a SPAN within the As, these rules will achieve the desired result:
div.gg_newscats a {
display: block;
height: 100%;
padding: 10px;
}
div.gg_newscats a span {
color: black;
}
div.gg_newscats ul li {
float: left;
font-size: 13px;
margin-left: 2%;
margin-top: 2px;
text-align: center;
width: 30%;
padding: 2px;
}
Sample HTML:
<li class="cat-item cat-item-148">
<a title="Vis alle indlæg i kategorien Electrical" href="http://test.vps.graenseguiden.dk/newscat/electrical/">
Electrical
<br>
<span>(1)</span>
</a>
</li>
Edit 2
new code... a lot simpler... only thing that didn't go the way I liked was that the text-decoration of the link had to go.
.cat-item
{
padding: 0px;
}
.cat-item a
{
padding: 13px 0px 13px 0px;
}
.cat-item span
{
margin-left: 5px;
color: black;
}
.cat-item a:hover
{
text-decoration:none;
}
I had to change the markup just a little (put the numbers in a span) but other than that it wasn't too much
demo here: http://jsfiddle.net/ZW6uV/1
had to tack on !important because of a conflicting imported style sheet.
Edit
Readers Digest version: Don't put your padding on the <li> ... ever. Put padding on the <a> within the <li> and then it will fill the empty space and have the same effect but be able to handle the click also. -snip-
Yes just remove any padding from the LI element and push out the padding as needed on the anchor tag
<li class="link-wrapper">
<a href="http://this.com" >Go Here</a>
</li>
CSS
.link-wrapper{
margin: 0;
padding: 0;
}
.link-wrapper a{
display: block;
padding: 3px 5px;
}
Since you are using jQuery, you can do it this way:
$("li.cat-item").click(function () {
$("a", this).click();
return false;
});
I have a sort of an image map, where I've used li's to create the elements, and on hovering the information pops up. The html code is:
<li id="b906" style="z-index: 1000;">
<a href="#">
<span> </span>
<span class="para">Some text and maybe an image goes here.</span>
</a>
</li>
And the CSS code for the corresponding HTML is:
#map ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
display: block;
}
#map ul li a {
color: #000;
text-decoration: none;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}
#map ul li:hover a {
display: block;
}
#map ul li a span {
display: block;
width: 100%;
height: 120px;
border: 2px solid #777;
}
#map ul li a span.para {
display: block;
background: #777;
padding: 2px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100px;
}
This works splendidly in all the browsers, but IE8 does not show the spans on hover. However, if I put a border: 1px solid red; on the li, the spans do show up, but only if my mouse is exactly on that 1px thin border. Doesn't show up still if the cursor is inside the li.
What am I doing wrong here? :(
Thanks for the help.
Internet Explorer has some problems with dealing with :hover events, especially for li elements. You need to use this: http://www.xs4all.nl/~peterned/csshover.html
Should work for you then.
If all else fails, and in my case, I use jQuery's hoverIntent to show menus reliably.
From http://msdn.microsoft.com/en-us/library/ms530766.aspx
Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the A tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance.
See Defining Document Compatibility