Scrollable link list HTML CSS - html

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.

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>

How to get adapted width for inline-table of nested lists?

This is how I'm displaying a nested list jsFiddle. As you can see the 'columns' are not aligned correctly as the content has different length. The elements - as example - should be at the right border.
Is it possible to get the width of each 'column' in a relative or fixed size? The complete list should have a 100% width.
Visibly I want to get this: https://jsfiddle.net/bsrms9ax/2/
ul {
display: inline-table;
border: 1px solid #000;
padding: 0px;
list-style: none;
}
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
<li>Longer Main Title
<ul>
<li>Long Title 1
<ul>
<li>Element 1</li>
<li>Elem 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>

I edited the code from Display nested list like a table , also a post by you.
If this is not you want, i will do as much i can to modify it and make it work.
// ADD SOME CODE
// www.Agary.info Agario server ;-)
// BEST LUCK IN YOUR CODE BRO
body>ul {
display:table;
}
li {
display: flex;
display: -webkit-inline-flex;
border: 1px solid #000;
padding: 0px;
list-style: none;
}
<html>
<!-- Added some css..-->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
</head>
<body>
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
<li>
</li>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
EDIT: I see that this is not what you want, but maybe will be useful for any other user. I will try to modify it :)

Foundation, nav bg

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>

How can I make only the <a> tag clickable not the entire list item clickable in an un-ordered list?

I just want the text to be clickable not the entire list item block.
<a class="menu_head">Hello</a>
<ul class="menu_body">
<li>Sub-menu 1</li>
<li>Sub-menu 2</li>
<li>Sub-menu 3</li>
<li>Sub-menu 4</li>
<li>Sub-menu 5</li>
<li>Sub-menu 6</li>
<li>Sub-menu 7</li>
</ul>
</body>
</html>

add this to your css
a {display:inline-block;}

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