Is it possible somehow achieve to display LI tags from one UL in multiple columns?
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I now I can get it with nested ul tags, but if is it possible it would be great! Even when some li tags would be used to separate columns, but I don't know how to style it.
Add a wrapper around your UL and use the new CSS3 "columns":
<div class="columns">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
And then style with CSS:
.columns {
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
}
Here's a jsFiddle: http://jsfiddle.net/NEHwE/
It is possible to have them floating left, and clearing them every n items. This would simulate a fixed amount of columns, and work in IE9+ and all the other browsers
li{
float: left;
}
li:nth-child(4n+1){ /*replace 4 with the number of columns*/
clear: left;
}
JSFiddle
The old fashion way.
the css style:
.ul li { float: left; margin-right: 20px; }
and the implementation:
<div class="ul">
<ul>
<li>Col 1</li>
<li>Col 2</li>
<li>Col 3</li>
<li>Col 4</li>
</ul>
</div>
Related
How would you make all of the <li> items in a <ul> element to be displayed in a line, and how would you center that entire list on the page? You must apply your CSS directly to the <ul> element itself, you cannot use a parent element.
I tried with display:inline-flex but then you can't align the <li> items in center so any possible way to do this?
Here is my Fiddle but I cannot align the <li> in center as :
https://jsfiddle.net/pymg30yr/
The problem with inline-flex is that your ul will take the width of its content so you cannot center the items inside (as there is no space either side)
In order to fix this, just make the ul flex and then add justify-content:center:
ul {
padding:0;
margin:0;
display: flex;
list-style: none;
justify-content:center;
}
<ul>
<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>
</ul>
html
<ul>
<li>a list item </li>
<li>a loooooooooooooooooooong list item </li>
<li>another list item</li>
</ul>
css
ul {
display: table;
margin: 0 auto;
}
li {
float: left;
margin: 0 10px;
list-style-type: none;
}
demo
http://jsfiddle.net/fNFYr/467/
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
I'm trying to achieve a shopping menu in my html code,
Here is the simple piece of html I am working with so far
<html>
<head>
<style>
.category-list
{
width: 300px;
background-color: #CCC;
}
body {background-image: url("images/background.gif");}
</style>
</head>
<body>
<div class="category-list">
<ul>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul>
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
</body>
</html>
If you take a look at the image below,
The image on the left is what is displaying at the moment,
the image in the middle is what I would like my menu to look like,
The image on the right is just a template to show you what I mean.
So basically the first UL will display, the second UL will display, in one row, then the third UL will be drawn just below the first UL, and then the fourth UL will be drawn below the second UL.
Add this to your CSS:
ul:nth-child(2n-1) {
float:left;
margin: 0;
}
ul:nth-child(2n) {
margin-left: 150px; /* Or how many px you want */
}
JSFiddle
You can try float left and float right, so
<ul class="columnLeft"> 1. ....</ul>
<ul class="columnRight"> 2. ....</ul>
<ul class="columnLeft"> 3. ....</ul>
<ul class="columnRight"> 4. ....</ul>
with stylesheet
columnLeft { float: left;}
columnRight { float: right;}
At your picture, the first UL and the second UL have different heights and the preceding ULs are directly sticked to the bottom of the upper one.
This is why you may create "columns" by classing-left/right.
Or use this sample
<style>
.category-list{
width: 300px;
background-color: #CCC;
}
body {
background-image: url("images/background.gif");
}
.red{
border: solid 1px red;
}
.green{
border: solid 1px green;
}
.blue{
border: solid 1px blue;
}
.yellow{
border: solid 1px yellow;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
<div class="category-list">
<div class="left">
<ul class="red">
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul class="green">
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
</div>
<div class="right">
<ul class="blue">
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul class="yellow">
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
firstly float your <ul>'s
give them a width e.g. width: 50%; for two columns, width: 33% for 3 columns
finally clear the outer div category-list so that your layout is maintained and doesn't messup the rest of the page.
here it is in its entirety:
.category-list:after{
clear: both;
display:block;
content: '';
}
.category-list ul{
float:left;
width: 50%
}
Trying to use a list with 5 (or more items) gotten the code to work but trying to get it to work as the desired image shows.
I'm very new at css so please bear with me. thanks
Any help would be appreciated.
Desired:
Item 1 Item 2 Item 3 Item 4 Item 5
Currently:
Item 1 Item 5 Item 4 Item 3 Item 2
CSS
#navlist li
{
display: inline;
}
#navlist #right
{
float: right;
margin-right: 10px;
}
#navlist li a
{
text-decoration: none;
}
HTML
<div id="navcontainer">
<ul id="navlist">
<li>Item 1</li>
<li id="right">Item 2</li>
<li id="right">Item 3</li>
<li id="right">Item 4</li>
<li id="right">Item 5</li>
</ul>
</div>
Try using display: table in your CSS:
#navlist
{
display: table;
}
#navlist li
{
display: table-cell;
padding-right: 10px;
white-space: nowrap;
}
#navlist li:last-child
{
padding-right: 0;
}
#navlist li.span-full
{
width: 100%;
}
And your markup now looks like this:
<div id="navcontainer">
<ul id="navlist">
<li class="span-full">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Here's an updated fiddle: http://jsfiddle.net/QfD6J/7/
You can do it like this jsFiddle example
Using this CSS
#navlist li {
display:inline-block;
list-style-type:none
}
#navlist li:nth-of-type(1) {
margin-right:60px;
}
You can also use float:left instead of display:inline-block
Just put
float: left;
inside #navlist li and #navlist #right.
Why not using 2 lists with one floating on the right? http://jsfiddle.net/rEc3V/
<div id="navcontainer">
<ul class="nav pull-right">
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul class="nav">
<li>Item 1</li>
</ul>
</div>
CSS:
.nav {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
}
.pull-right {
float: right;
}
this seems to work jsfiddle.net/Z3a6Z/23. thanks everyone for the direction.
Please take a look at the footer of http://www.animefushigi.com/, I am trying to make the affiliate list 2 columns, as 1 is too long.
The code is as follows
<ul class="none"><li><span>Affiliates<em> </em></span></li>
<li>link 1</li>
<li>link 2</li>
etc etc
you can try something like this using only css: http://jsfiddle.net/seler/ThvUJ/ (wont work in ie lte 8)
but i think the best way to do it will be making js script, which will count li elements and add </ul><ul> if necessary. (example: http://jsfiddle.net/seler/ThvUJ/3/)
If the order doesn't matter (and I'm assuming it doesn't because you're using an unordered list), you could achieve this effect with your current HTML. Just float your list elements in such a way that only two of them can fit per line. Below is a quick example of what I mean:
ul {
width: 200px;
list-style: none;
}
li {
float: left;
width: 90px; /* 100 - 5 - 5 */
margin: 3px 0;
padding: 0 5px;
}
li a {
width: 90px;
display: block;
}
maybe you can make nested ul like this:
<ul class="none">
<li><span>Affiliates<em> </em></span></li>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
<ul>
<li>link 3</li>
<li>link 4</li>
</ul>
</ul>
If you want your footer to be a specific height, you can do this: http://jsfiddle.net/NfMPX/
Basically, set the height of the ul and float and set a width for the lis and they will automatically wrap.