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.
Related
Without adjusting my padding for my 'nav ul li' because its used for spacing out navigation links, how can i fill the full width of the dropdown links background 'nav ul li ul li' as it only seems to fill half of the background color.
(HTML):
<nav>
<ul>
<li>Num 1</li>
<li>Num 2</li>
<li>Num 3</li>
<li>Num 4</li>
<li>Num 5</li>
<li>Num 6
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Num 7</li>
</ul>
</nav>
(css)
JSFIDDLE
Note: Choosing not to upload CSS as i have to use the Harvard referencing system and any similarities compared with online snippets returns as a higher plagiarism percentage even if this is my own work, so i'll choose to upload more precise code on JSFiddle as its not returned from the plagiarism test.
Here is a working demo
Change your padding from li to a:
nav ul li a {width:65px; display:inline-block; padding:0 30px}
and add the display and float proprieties to second-level li:
nav ul li ul li { padding:0; border:none;display: list-item;float: none }
well a quick way to fix this is instead of adding padding you just add the 30px on the right and left to the total width of the nav ul li which ends up being 125px
nav ul li {
border-right: 1px solid #355e7f;
display: inline-block;
float: left;
width: 125px;
}
Here is an updated JSFIDDLE
Hope that helps!
I am trying to create a dropdown menu in CSS, however it will have about 21 sub-items. I would therefore like to display them in 3 columns of 7, however I cannot figure out how to do so.
I have created a jsFiddle with a simple example, how can I ammend the CSS so that sub 6-10 are displayed to the right of sub 1-5, as opposed to below?
It should look like the image below, which was created in MS Paint.
EDIT :
jsFiddle
<nav>
<ul>
<li>
Top Level Group
<div>
<ul>
<li>Sub One</li>
<li>Sub Two</li>
<li>Sub Three</li>
<li>Sub Four</li>
<li>Sub Five</li>
</ul>
<ul>
<li>Sub Six</li>
<li>Sub Seven</li>
<li>Sub Eight</li>
<li>Sub Nine</li>
<li>Sub Ten</li>
</ul>
</div>
</li>
</ul>
</nav>
Use can use float: left to make them stack
Working sample: http://jsfiddle.net/07spd07b/2/
#top-level-group{
width: 200px;
}
#top-level-group ul{
float: left;
}
In the sample I changed the original position from -9999px left so you can see it right when you open the jsfiddle. Set the width depending on the content you want to put inside. If you want more columns give it more width.
UPDATE
Here is the working sample with 3 columns and the clearfix included:
http://jsfiddle.net/07spd07b/10/
I added class clearfix:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
Which clears floating elements and set the width: 250px; to fit the 3 columns. Hope it helps.
It can be done quite easily by using display:inline-block;:
nav ul li ul{
display:inline-block;
margin: 0;
padding: 0;
}
Then you just need to give the div a width:
nav ul li div {
position: absolute;
left: -9999px;
width:300px;
}
JSFiddle Demo
To add more columns, just make more <ul>'s and set the width wider.
please now check this link .. I've added two class in <ul> tags and styles.
http://jsfiddle.net/07spd07b/
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>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML List element : Sharing the parent width into equal parts
I have a div that contains a ul element:
<div style="width: 800px">
<ul style="width: 100%">
<li>...</li>
....
<li>...</li>
</ul>
</div>
How do I automatically give the li elements equal space throughout the ul?
If you are looking to span a list horizontally, this should suffice:
HTML
<div>
<ul id="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
CSS
#list li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
In this case, I adjust the padding to span the items evenly as I would like them to be.
I would use this css:
#list li
{
display: inline;
list-style-type: none;
padding-right: 20px;
***width:100px;***
}
I have a parent <ol> and couple of <li> items in that.
<ol style='width=800px;display :block;float:left;'>
<li style='display :block;float:left;'> Item 1 </li>
<li style='display :block;float:left;'> Item 2 </li>
<li style='display :block;float:left;'> Item 3 </li>
<li style='display :block;float:left;'> Item 4 </li>
</ol>
Is there any way my list item can be arranged in a way where it will equally divide the parent width (800px), and each item will have the same amount of width? I.e. each <li> will take 200px width.
I don’t want to hardcode the value. Is there any style attribute which will do that?
I dont want to hardocode the width like 20 % or something because the list items are dynamically added.it may be 4 or 5 or 6 sometimes
Try this: http://jsfiddle.net/QzYAr/
For details on display: table-cell: Is there a disadvantage of using `display:table-cell`on divs?
table-layout: fixed ensures equal width li elements.
CSS:
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
HTML:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
I think this is what you're asking for. It required jQuery though.
http://jsfiddle.net/sKPLQ/3/
CSS:
ul {
width: 800px;
}
li {
display: inline-block;
float:left;
}
JS:
var evenWidth = $(".list").width()/$(".list li").size();
$(".list li").css("width", evenWidth);
HTML:
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here is a minimalistic design. It will produce responsive equal distance cells
<style>
div { border:1px solid red; width:400px; height:400px; }
ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>
<div>
<ul>
<li>CELL 1</li>
<li>CELL 2</li>
<li>CELL 3</li>
<li>CELL 4</li>
</ul>
</div>
The magic is width:1%; position:relative; display:table-cell;
As Renesis pointed out, I think table cells is the only option, unless you're scripting it. Although you can use table-cell in CSS.
#menu {display: table-row;}
#menu li {display: table-cell;}
..which will simulate the behaviour. Note that in IE it will, as usual, cause problems in the lower versions.
Please note: The original poster edited their question to exclude percent after I posted this answer.
Yes, you simply need to figure out the percent that each will use. In this case, 20%.
Also, you have some slight problems with your HTML (missing quote and width= instead of the correct width:).
<style>
ol { width:800px;display :block;float:left; }
li { border:1px solid black; display :block;float:left; width:20%; }
</style>
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
Update:
While you can get away without defining pixels by using a percentage, there is no way with block elements to get away without defining any width value (and width values are only valid as a unit or a percentage).
Not that I'm suggesting you use tables, but table cells are the only elements in HTML that sort of behave like what you are asking for.