I'm brushing up on my CSS skills by going through these challenges, and I'm having trouble with the very first one (see image below).
strong text
I can center the text, but the bullets aren't getting centered with it. See JSFiddle
li {
text-align:center;
}
<ul>
<li>List Number 1</li>
<li>List Number 2</li>
<li>List Number 3</li>
<li>List Number 4</li>
<li>List Number 5</li>
</ul>
The easiest way might be setting list style position to inside.
li {
list-style-position: inside;
text-align: center;
}
<ul>
<li>List Number 1</li>
<li>List 2</li>
<li>List Number 3</li>
<li>List 4</li>
<li>List Number 5</li>
</ul>
Add this code in your css its work.
li {
text-align:center;
list-style-type:none;
}
li:before{
content:'\2022';
margin-right:5px;
}
Here is Demo : http://jsfiddle.net/gyQ2W/1/
Use :before pseudo-element. As content in it you can put images, HTML caracters, etc... Updated your fiddle
https://jsfiddle.net/shbfsoq6/2/
Related
I have an html list that I need to get split into two columns. I'm curious if I can do this purely in CSS without changing the HTML code.
For example:
I have a list like this:
Item 1
Item Longer 2
Item really long 3
Item this 4
Item five 5
Item 6
But I want to display the list as two columns with equal width, but without changing the HTML code.
I've tried using child selectors and inline display but I can't figure out how to get the second column to start evenly.
This is what I'm trying to achieve in CSS. That way if I keep adding to the list, it keeps alternating the content between columns, as well as always having the second column be even.
li {
display: inline;
}
<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>
https://jsfiddle.net/u85avecb/
Try using a flexbox.
ul {
display: flex;
flex-direction: column;
list-style: none;
max-height: 60px;
flex-wrap: wrap;
}
<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>
You can use columns like this without changing your html code :
ul {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
<ul>
<li>Item 1</li>
<li>Item Longer 2</li>
<li>Item really long 3</li>
<li>Item this 4</li>
<li>Item five 5</li>
<li>Item 6</li>
</ul>
I need to add text before a horizontal navigation menu at the first, second and third levels of links.
The levels are achieved using nested lists.
If I want place text before a level of links, is it considered bad practice to add the said text as a list item?
Example:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li{
float:left;
display:block;
margin-left:20px;
}
<ul>
<li>Some arbitrary text:</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
I would say it goes against best practice, I would suggest doing
<span>Some Text:</span><ul>..</ul>
This keeps your html clean and more flexible.
I have a problem with displaying a big ordoned list. Here I wrote just for 1000, but imagine how will look for 100000 elements.
Anyway maybe that won't be a problem to big, but after 9999, the 1 from 10000 get hidden.
1. Element 1
2. Element 1
10. Element 10
100. Element 100
1000. Element 1000
To avoid that I would like to display it like:
1. Element 1
2. Element 1
10. Element 10
100. Element 100
1000. Element 1000
I tried to put float:right on li and ol li but didn't help.
Is there any css trick that can help with this?
.list ol li {
margin-left:55px;
}
//margin-left:55px to avoid hidding first digit. Ugly method, I know.
.list ol li {
float:right;
position:relative;
}
.list is the class containing this ordoned list.
Use this to left align the ordered list -
HTML:
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
<li>Element 8</li>
<li>Element 9</li>
<li>Element 10</li>
<li>Element 11</li>
</ol>
CSS:
ol{ list-style-position: inside;}
Cheers!!!
Demo
You can use list-style as
ol {
list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}
You need list-style-position : inside as below
ol {
list-style:decimal inside none;
}
Read here for more details
ul{border:1px solid red;padding:0;margin:0;list-style:decimal inside;position:relative;}
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
I have a very specific question and I hope thats okay when asking it here.
What of the following is the correct usage:
1)
<div id="more">
<div class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
</div><!-- #more END -->
2)
<section id="more">
<div class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
</section><!-- #more END -->
3)
<section id="more">
<section class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
<section class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
<section class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
</section><!-- #more END -->
Note: the code snippet is placed at the bottom of the site and contains links to partner sites, links to other pages and also insite links linking to another category/page.
If you think none of the above examples is correct, could you maybe post what you think is the best solution here?
And in case 3) is best: Than i should also change h4 to h1 and put them into header ?
None of the above.
Section is defined: "For a section in a document. Such as chapters, headers, footers, or any other sections of the document". Many HTML5 elements, such as section, do not offer new functionality, but instead document semantics (as you have tagged:). Section and div may seem a like; section is actually a div, which in itself contains meta information.
There are 3 general rules of thumb for section:
-Don’t use it just as hook for styling or scripting; that’s a div
-Don’t use it if article, aside or nav is more appropriate
-Don’t use it unless there is naturally a heading at the start of the section
So it really depends on your document's structure. In the HTML, "more" contains a section of hyperlinks. You should pick 2) and change the section-element to nav-element.
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element
I think that 3 is probably the best of the things versions you've listed, though you might want to give the specification a once over, and see how the described usage matches up with what you're doing. One thing I will add is that, unless it's part of a larger grouping of content, you might want to consider using an <aside> tag for wrapping the links, as it's content set aside from the rest of the page. If it's part of a sidebar or footer, however, I'd think the <section> tag would work fine.
As for the issue of <h4> vs <h1>, I'm not 100% sure, but it probably wouldn't hurt. The W3C suggests using tags hierarchically, so I'd say that, unless you've got the link section inside another section that's using an <h1>, then it should be the right thing to do.
I would like to have the list items display horizontally and I want to have a line break (like <br />) within the item. What is the easiest way to do it?
I'd say that what you really want is an inline block:
li{
display: inline-block;
}
I'm not entirely sure what you mean, please feel free to include some of your code, but what I'm guessing is that you want horizontal <li> items on two lines, and the easiest way is probably to just create a new list;
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<!-- ending and starting a new list rather than using <br> -->
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
css:
li { display: inline; }
Use float: left instead display: inline.
<style type="text/css">
<!--
ul.inline li{
float: left;
list-style: none;
}
//-->
</style>
...
<ul class="inline">
<li>A text</li>
<li>A text <br />More text</li>
<li>A text</li>
<li>A text</li>
<li>A text</li>
<li>A text</li>
</ul>
You may want to use a fixed width for those li's.
Result (Firefox 5):