In relation to Foundation tabs I am having some troubles with the tabindex and not being able to focus on the tabs when using a keyboard to navigate the page. The CMS I am using does not allow me to have the is-active class on the first tab. So I am using javascript to apply the is-active class dynamically. However, when I do so, the tabindex on the first tab anchor remains set as tabindex="-1" and therefore it is not possible navigate to the tabs using the keyboard.
When the is-active class is applied by default (in the demo example) Foundation takes care of setting tabindex="0" making it keyboard accessible. I have set up a demo:
<ul class="tabs" data-tabs="0btzm1-tabs" id="example-tabs" role="tablist">
<li class="tabs-title is-active" role="presentation">Tab 1</li>
<li class="tabs-title" role="presentation">Tab 2</li>
<li class="tabs-title" role="presentation">Tab 3</li>
<li class="tabs-title" role="presentation">Tab 4</li>
<li class="tabs-title" role="presentation">Tab 5</li>
<li class="tabs-title" role="presentation">Tab 6</li>
</ul>
https://codepen.io/benvivo/pen/rQQVmZ
Thanks in advance for any assistance.
Related
Complete HTML/CSS newbie here. This question came to me when I was editing HTML and tried to change a specific list to display as inline but did not want to affect every other list on the page.
I created a class to separate the list in question, the HTML/CSS is below:
li.shortcut {
display: inline;
margin-right: 10px;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
Is there a more efficient way to achieve the same thing? I am following a book but it is slowly becoming outdated so I am wondering what would be the current standard way of writing this if it already isn't.
When you want specific changes to children, think id or class on the parent.
ul.menu li { display:inline; ... }
and
<ul class=menu><li>...</li>...</ul>
try use CSS :nth-child() Selector like this
li.shortcut:nth-child(2) {
display: inline;
margin-right: 10px;
background-color:green;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
or use another way you want source
I have written a menu for an Italian restaurant. This menu consists of an unordered list where each li element has a class named "headline". Each of these li elements contains a headline and another ul inside with li-s as dishes.
It looks like this:
<ul>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</ul>
I am trying to make a printable version of the menu and have no clue why either "page-break-after" nor "page-break-before" work on ".headline" in CSS.
I tried different display values like "block", "inline-block", or "table-row", because reading certain forums suggested it. I also tried different position values ("absolute","relative","static")...
I also tried to wrap the "headline" li-s with div elements and use page-break on the div elements:
<ul>
<div>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</div>
<div>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
</li>
</div>
</ul>
I start to believe that my only option is to re-think the unordered list concept or deliver a pdf-file on print-demand...
I think I would have chose the second method, because I use the li-s to toggle the ul-s in the mobile version.
Is there a fundamental error I do not see yet, or is it simply not possible to control where page breaks are done in unordered lists?
Edit:
I tried different suggenstions of the "possible duplicate thread" and all what it does (I don't know if I am right there and can explain it properly) is that it tries to make page-breaks...
It generates space between the "headline" li-s containing the ul-s... Unfortunately the blank spaces appear in the middle of the pages (print preview and saved pdf) and have a certain height... so it doesn't really push the "headline" li-s on the next page... just slightly down wherever a "headline"li ends
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
Add break-inside: avoid; to ul
I had the same problem adding page-break-after: always to the li. It was fixed by adding a div inside with page-break-after: always followed by an empty div. It works on both Edge and IE11 as well as on Chrome (not yet tested on Firefox).
Amending your example, it should look like the following:
<ul>
<li class="headline">
<h3>Kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
<div style="page-break-after: always"></div>
<div></div>
</li>
<li class="headline">
<h3>Another kind of dishes</h3>
<ul>
<li>Dish 1</li>
<li>Dish 2</li>
<li>Dish 3</li>
</ul>
<div style="page-break-after: always"></div>
<div></div>
</li>
</ul>
Note: Do not repeat the page-break-after in your headline class.
I have a nav that includes a drop down.
<ul>
<li class="n1">Nav 1</li>
<li class="n2">Nav 2</li>
<li class="n3">Nav 3
<ul class="dropdown">
<li>DropDown 1</li>
<li>DropDown 2</li>
<li>DropDown 3</li>
</ul>
I wish to add spacing below the nav, so I use margin-bottom.
But the margin is not correct, it's like the UL is not it's full height, I fix this with:
overflow: hidden
But then the hidden drop down gets cut off.
Any ideas on a fix?
You can try using padding. That will allow you some extra room around each element.
I'm trying to make it so when I click on the href "+ links", my list of links updates to my other list of links.
Is it possible to do this using only html and css? I am looking for documentation on this but I haven't find anything, so I guess I'm looking for a little help.
<footer id="footer-container">
<section id="footer1">
<ul>
<h1>Links</h1>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li> + links </li>
</ul>
<ul>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>+ links</li>
</ul>
</section>
</footer>
Simple answer: Not Possible.
CSS & HTML cannot change state via clicks. You can achieve changing which list is shown when the user hovers over something, but you cannot do this when a user clicks something.
EDIT: To respond to your comment about jQuery:
$('#myID').click(function{
Put your changes here. The above line will trigger when a user clicks on an element with the id of myID.
You could accomplish the menu change by hiding and showing:
$('ul#firstList').hide();
$('ul#secondList').show();
You'll need to use an if/else statement to see which list is currently visible though.
});
I am trying to have a header inside an UL
since you cant have H2 inside a UL
is it ok if use it the way i shown?
<ul>
<li class="head">News roll </li>
<li>News 1</li>
<li>News 2</li>
</ul>
I was told by one of my friend, its not a proper way to do it and he apparently doesn't know the reason.
Yes, it is fine.
As for your structure, maybe you want to use the h2 tag outside of the ul? (Assuming it's going to be a header for that list).
<h2>News Roll</h2>
<ul>
<li>News 1</li>
<li>News 2</li>
</ul>
Its a perfectly valid html. You can't put any tag inside a <ul> though, it has to be directly followed by an <li>. You can however, put any block level element inside the <li>. So you can have H2 inside li.
As far as your friend is considered, he is wrong.