CSS Only method to horizontal scrolling [closed] - html

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 7 years ago.
Improve this question
I have a nav bar that I'm scrolling horizontally and on hover show the child elements.
http://jsfiddle.net/vwwd6mec/
However, once the child elements are displayed i'm then able to scroll down. Anyone know how to prevent this so the on hover (child list) displays outside my div?
This is my HTML:
<body>
<div class="container">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>
<span>Dropdown 1</span>
<ul>
<li>Sublink 1</li>
<li>Sublink 2</li>
<li>Sublink 3</li>
<li>Sublink 4</li>
<li>Sublink 5</li>
<li>Sublink 6</li>
<li>Sublink 7</li>
<li>Sublink 8</li>
<li>Sublink 9</li>
</ul>
</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>
<span>Dropdown 2</span>
<ul>
<li>Sublink 1</li>
<li>Sublink 2</li>
<li>Sublink 3</li>
<li>Sublink 4</li>
<li>Sublink 5</li>
<li>Sublink 6</li>
<li>Sublink 7</li>
<li>Sublink 8</li>
<li>Sublink 9</li>
</ul>
</li>
</ul>
</nav>
<p>Desire is to have nav bar scrollable horizontally and drop downs that aren't cut - possible without JavaScript?</p>
</div>
</body>


Just a "proof of concept", but try this fiddle
it does:
keeps the nav items' children attached to the parent
displays the dropdowns over the page contnet
it doesn't:
keep the scrollbar immediately below the navbar (instead it's below the page's content)
recap:
<body>
<div class="container"> <!-- positioned relatively so children
namely .non-scrolling-container
can be attached to it -->
<div class="fake-scroll-area"> <!-- scroll is applied to this -->
<nav> <!-- scrolls with .fake-scroll-area -->
<!-- nav contnet -->
</nav>
<div class="non-scrolling-content"> <!-- positioned absolutely
with respect to .container -->
<!-- where normal page stuffgoes -->
</div>
</div>
</div>
</body>
it kind of fakes what you're looking for.


The issue has to do with position: relative on the parent elements. If you add it to the direct parent <li>, then the absolute positioned child element will be nested inside all of the containers around that <li>. But if you only add position: relative to .container instead, then the absolute element will appear outside of the container.
See this forked fiddle: http://jsfiddle.net/tnp7hmqv/1/
The sublinks should now be appearing on top of the container.


Not sure if this is what you want. I have found this online at http://www.bootply.com/l2ChB4vYmC
The solution shows how to make a toggle side button on the nav bar.
That building such long nav bar will need javascript work I think.

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 display half of the text of a <li> element in a new line [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<html>
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
</html>
Here, in the above code, how can I display half the text in the <li> tag in next line?

<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to <br/> display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
Just add the <br/> tag where you want the next line to start.
Also if you want to do it using only css just make width:50% in the styling.
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li style="width:50%;">Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>

This is a beginner level question, an <ul>'s <li> is a block element, unless you assign a width to the parent or the <ul> itself - text won't wrap! FYR, I just assign width to parent <ul>, you can assign a width to the child <ul>, too:
ul {
width: 200px;
}
Here is a fiddle example
I hope this helps!

How to align something inside an <a>?

I have a very good menu right here:
http://jsfiddle.net/y9jbQ/
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
the problem is now, let's say I want a right-arrow image, aligned to right in case when there's an other sub menu. Putting inside isn't healthy thing. I don't want to create anything to copy 's behaviour. So,
<li><div float left><div float right></li>
is not a good way.

Use a CSS Child Selector:
ul.root > li > a { /* css declarations */ }
This will only apply the rules to the direct descendants of the root ul element.
Illustration:
<ul class="root">
<li>
<!-- MATCH -->
</li>
<li>
<!-- MATCH -->
<ul>
<li>
<!-- NO MATCH -->
</li>
</ul>
</li>
</ul>

DIV Between List Items

How can I place a div in between two list items, adding a margin on both sides?
Here is the layout I am trying to achieve: Link to Image
Below is the code I am trying to use to make this happen.
<div id="logo">
Logo Image
</div>
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Is there a way to do this without adding individual styles to the 2nd and 3rd list items? That's the only way I can think of doing this.

Get rid of the <div>, and give the <li> that you would want the <div> in its class:
http://jsfiddle.net/charlescarver/jTYnW/
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="logo">
Logo Image
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>​

You can try with this code
<ul>
<li>
<div>test</div>
</li>
<li>
<div>test</div>
</li>
<li class="specific">
<div>test</div>
</li>
<li>
<div>test</div>
</li>
</ul>
Adjust css to div

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