LISTS



Unordered List (Unummerert liste / Punktliste)

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ul style="list-style: none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered List (Nummerert liste)

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
  1. Coffee
  2. Tea
  3. Milk
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
  1. Coffee
  2. Tea
  3. Milk

Description List (Definisjonsliste)

The <dl> tag defines the description list, the <dt> tag defines the term (name/Coffee+Milk), and the <dd> tag describes each term:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink

Kan også kun bruke DT, i DL.

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
</dl>
Firefox
Mozilla Firefox
Fx

Eller blande DT og DD, i DL.

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
</dl>
Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

Nested List

Lists can be nested (list inside list):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>


MARGIN / PADDING

Property Value Explanation
margin length, %, or auto the top, right, bottom, and left margins
padding length, %, or auto the top, right, bottom, and left paddings

UL margin

UL no margin

ul {
  border:2px solid green;
}

UL margin 0

ul {
  margin: 0;
  border:2px solid green;
}

UL margin-top (only)

ul {
  margin: 1em 0 0 0;
  border:2px solid green;
}

UL margin-right (only)

ul {
  margin: 0 1em 0 0;
  border:2px solid green;
}

UL margin-bottom (only)

ul {
  margin: 0 0 1em 0;
  border:2px solid green;
}

UL margin-left (only)

ul {
  margin: 0 0 0 1em;
  border:2px solid green;
}

UL padding

UL no padding

ul {
  background-color:orange;
  margin: 5px 20px 40px 70px;
  border:2px solid green;
}

li {
  background-color:yellow;
}

UL padding 0

ul {
  background-color:orange;
  margin: 5px 20px 40px 70px;
  padding: 0;
  border:2px solid green;
}

li {
  background-color:yellow;
}

UL padding-top

ul {
  background-color:orange;
  margin: 5px 20px 40px 70px;
  padding-top: 15px;
  border:2px solid green;
}

li {
  background-color:yellow;
}

UL padding-right

ul {
  background-color:orange;
  margin: 5px 20px 40px 70px;
  padding-right: 33%;
  border:2px solid green;
}

li {
  background-color:yellow;
}

UL padding-bottom

ul {
  background-color:orange;
  margin: 5px 20px 40px 70px;
  padding-bottom: 15px;
  border:2px solid green;
}

li {
  background-color:yellow;
}

UL padding-left

ul {
  background-color:orange;
  margin: 5px 20px 40px 70px;
  padding-left: 15px;
  border:2px solid green;
}

li {
  background-color:yellow;
}

LI margin

ul {
  background-color:orange;
  border:2px solid green;
}


li {
  background-color:yellow;
  margin: 15px;
  padding: 14px 16px;
  border:1px dashed #555;
}

Fra: (w3schools.com) Styling Lists With Colors:

ul {
  background: #3399ff;
  padding: 20px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}
ol {
  background: #ff9999;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
  1. Coffee
  2. Tea
  3. Coca Cola

LI padding

ul {
  margin: 30px;
  border:2px solid green;
}


li {
  background-color:yellow;
  padding: 14px 16px;
  border:1px dashed #555;
}

LI padding top/bottom

ul {
  margin: 30px;
  border:2px solid green;
}


li {
  background-color:yellow;
  padding: 14px 0;
  border:1px dashed #555;
}

LI padding left/right

ul {
  margin: 30px;
  border:2px solid green;
}


li {
  background-color:yellow;
  padding: 0 16px;
  border:1px dashed #555;
}

LI Padding with Child Combinator ( ul > li )

PB: Hentet fra en norsk side, uten HTML (lagt til av meg):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Green</li>
      <li>Black</li>
    </ol>
  </li>
  <li>Coca Cola</li>
</ul>

.....Så lager du en ny CSS-regel for ul-elementet. Dette fjerner kulepunktene i listen.

ul {
  list-style: none;
}

Så lager du en ny CSS-regel for li-elementet.

ul > li {
  padding: .3rem 0 .3rem 1rem;
}

Ved å skrive ul > li lager du en regel som kun gjelder for li-elementene som er direkte under ul-elementet.

Du kan droppe å skrive > tegnet men da påvirker du alle li-elementene som er under det ytterste ul-elementet og hvis du har flere nivåer med li-elementer er det ikke sikkert at det er det du ønsker. Skriv inn følgende kode på bunnen av CSS-filen din.

ul {
  list-style: none;
}

ul > li {
  padding: .3rem 0 .3rem 1rem;
}

Outside / Inside

ul.demo1 {
   list-style-position: outside;
}
<h3>Outside</h3>
<ul class="demo1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Outside

ul.demo2 {
   list-style-position: inside;
}
<h3>Inside</h3>
<ul class="demo2">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Inside



Kulepunkter - Bilder

ul {
  list-style-image: 
  url(bilder/42x42-stjerne.jpg);
}

Kulepunkter - farger

FRA w3schools.com

ul {
  list-style: none; /* Remove HTML bullets */
  padding: 0;
  margin: 0;
}

li {
  padding-left: 16px;
}

li::before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: 8px;
  color: blue; /* Or a color you prefer */
}
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

PB: Simulert presentasjon:


Kulepunkter - font icons

https://isotropic.co/how-to-set-custom-bullets-in-ul-lists/

PB: Modifisert. Har ikke brukt ekstern særegen font.

#newlist ul {
  list-style: none;
}

#newlist ul li:before {
content: "\2713";
color:green;
padding-right:5px;
}

#newlist .othercheck:before {
font-weight: 900;
content: "\2606";
color:red;
padding-right:5px;
<div id="newlist">
<ul>
<li>This will be the final product</li>
<li>Using only CSS</li>
<li class="othercheck">We can make the bullet whatever we want</li>
</ul>
</div>

PB: Simulert presentasjon:



LIST STYLING

Hvordan få lagt inn en ordinær stylet liste lokalt inne på HTML.

Det beste er egentlig å lage en CLASS av den, men det går an å legge det inn på lokal HTML. Blir ofte mye mer kode med info lagt inn på hvert element.

ul {
 width: 150px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 2px solid black;
 border-top: 2px solid #3c3c3c;
}

li:first-child {
    border-top: none;
}
 
li:last-child {
   border-bottom: none;
}
<ul style="width: 150px; background: #292929; color: white; list-style: none; padding-left: 0;">
  <li style="padding: 10px; border-bottom: 2px solid black; border-top: none;"> List Item </li>
  <li style="padding: 10px; border-bottom: 2px solid black; border-top: 2px solid #3c3c3c;"> List Item </li>
  <li style="padding: 10px; border-bottom: none; border-top: 2px solid #3c3c3c;"> List Item </li>
</ul>

https://www.w3schools.com/howto/howto_css_list_group.asp

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
}
<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

Kantlinje

Styling av UL, med ramme (kantlinje) kun på v.s.

ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px 20px;
}

En stylet UL-liste med stylet LI borders

Selve UL har egen ramme (kantlinje), som kan styles.

Hver LI har egen ramme (kantlinje), som kan styles.

Siste LI bør ikke ha ramme (kantlinje) for å unngå dobbel ramme (kantlinje), både fra UL + LI.

Rammene (Kantlinjene) har opprinnelig 1px, satte den opp for å se effekten bedre.

ul {
  list-style-type: none;
  padding: 0;
  border: 2px solid #ddd;
}

ul li {
  padding: 8px 16px;
  border-bottom: 2px solid #ddd;
}

ul li:last-child {
  border-bottom: none
}

Horizontal List

https://www.tagindex.net/css/list/

display: inline;

li {
display: inline;
margin-right: 20px;
}
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

float: ***;

ul {
padding: 0;
margin: 0;
list-style-type: none;
}

li {
float: left;
width: 150px;
margin-right: 5px;
padding: 2px;
border: 1px #ffb366 solid;
background-color: #fffdee;
text-align: center;
}
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

<p style="clear: left;">--- Clears the left float ---</p>

--- Clears the left float ---


list-style-type

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
UL
<ul class="a">...
<ul class="b">...
<ul class="c">...
OL
<ol class="d">...
<ol class="e">...
<ol class="f">...
<ol class="g">...
<ol class="h">...
<ol class="i">...
<ol class="j">...
<ol class="k">...
<ol class="l">...
<ol class="m">...
<ol class="n">...
<ol class="o">...
<ol class="p">...
<ol class="q">...
<ol class="r">...
<ol class="s">...
<ol class="t">...
<ol class="u">...
<ol class="v">...
  • list-style-type: circle;
  • UL
  • linje 3
  • list-style-type: disc;
  • UL
  • linje 3
  • list-style-type: square;
  • UL
  • linje 3
  1. list-style-type: armenian;
  2. OL
  3. linje 3
  1. list-style-type: cjk-ideographic;
  2. OL
  3. linje 3
  1. list-style-type: decimal;
  2. OL
  3. linje 3
  1. list-style-type: decimal-leading-zero;
  2. OL
  3. linje 3
  1. list-style-type: georgian;
  2. OL
  3. linje 3
  1. list-style-type: hebrew;
  2. OL
  3. linje 3
  1. list-style-type: hiragana;
  2. OL
  3. linje 3
  1. list-style-type: hiragana-iroha;
  2. OL
  3. linje 3
  1. list-style-type: katakana;
  2. OL
  3. linje 3
  1. list-style-type: katakana-iroha;
  2. OL
  3. linje 3
  1. list-style-type: lower-alpha;
  2. OL
  3. linje 3
  1. list-style-type: lower-greek;
  2. OL
  3. linje 3
  1. list-style-type: lower-latin;
  2. OL
  3. linje 3
  1. list-style-type: lower-roman;
  2. OL
  3. linje 3
  1. list-style-type: upper-alpha;
  2. OL
  3. linje 3
  1. list-style-type: upper-latin;
  2. OL
  3. linje 3
  1. list-style-type: upper-roman;
  2. OL
  3. linje 3
  1. list-style-type: none;
  2. OL
  3. linje 3
  1. list-style-type: inherit;
  2. OL
  3. linje 3

Cross Browser Inline-Block

li {
  width: 200px;
  min-height: 250px;
  border: 1px solid #000;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  zoom: 1;
  *display: inline;
  _height: 250px;
}
<ul style="list-style-type:square;">
  <li>India</li>
  <li>UK</li>
  <li>US</li>
</ul>

PB: Dette kan ligne et layout med bruk av Flexbox (display: flex;) (flex-direction: row;) etc. Det virkelig artige med denne er at en får helt like kolonner/rammer (kantlinjer), liggende etter hverandre akkurat som en table, i tillegg til at de flytter seg under hverandre ved resizing av nettlserevinduet!

PB: Kan egentlig også gjøre dette med DIVs

Boks 1
Boks 2
Boks 3


Størrelser

developer.mozilla.org: Styling lists

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Description list styles */

dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

PB: Modifisert. REM-størrelsene fungerte ikke inn under en DIV, for å simulere en generell stilsetting. Gjorde om til EM, slik at font-size-verdien på HTML kan editeres og virke inn på oppsettet som tiltenkt.

Shopping (unordered) list

Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.

Recipe (ordered) list

Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.

  1. Toast pita, leave to cool, then slice down the edge.
  2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  3. Wash and chop the salad.
  4. Fill pita with salad, hummus, and fried halloumi.

Ingredient description list

Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.

Hummus
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.
Pita
A soft, slightly leavened flatbread.
Halloumi
A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.
Green salad
That green healthy stuff that many of us just use to garnish kebabs.


LISTS

The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:


ul {
  list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:

list-style-type
- (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
list-style-position
- (specifies whether the list-item markers should appear inside or outside the content flow)
list-style-image
- (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property will be inserted, if any.


ul

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the list.


ol

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the list.

  1. Ordered List Item One
  2. Ordered List Item One

dl

Represents a description list consisting of zero or more name-value groups. Each group must consist of one or more names (dt elements) each followed by one or more values (dd elements).

Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value data. The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.

address
The address element represents the contact information for the section it applies to. If it applies to the body element, then it instead applies to the document as a whole.
article
The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

li

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

  1. Ordered List Item One
  2. Ordered List Item Two

dt

The dt element represents the term, or name, part of a term-description group in a description list (dl element).

address
The address element represents the contact information for the section it applies to. If it applies to the body element, then it instead applies to the document as a whole.
article
The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Viktige elementer - Lister

https://www.tutora.no/viktige-elementer/

Lister skiller seg litt fra de elementene vi har sett på hittil ved at de krever to elementer for å fungere. Grunnen til det er at du først må bestemme om du skal ha en punktvis liste eller en nummerert liste. Derfor skriver du først starttagen til listen så starttagen til listepunktet så sluttagen til listepunktet og så eventuelt flere listepunkter og til slutt avslutter du med sluttagen på selve listen.

Det er også mulig og ha lister inne i lister, såkalte nested lists. Hvis det skal gjøres på riktig måte, etter anbefalningene fra W3C så skal den nye listen ligge inn i li-elementet og ikke etter sluttagen til li-elementet.