Foundation, nav bg - html

I am working with Foundation for the very first time for one of my college assignments. After extensive tests and solution searching, I think I finally have to ask for help.
How do I alter the background-color of section class="top-bar-section"? I've been trying to temper with it in CSS, but nothing has worked. =(
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</section>

Related

Material Design - Secondary Scroll Bar for List Component

In my project I'm using the code from google's material design website: https://material.io/components/web/catalog/lists/
It work great, however, as more list entries are added I have to scroll down to see them. The problem is that to scroll through the list, I am scrolling past my page header.
I'm asking if anyone knows how to add a 'secondary scroll bar' (I don't know what you call them) that when used only scrolls through the list.
An example of what I'm trying to achieve is here: https://stackoverflow.com/a/21998914/8625593
Thanks in advance!

Limit the height on the list container. It will cause a scroll bar to be shown or add a scroll vertical scroll bar with the property 'over-flow-y'.
For example:
#listContainer{
max-height:200px;
width:18%;
overflow:hidden;
overflow-y:scroll;
}
#container {
overflow-y:scroll
}
<div>
<h1>Headline</h1>
<div id="container">
<ul id="listContainer">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>Link 11</li>
<li>Link 12</li>
<li>Link 13</li>
<li>Link 14</li>
<li>Link 15</li>
<li>Link 16</li>
<li>Link 17</li>
<li>Link 18</li>
<li>Link 19</li>
<li>Link 20</li>
</ul>
</div>
<div>Possible Summary Information</div>
</div>

Display ul li items in two columns with a scrolling vertical overflow

I'd like to display two columns of li objects within a ul, with a fixed height where the items scroll vertically.
I'm creating the columns of li objects using the css columns rule, but at the moment the result ignores the number of columns I specify, and the overflow-y rule, and overflows horizontally instead.
Does anyone know how to get the ul to scroll vertically with a 2 fixed columns instead?
Note - I need to keep all the lis within a single ul as they are being used as part of a JQuery Sortable control.
Markup
<ul class="twoColsVerticalScroll">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
... lots of lis ...
</ul>
Css
.twoColsVerticalScroll {
height: 100px;
width: 400px;
overflow-y: scroll;
background-color: red;
-moz-columns: 2 100px;
-webkit-columns: 2 100px;
columns: 2 100px;
}
Result
https://jsfiddle.net/xh4kq0h5/

Wrap your list in div with overflow: scroll and set its sizes. Then set width of columns to 50%; Don't forget to reset margins and paddings of ul.
Update
Add FF support.
ul {
padding: 0;
margin: 0;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 50%;
-moz-column-width: 50%;
column-width: 50%;
}
div {
width: 420px;
height: 200px;
border: 1px solid;
overflow-y: scroll;
}
<div>
<ul class="twoColsVerticalScroll">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
</div>

Why First-of-type in ul list is not working

Code
ul a:first-of-type {
color: red;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12
</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
Result Fiddle
Why is the a item 12 selected? It is not the first sibling of its type, it is the last.

:first-of-type refers to the type so because a is child of the li and as you can see there is no more a elements as siblings within those li so it will select every first-of-type of a within the li
take a look at this snippet with a li with 2 a being child of li it will select only the first a:
Snippet
ul a:first-of-type {
color: red;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3a
Item 3b
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12
</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
If you want target only the item 3, you can use nth-of-type on li, like this:
Snippet
ul li:nth-of-type(3) a {
color: red;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12
</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>

Scrollable link list HTML CSS

I am in the need of adding some more functionality to a couple of list items inside an ul, and I would like to know how I can use scroll functions to be able to scroll up and down because of the amount of items.
This is my list:
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>

Im not exactly sure if this is what you're searching for, but you can wrap the list with a element which has a defined height.
<div id="wrapper">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
...and the css:
#wrapper {
overflow:auto;
height:200px;
}
So if the list is longer/higher than 200px (or what ever you've specified) a vertical scrollbar will show up.

Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }

Is this HTML structure valid?
<ul class="blog-category">
<div class="three column">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
<div class="three column">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</div>
<div class="three column">
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</div>
</ul>
I am inserting li's inside div which is within ul. What do you think? Is this stucture semantically valid and will that be recognized as a single list?

No, div is not allowed as a direct child of ul. Whenever you're in doubt, validate your page with W3C or check the corresponding article on W3C:
4.5.6 The ul element
Categories
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Zero or more li elements.
Content attributes:
Global attributes
DOM interface:
interface HTMLUListElement : HTMLElement {};
Instead you could use
<ul class="blog-category">
<li class="three column">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="three column">
<ul>
<li>Item 4</li>
...
</ul>
</li>
</ul>

<div>'s aren't technically valid inside of <ul>'s. W3 validator returns this result:
Element div not allowed as child of element ul in this context
It would make more sense to group the code you have different, such as:
<div class="blog-category">
<ul class="three-column">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</div>

No, this is not valid, neither in HTML4, nor in XHTML or in HTML5.
If you'll validate this against the w3c markup validator you'll probably get something like:
Element div not allowed as child of element ul
More about lists can be found here.

It is valid also do the following:
<ul>
<li>
<div>Title</div>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>
<div>Title</div>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
I've checked in http://validator.w3.org/check