I have a list of ul with 9 items, that I want to split into 2 columns. The first one to have the first 4 items and the second column to have the other 5 items.
I used this css
ul { -webkit-columns: 2; -moz-columns: 2; columns: 2; }
HTML
<div class="footernav">
<ul class="footer-lt">
<li><a>Home</a></li>
<li><a>Resort Overview</a></li>
<li><a>Photo Gallery</a></li>
<li><a>Contact Us</a></li>
<li class="footertextcolor">Phone</li>
<li>+000 60 275-737<li>
<li class="footertextcolor">Address</li>
<li>Armenia, Yerevan,</li>
<li>G. Hovsepyan </li>
</ul>
</div>
but i get 5 items in the first column and 4 in the second. Is there a way I can specify where the break happens?
Honestly, you are probably better off making 2 ul tags. There does not seem to be a way to accomplish 2 unequal columns using that CSS property, unless of course you throw some blank li tags in there when needed.
Related
I need to select the last element A, from an ul li list
CSS like .items:last-child, get the li, but i need only the A related to LINK 3
<ul id="menu">
<li id="items">Link 1
<li id="items">Link 2
<li id="items">Link 3
</ul>
you can use > a a to get immediate child of type a directly:
.items:last-child > a {
/* your css here... */
}
by the way, just noticed that you are using id attribute for items, in that case you need to switch to:
#items:last-child > a {
/* your css here... */
}
I'd like to position these three list items so that they both float to the right of the page and item 1 sits directly above items 2 and 3.
This is the html bit:
<div class="header-text">
<div class="header-contact">
<ul class="header-contact-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
Currently, they all float to the right as I've added float: right to list elements (interestingly, item 1 is the farthest right, then item 2, then 3), however, they are still on the same line. What am I missing? I cannot cheat my way out of this with padding-right as I will need to change its colors as well.
Not sure if I understand your question, but if you want to align the list to the right with item 1 on one row and item 2 and 3 on the next row, this is how you could do it.
Add display: inline-block; to items 2 and 3:
.header-contact-list li:not(:first-of-type) {
display: inline-block;
}
and add float: right; to .header-contact
I have a jquery mobile listview, and I'd like to make one of the li items appear first in the list via css without moving the li item in the code. I don't want the li item to be in a fixed position (in other words, I do want it to scroll with the list). I just want it to appear as though it were the first li item.
Here is the code for the list (just 2 li items). So I'm wondering how I could style the second li to appear first.
<div data-role="page" data-theme="c">
<div data-role="content">
<ul data-role="listview" data-inset="false"><li>
<a href="http://domain.com/1XyK?id=1117448578">
<img src="https://domain.com/moreicon/EN/bundle-loseweight.png" />
<h2>Healthy Weight Loss</h2>
<p>Now includes Mindful Eating!</p>
<span class="ui-li-count">NEW</span>
</a>
</li>
<li>
<a href="http://domain.com?id=977040364">
<img src="https://domain.com/moreicon/EN/bundle-top10.png" />
<h2>Our Top 10 Apps!</h2>
<p>Save BIG on our chart toppers!</p>
<span class="ui-li-count">SAVE</span>
</a>
</li>
Is that possible?
One possibility, if your browser support allows for it, is Flexbox. This allows you to control the order of elements by using the order property on the child.
For example, if your HTML is:
<ul>
<li>First</li>
<li>Second</li>
</ul>
Then, you can style the UL as a columnar flexbox in CSS:
ul {
display: flex;
flex-direction: column;
}
And you can assign a negative order to the child you want to bring to the top:
ul li:nth-of-type(2) {
order: -1;
}
Working example: http://codepen.io/honzie/pen/oLxENz
I have standrat floating grid, somethig like:
ul li{
width:300px;
float:left;
}
I need to 4th element go under 3thd one. Like on the picture.
thanks for your advise!
Bit of a duct tape solution but could it be fixed by putting Column 3 & 4 in the same container?
eg:
<ul>
<li>
(Column 1)
</li>
<li>
(Column 2)
</li>
<li>
<div style="float:left;">
(Column 3), (Column 4)
</div>
</li>
<li>
(Column 5)
</li>
</ul>
So here is one solution depended on ForeverStuck idea.
Little jQuery:
//Select element3 and 4 wrap them as li
$('ul > li:nth-child(3), ul > li:nth-child(4)').wrapAll( "<li />");
//Then unwrap inside li elements, so 3 and 4 become 3 element
$('.homepage .box-category > li > li > a').unwrap();
I want to create a list in html that has reversed ordered, non-consecutive years instead of numbers. It should look like this:
2009 Item 7.
2007 Item 6.
2006 Item 5.
2004 Item 4.
2003 Item 3.
2002 Item 2.
2000 Item 1.
I have code that works for reverse ordering number lists:
ol {
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
<ol>
<li value="5">Item 5.</li>
<li value="4">Item 4.</li>
<li value="3">Item 3.</li>
<li value="2">Item 2.</li>
<li value="1">Item 1.</li>
</ol>
This gives me:
5. Item 5.
4. Item 4.
3. Item 3.
2. Item 2.
1. Item 1.
If I simply add in a year:
<ol>
<li value="2002">Item 5.</li>
</ol>
The '2002' is moves inside the area for the item, instead of being set out to the left. Is there an easy way around this?
Steve, it seems that a definition list would better suit your needs. Technically, though the year is a number, it is not functioning as the numbering of your list (inferred from you not wanting the period after the year). You can style the dl to look similar to the ol and have greater control over the year in addition to the list item.
dt {width: 3em; clear: both;}
dd, dt {float: left;}
<dl>
<dt>2007</dt>
<dd>Item 6</dd>
<dt>2006</dt>
<dd>Item 5</dd>
<dt>2004</dt>
<dd>Item 4</dd>
<dt>2003</dt>
<dd>Item 3</dd>
<dt>2002</dt>
<dd>Item 2</dd>
<dt>2000</dt>
<dd>Item 1</dd>
</dl>
It seems to me that you're applying the style to the wrong element.
If you change the css to this:
li {
margin-left: 0;
padding-left: 1em;
text-indent: -1em; }
It fixes your problem straight away.
Note that this may or may not be the result you were looking for, but for what I understood
On an ordered list, value attribute on the <li>, which is fairly self-explanatory.
<ol>
<li value="2007">Item 1</li>
<li value="2005">Item 2</li>
<li value="2004">Item 3</li>
</ol>
I'm not sure of your exact issue with numbers moving - I tried Firefox, Chrome and Opera and they all played ball. If you're seeing issues in Internet Explorer, make sure you have a doctype so you don't go into quirks mode.
I did see a small issue in Chrome, where the first number was cut off at the edge of the screen. However, this is easily fixed by changing the left-padding (or margin) to anything over the default 40px, if the same thing happens for you.
Interestingly, HTML 5 defines a reversed attribute that would be closer to what you want, but that isn't well-supported yet. Also note that while the value attribute is deprecated in HTML4, it is not deprecated in HTML5, so use it to your heart's content!
This works for me
<ol type="1">
<li value="2007">item 1</li>
<li value="2005">item 2</li>
<li value="2004">item 3</li>
</ol>