Shop Forum More Submit  Join Login

CSS Tricks: Lists

Wed Dec 11, 2013, 3:26 AM
Lists are awesome :meow: So let's talk about them :D

The basic list format is avaiable everywhere on dA, you do not need a premium membership to create a list. Of course you could just use :bulletgreen: or a symbol like ~ to indicate a new list item, but an actual HTML coded list has a lot of benefits over that.
Especially when you have single points that exceed a single line a HTML list, a line break appears at a spot you cannot control and therefore you will end up having no indentation and it will just look messy.

You don't have to be a Premium Member to use the HTML for lists, see FAQ #104: What HTML formatting can we use on DeviantArt? And what is the format for these codes?

You do need it, if you want to use Journal Skins aka personal CSS.

So, let's get started.

Basics About Lists


There are two kinds of list: ordered and unordered.
Ordered means you will get a numbered list from 1 to how many items your list has.
Unordered means you will get bullet points in front of every item.

Ordered list
  1. Cowherb
  2. That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.
  3. Backheel

Unordered list
  • Infrugal
  • I called him "the barber". That garbage man elected her chairperson. That manager keeps the milk cold. Sue elected Bill captain of our team. Those barbers name the dog Fido.
  • Cancelier


Every element of a is contained in its own wrapper: <li>list item</li>

All list items are contained in an ordered or unordered wrapper: <ol>…</ol> or <ul>…</ul>

Ordered list
<ol>
<li>Cowherb</li>
<li>That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.</li>
<li>Backheel</li>
</ol>

Unordered list
<ul>
<li>Infrugal</li>
<li>I called him "the barber". That garbage man elected her chairperson. That manager keeps the milk cold. Sue elected Bill captain of our team. Those barbers name the dog Fido.</li>
<li>Cancelier</li>
</ul>


Nested Lists


You can place lists inside each other. This will result in an indented list inside another list element. If you put an unordered list into another list, the bullet point will change from the regular filled circle to a hollow circle, as this is the second level in the bullet point hierarchy.

  1. Cowherb
    • Infrugal
    • Feandra
    • Cancelier
  2. That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.
  3. Backheel


<ol>
<li>Cowherb

<ul>


<li>Infrugal</li>


<li>Feandra</li>


<li>Cancelier</li>


</ul>


</li>
<li>That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.</li>
<li>Backheel</li>
</ol>


Lists on dA


An "unstyled" list will be contained with a CSS in dA's stylesheet. It is not unstyled per se, it has been styled by dA, but it has not been styled by you with a personal CSS.

By not resetting or styling all properites of a list, you may run into conflicts with the dA styling, so I prefer to "call on" every property when I create a new CSS, often simply resetting to zero or to display: none;.

More on the properties for lists right below this paragraph.  

List Styling


You can apply any CSS to lists. Both the containers <ol>…</ol> and <ul>…</ul>, as well as the single wrapper <li>…</li> can be styled to your preference.

There are three list specific properties that help you control the look of a list: list-style-type, list-style-image and list-style-position.

list-style-type
There are lot of options for what kind of style you want your list to have; the distinctions here are between bullets, numerals and letters. F.e. the default bullet point is disc, for consecutive numbering you would use decimal or upper-roman if you want to use Roman numerals. Letters are among others avaiable in Latin lower-latin or Greek lower-greek.

list-style-image
You can either display no image by setting the property to none (which would be the default setting aka if you don't want an image, done set this property) or link to an image by setting the image ULR url(http://…/list.png) as the property.

list-style-position
This property lets you set the horizontal position of whatever bullet point/numbering/image you are using in correlation to the text of each element and text outside of the list.

outside will set the style element left outside of the text and list area.
inside will align the style element with text that runs outside of your list; this will cause long elements, that run over one line, to be aligned with the bullet point and not the first letter of the element.  

To avoid an over float of second lines in list elements and bullet points, a combination of outside and margin-left should be used.


Examples Of List Styling


Here is a small selection of how you can style lists.

Unordered list with a hollow circle

ul {

list-style-type: disc;


list-style-image: none;


list-style-position: inside;


margin: 0;


}

This is a simple approach to list styling, simply replacing the default bullet with another one.

Unordered list with a hollow circle
  • Nekmit
  • Novanoid
  • Yeinydd


Ordered list with Roman uppercase numerals

ol {

list-style-type: upper-roman;


list-style-image: none;


list-style-position: outside;


margin: 0;


}

You will notice how the list-style-type, in this case upper-roman numbering, becomes right aligned text if set to list-style-position: outside.
Changing to list-style-position: inside would result in left-aligned numbering and stair-steps where the list elements begin. If you like to align things properly like me :roll: you should probably use outside in combination with margin for your lists :lol:

Ordered list with Roman uppercase numerals
  1. Hysleria
  2. Toogit
  3. Hooppler


Ordered list with lowercase Latin letters

ol {

list-style-type: lower-latin;


list-style-image: none;


list-style-position: outside;


margin: 0 0 0 20px;


}

The combination of list-style-position: outside; with margin: 0 0 0 20px; will give the same result as a combination of inside and zero margin. The difference becomes visible when a list element contains a lot of text or a nested list.

Ordered list with lowercase Latin letters
  1. Dropperclear
  2. Yboiveth
  3. Qiameth


More Bullet Points, Numerals & Letters


Please refere to list-style-type | MDN for a list of all avaiable options to style your list.

Replacing bullet points with images


To customize a list further, it is often necessary to create a new bullet point and integrate it as an image into the styling. Common images for this are checkmarks, plus symbols, arrows etc.
If you set the property list-style-position: inside; the image will automatically define the horizontal position of the list element and place it next to the image.

ul {

list-style-type: none;


list-style-image: url("…/finger.png");


list-style-position: inside;


margin: 0;


}

Replacing bullet points with images
  • Alerrawia
  • Peachflame
  • Pulappli



What Won't Work


  • You cannot set individual images for each list element. If you want a numbered list, you will have to use the options that are avaiable via the list-style-type property.
  • You cannot set a different color for the text inside a list element and the style element (unless you use an image for that).


Other Uses For Lists



Build a Horizontal Drop Down Navigation Menu With Lists



This is how the HTML set up for a navigation menu made from a list would look like.
You should use a container  for the whole list, to seperate the styling of this list from other "regular" lists inside the content. In HTML5 the <nav> element should be used. Add it into the CSS by adding nav in front or whatever custom class you choose.

How To Set Up the HTML



<ul>

<li><a href="#">Home</a></li>


<li><a href="#">Infrugal</a>


<ul>


<li><a href="#">Cowherb</a></li>


<li><a href="#">Backheel</a></li>


<li><a href="#">Feandra</a></li>


</ul>


</li>


<li><a href="#">Waterrhino</a>


<ul>


<li><a href="#">Dropellet</a></li>


<li><a href="#">Jeebus</a></li>


<li><a href="#">Noodile</a></li>


<li><a href="#">Drearien</a></li>


<li><a href="#">Kaloolon</a></li>


</ul>


</li>


<li><a href="#">Cancelier</a>


<ul>


<li><a href="#">Norrisology</a></li>


<li><a href="#">Ybuwyn</a></li>


<li><a href="#">Fuffapster</a></li>


<li><a href="#">Astauand</a></li>


</ul>


</li>


</ul>


Don't be scared. This is just another nested list ;)

Writing the HTML for a nested list like this, with manually entered line-breaks, will work in regular HTML documents, but not with sta.sh writer on dA.
This means, that you will have to write the whole list in ONE LINE; deleting all manually entered line-breaks!

Having it in one line will make it a lot shorter, too. Just a bit harder to look at.

This is what it will look like with no special styling:



Next is the CSS for the lists!



ul {

background: #FFFFFF;


height: 30px;


list-style-image: none;


list-style-position: inside;


list-style-type: none;


margin: 0px;


padding: 0px;


text-align: center;


}

ul li {

display: inline-block;


position: relative;


margin: 0px;


padding: 0px;


}

li ul {

display: none;


position: absolute;


left: 0px;


top: 30px;


margin: 0px;


padding: 0px;


}

ul li a {

display: block;


background: #17c3e5 ;


color: #FFFFFF;


height: 30px;


line-height: 30px;


margin: 0px;


padding: 0px;


text-align: center;


text-decoration: none;


width: 120px;


}

ul li a:hover {

background: #369eb3 ;


}

li:hover ul {

display: block;


}




Here is why I did what I did!


ul
This will refer to the whole list and will be the whole width of your layout unless defined otherwise.
The list styling is reset; image, style and position are not defined. Margin and padding at 0 is added to avoid spaces.
The height has to be defined and should be the same as the link elements further down the CSS.
The center aligned text will position the menu in the middle of the unordered list.

ul li
display: inline-block; takes care of the list elements being in one line and not each on a separate line.
position: relative; enables aligning the drop down elements contained in a nested list later on.
This styling will work on all levels of the list where a list element is inside an unordered list.

li ul
position: absolute; aligns the element with the list element it is contained in. The exact numbers are set to 0px for the left side and 30px for the top; referencing the height of the overall unordered list, so it starts right under it without space.
display: none; is set so that the dropdown elements are not visible all the time, but only on hover, see further down.

ul li a
display: block; is necessary to display the whole content of the link element.
The height resembles the overall height and the list element the link is in. It should also be resembled in the line height, for the text to be vertically centered. (No padding is needed for this!)

ul li a:hover
Simply changing the background color of the element.

li:hover ul
display: block; is necessary to make th drop down menu visible again. It overwrites the display: none; styling from before.

What Else?


There is basically nothing you can't do: you can adjust colors, background, fonts, colors, sizes, alignment etc whatever way you want. You just need to overwrite the regular list stylings and then you are free to go.
You can also transform it into a vertical navigation element, see link below.

This Drop-Down Menus, Horizontal Style · An A List Apart Article helped me figure out exactly how to create a menu list. The article may be old, but the principle hasn't changed, as you can see it still works. :B

I found dabblet.com today, a live HTML / CSS editor that let's you see what you're doing! :la: Give it a try!

As usual I will link you to CSS reference - CSS | MDN, because it is the best and easiest reference site for CSS (and HTML) questions.

Conclusion


  • If you make a list, use the list HTML for a better layout result. (Basic lists are free for all.)
  • Lists can be customized to almost all your needs!
  • You can easily use a list for ohter purposes, f.e. building a navigation menu.


Do not hesitate to ask me questions if you don't understand anything or want clarification :)



Happy creating :peace: :heart:

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

Today's tutorial is about lists, how to use them, why to use them and how to "abuse" them. I hope it is easy to understand and to follow, especially the second part may get a bit complicated and confusing. If you think it should be maybe ordered differently or be better structured, please let me know. I can fix that ;)

If there is something you want to know/learn about regarding journal skins and/or CSS/HTML, let me know and I will add it to future tutorials</b> La la la la
I am always looking for ideas for new tutorials and by knowing what you want to learn, I can do so in a much better way :XD: 



Previous CSS Tricks


:bulletgreen: Limiting .text width




Any questions? Just ask :eager: by darkmoon3636

I hope you like this Heart Peace
Add a Comment:
 
:iconespeonsky:
espeonsky Featured By Owner Oct 28, 2016  Hobbyist General Artist
Hello! I managed to get your code down, and I've gotten to understand it (thank you so much for this)! But I have one question, is there a way to turn the top sections, having them rather than words (ex: Infrugal) be an image/icon? Thank you!
Reply
:iconautumnique:
Autumnique Featured By Owner Edited Dec 16, 2015
May I ask how to do something like this? momorin-kun.deviantart.com/
Reply
:iconpica-ae:
pica-ae Featured By Owner May 3, 2016  Professional Interface Designer
Sorry for the late reply, the account in question seems to have deactivated by now. 
Reply
:iconautumnique:
Autumnique Featured By Owner May 3, 2016
Nvm! I already figured it out! :D
Reply
:iconpica-ae:
pica-ae Featured By Owner May 3, 2016  Professional Interface Designer
Excellent :) 
Reply
:iconyaaju:
Yaaju Featured By Owner Aug 6, 2015
so can people without premium membership use css in their journal to make the dropdown? or are they just stuck with the list.. btw your journal is very helpful and I love you lol
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 7, 2015  Professional Interface Designer
This is limited only to premium/core members. I am afraid you're stuck with regular links.

You can of course arrange them anyway you want and use the given classes in sta.sh writer to enhance their look. You can use different sized headline formats for them, blockquotes, center the text and divide with characters like / or | or –, you can apply bold or italic styling to them. It does not have to be just a list :) 
Reply
:iconyaaju:
Yaaju Featured By Owner Nov 7, 2015
dang that's too bad, but thank you so much for the info! it was super helpful!
Reply
:iconhokannko:
Hokannko Featured By Owner Jul 8, 2015  Student General Artist
Hello there! Firstly, thank you so much for this; it really helped a lot!

I just have one problem though. So, I copy-pasted the codes and everything, changed the names and removed some dropdowns to match what I need, but when I load the preview, the ones without a dropdown in them end up looking out of place. And even when I used the original code without editing anything, the 'home' button ends up like that as well. What should I do?

I hope you manage to read this! Thanks so much in advance!
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 8, 2015  Professional Interface Designer
Do you have a link to this in sta.sh maybe? I could easier see what's going on in a "live" environment. Based on a screenshot the only thing I can suggest is to check that all brackest are in the right spot
Reply
:iconhokannko:
Hokannko Featured By Owner Jul 8, 2015  Student General Artist
Sadly, I don't have a premium, so I can't really save it temporarily for a live preview :(

As for that, I've already checked, and they seem to be in the right places? Since I didn't really change anything in the CSS, only in the HTML.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 29, 2015  Professional Interface Designer
Maybe there are some spaces between the single li elements? It may help to remove all linebreaks and have all the brackets neck to neck like  >< without any spacing between them. 
Reply
:iconhokannko:
Hokannko Featured By Owner Aug 2, 2015  Student General Artist
Hello!

I tried doing what you said, and this is what it looks like right now. ^^;
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 2, 2015  Professional Interface Designer
Alright, thanks for the link.

There is one ul element with comissions that is in between all the li elements, this one either needs to be deleted or wrapped in a li element. 

Untitled Drawing by pica-ae  

I can see that you have already added two dropdowns correctly into the li elements, so those do actually work. This one just is already opened and covers the other two that work.
If you delete that ul, the other will be on the same line and will work as it should :)
Reply
:iconhokannko:
Hokannko Featured By Owner Edited Aug 3, 2015  Student General Artist
Thanks-- I tried what you said and edited some parts a bit. This is what it looks like right now. ^^;

The one without a dropdown won't line up no matter what I do for some reason?
So sorry for all the trouble ;A;/
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 3, 2015  Professional Interface Designer
Mmh I think there are still some manual linebreaks between the li elements or inside of those.
Try writing everything in one line with no spaces between the elements, it should work then :)
Reply
(1 Reply)
:iconblockbro:
blockbro Featured By Owner Jun 26, 2015  Student General Artist
Do you think you could reply to this question with the exact coding you used to make the dropdown? I am horrible at putting the codes together to get the actual words and list together to look like what you did. Thank you so much. :heart:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 8, 2015  Professional Interface Designer
Sorry for the late reply.

As a matter of fact that would just be a copy paste from the article, but I copied the code here codepen.io/pica-ae/pen/EjEJoB so maybe that helps.
You can also edit the content at codepen and then copy paste back to DA. You may have to remove all line breaks and spaces between elements.

I hope this helps :)
Reply
:iconkaotickell:
kaotickell Featured By Owner Dec 11, 2013  Professional Traditional Artist
Veeeery informative lovely! :D This is the sort of thing that reminds me a lot of how sites like HTML Dog were able to teach me the basics of coding - it's all about keeping all the info needed in there, and explaining it in normal terms people understand. Well done!
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 12, 2013  Professional Interface Designer
Thank you :huggle:

I love the MDN site :la: (also the redesign, looks very fancy now) 
And well I try to put down the basics and explain it a bit more… I guess I try to be more casual or something :giggle: 

Reply
:iconkaotickell:
kaotickell Featured By Owner Dec 12, 2013  Professional Traditional Artist
:nod: It's the easiest way to explain something to all types of learners. :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 13, 2013  Professional Interface Designer
Indeed :nod: 
Reply
:iconartbycher:
ArtByCher Featured By Owner Dec 11, 2013   Traditional Artist
Thank you for this, my friend! :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 12, 2013  Professional Interface Designer
:blush: Good it's helpful :la: 
Reply
:iconkovowolf:
KovoWolf Featured By Owner Dec 11, 2013  Professional General Artist
This is awesome, thanks! <3
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 12, 2013  Professional Interface Designer
I am glad it's helpful :la: Thank you :hug: 
Reply
:iconkovowolf:
KovoWolf Featured By Owner Dec 12, 2013  Professional General Artist
My pleasure! :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 13, 2013  Professional Interface Designer
:heart: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 11, 2013
Hattu fein gemacht! :clap: :la:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 12, 2013  Professional Interface Designer
Dangge :meow: :huggle:
Reply
:iconmaytel:
maytel Featured By Owner Dec 11, 2013
:love:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 12, 2013  Professional Interface Designer
:huggle: 
Reply
:iconrotane:
rotane Featured By Owner Dec 11, 2013  Professional
There are hundreds of list tutorials around, but hardly any that go into so much detail and explain things as well as this one. Very useful! :thumbsup:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 12, 2013  Professional Interface Designer
Thank you :hug: I am glad you like it :la: 
Reply
:icondiezori:
DieZori Featured By Owner Dec 11, 2013  Professional
useful! :love:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 11, 2013  Professional Interface Designer
Thank you :la: 
Reply
:iconikue:
Ikue Featured By Owner Dec 11, 2013  Hobbyist Digital Artist
:clap: :worship:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 11, 2013  Professional Interface Designer
:blush: 
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae


Featured in Collections

... css tutorials by artbymba


More from DeviantArt



Details

Submitted on
December 11, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
16,570
Favourites
131 (who?)
Comments
40
×