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
Related
I'm trying to show a horizontally center-aligned Foundation 6 dropdown. I'm attempting to use a dropdown as a tooltip, because it better fits my needs and allows for rich HTML to be inserted into it, where the tooltip does not.
Foundation 6 dropdowns can be positioned by adding classes .top .right .bottom .left. These classes are parsed by the Foundation core Javascript and then the element is given dynamically calculated top: and left: attributes.
Because of this, adding any left, or transform: translate properties to the element are voided by the fact that Foundation takes this into account when dynamically calculating the positioning attributes.
Any ideas short of writing a different class into the javascript?
Use text-center.
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu text-center">
<li>Item 1A</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
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.
Using a CMS for a webshop.
The platform is currently generateing a list for a menu like this:
<ul class="menu">
<li class="item*">
Category 1
<ul class="level 1">
<li class="item*">Item 1</li>
<li class="item*">Item 2</li>
<li class="item*">Item 3</li>
</ul>
</li>
<li class="item*">Category 2</li>
<li class="item*">Category 3</li>
</ul>
I want to add bullets to this list and was thinking of using li:before and have a content:url(image.png).
The problem is that I want a diffrent image for the "Categorys" and the "Items"
How can I slove this?
Tried ul.menu li:before but that selcets all li in the tree.
The classes that is generated on the li's I dont have mutch control over. The classes generated on the li´s is like "item 1" "item 2" and so on
Is this possible with css or do I need to use jquery?
You are using the space selector to assign your bullet image, which selects all descendants and therefore will add a bullet image to deeper levels too.
Instead, use the greater-than selector to select only immediate children. Like this, you only select one level at a time.
ul.menu>li:before {
/* 1st level */
}
ul.menu>li>ul>li:before {
/* 2nd level */
}
ul.menu>li>ul>li>ul>li ...
I am getting a little confused by this.
Currently have a table, with two columns.
On the left we have a description, and on the right a fact.
The left hand side is usually one line, but might wrap over onto two.
The right hand side is often 3, 4 or more lines.
How can I arrange this using CSS instead of tables.
Obviously the two sides have to line up for each row of information.
desc1 fact 1
desc2 fact 2
more to fact 2
desc3 fact 3
etc.
Like this?
HTML
<ul class="sublist">
<li>Item 1</li>
<li>Description 1</li>
</ul>
<ul class="sublist">
<li>Item 2</li>
<li>Description 2 / Description 2 / Description 2 / Description 2</li>
</ul>
<ul class="sublist">
<li>Item 3</li>
<li>Description 3</li>
</ul>
CSS
ul.sublist > li {
display: inline-block;
max-width: 150px;
vertical-align: top;
}
Demo
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>