I would like to make a part of my web to scroll with a page when it reaches the top while scrolling. So it gets stuck on the top and scrolls while I am scrolling. Something like this:
http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/
But can it be done without jQuery, just with pure CSS3 and html5?
It's called a persistent header, it's too long to explain so here's a link :
http://css-tricks.com/persistent-headers/
Maybe you can try this:
<ul class="scroll">
<li>Item 1 0</li>
<li>Item 1 1</li>
<li>Item 1 2</li>
<li>Item 1 3</li>
<li>Item 1 4</li>
<li>Item 1 5</li>
<li>Item 1 6</li>
<li>Item 1 7</li>
<li>Item 1 8</li>
<li>Item 1 9</li>
<li>Item 1 10</li>
<li>Item 1 11</li>
</ul>
And style.css
ul#css3menu1 ul.scroll{
max-height: 135px;
overflow-y: auto;
overflow-x: hidden;
}
Related
I'm trying to create a "dropright" css but I'm unable to make the nested ul to behave well
this is my mark up
.container{
display: flex;
position: relative;
}
.container: first-child{
left:0;
margin-left:0px;
}
.ul-items{
list-style: none;
position: absolute;
top: 0;
left: 100px;
width: 100px;
}
<div class="container">
<ul class="ul-items">
<li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
</li>
</ul>
</div>
This comes out the way I want but, I can't set the margin of the first ul so as not to have the 100px what am I doing wrong?
here is the pen:
codepen
Edit
I have solved this problem, now I have a nasty case of <li> with no content and setting border bottom exposes it.
** Edit **
How I want it to dislay
To resolve your query, Flexbox is very useful for a responsive design and adjusting multiple components inside a div container. You just have to add a few more properties to have the configuration you wish for.
You can try using the three <ul> unordered lists under the parent container.
HTML:
<form action="/my-handling-form-page" method="post">
<div class="container">
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
<ul class="ul-items">
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
<li>Item one</li>
</ul>
</div>
</form>
CSS:
*{
margin:0;
padding: 0;
}
.container{
display: flex;
flex-direction: row;
justify-content:flex-start;
align-items: center;
}
.container:first-child{
margin-left:40px;
}
.ul-items{
list-style: none;
margin-right: 60px;
}
Flexbox provides a lot of other options too like justify-content: space-around or justify-content: space-evenly etc. If you are more interested in learning about flexbox, you can use https://flexboxfroggy.com/ game to learn flexbox in a fun way. It's one of my favourites and fun way to learn Flexbox.
I'd like to create a multi column list like this:
https://jsfiddle.net/37dfwf4u/
No problem when using a different list for each column:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
ul {
display:inline-block;
}
However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically?
E.g. by use of flex layout which I'm not yet familiar with?
Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:
ul {
height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<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>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>
Here's another possibility, added half a year later after the comment by #Andrew Koper:
You can also use the colummn-count parameter, which doesn't require a fixed height (and also not flex), but defines a fixed number of columns. So in the example below, even just two list items would be broken into two columns of one list item each:
ul {
column-count: 2;
}
<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>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>
Consider using CSS3 Multi-column Layout for that:
CSS3 Multiple Columns
You can do that using just one list and define the number of columns with CSS. If you check CSS3 Multi-column layout browser support here you can see partial support by most of the browsers, because they do not support break-before, break-after and break-inside properties. But they do support the properties you will need to create a multi column list with a prefix.
.container {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
ul {
margin: 0;
}
<div class="container">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
I've done a few things with css columns and I really like them, but today I stumbled into a problem for which I just won't find a solution:
I have a page with multiple lists. These lists have dynamic contents and open up in small popups. The old behaviour was, that the list contents have been shown in a single column (normal HTML <ul>). The new behaviour should be that they are displayed in up to 4 columns. So I have extended my CSS with ul { column-count: 4; }. This works pretty nice for lists with many entries.
Now to my problem: sometimes there are lists with less then 4 entries. If that's the case, the popups for the lists still span 4 columns, with only 2 columns filled. So the popup for the less-filled list is still as wide as a popup with a full-filled list. For example:
ul {
background-color: lime;
list-style: none;
column-count: 4;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
My question now is: How do I hide those empty columns? I want a popup with a less filled list (no. of entries < 4) to be less wide then a popup with a full-filled list. I'd like to find a CSS-only solution, as I didn't intend to count the entries and add extra classes to decrease the column-count.
The order in which the elements are displayed is important: top-down and then left-right.
I've tried using flexbox, but there I have to set a fixed width for the container, which just results in the popups being too wide as well.
Edit for clarification:
The dotted line should be the right border for the second popup.
The diagonal lines mark the empty space I need to be gone.
Edit further approaches:
Another approach posted by user 'Gobbin' as answer, is to use flex. But as I mentioned, I'd have to set some fixed width. Here it is a max-width for the list itself, so that wrapping works and a fixed width for the list elements. I don't want to have either. Also this approach lists the items from left to right and then from top to bottom, which is also not what I need:
ul {
list-style: none;
display: inline-flex;
flex-wrap: wrap;
max-width: 16em;
float: left;
clear: both;
}
li {
background-color: lime;
width: 4em;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
Maybe this is an option for you, although the columns are spread across the available width.
var maxColumns = 4;
$("ul").each(function() {
var numColumns = $(this).find("li").length;
$(this).css("column-count", numColumns);
$(this).css("width", 25*numColumns + "%");
});
ul {
background-color: lime;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
I think this is your desired layout. Edited my answer as the list items still had margins.
ul {
list-style: none;
display: inline-flex;
float: left;
clear: both;
}
li{
background-color: lime;
width: 100%;
display: inline;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
i need to create UL list in html 4X2
something like this
item1 | item2 | item3 | item 4
item5 | item6 | item 7| item 8
Is that possible to do with ul list?
I know how to create klasic licst.. like
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
You can use the float CSS property to achieve this.
A JSFiddle demo.
li {
float: left;
width: 25%;
}
<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>
</ul>
Just show li element inline and make two separate lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
And the CSS:
li { display:inline; }
If you want more control, you can put inline-block and set width, margin, etc.
JS Demo
Like this
demo
css
ul{
margin:0;
padding:0;
}
li{
display:inline-block;
border:1px solid black;
margin:5px;
}
You can add max-width to UL to width that is not more than four ite
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/