Bar: 1 version importeret

2022-10-28T07:38:09Z

1 version importeret

← Ældre version	Versionen fra 28. okt. 2022, 09:38
(Ingen forskel)

htx_>Bar med 2. aug. 2022, 08:01

2022-08-02T08:01:27Z

Ny side

Der er to forskellige former for lister i HTML, som det er gennemgået i [[Ul-Tag]].

Du kan enten bruge "ordered lists" som er ordnet i rækkefølge, og der bruges som standard tal som vist herunder men der er også mulighed for bogstaver og andet.

# Det første punkt
# Det andet punkt
# Det tredje punkt

Den anden mulighed er "unordered lists" som bare er en oplistning der som standard bliver markeret med kugler, som vist herunder.

* Det første punkt
* Det andet punkt
* Det tredje punkt

Css list-style er lavet så du kan ændre på udseende af listen nemt og hurtigt.

== Billeder i unordered list ==
Ved at bruge et lille billede kan man rette standard [[Image:list-standard.png]] til [[Image:list-billede.png]].

For at gøre dette skal man selvfølgelig have en lille billed-fil med det violette kvadrat, og der indsættes følgende style-angivelse:
<pre>
<style type="text/css">
ul
{
list-style:square url("sqpurple.gif");
}
</style>
</pre>

== Liste Typer ==

Der er en række forskellige standard visninger man kan indstille i list-style-type.

=== Unordered list-style-type ===

Man kan lave forskellige indstillinger med list-style-type. Her er det lavet på to forskellige [[CSS-class|classes]]:

<pre>
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
</style>
</pre>

Hvis man skriver to lister med hver deres list-style-type kan det gøres som følger:

<pre>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</pre>

Hvilket giver følgende visning:

[[Image:list-type-ul.png]]

Der findes følgende standarder der virker på en unordered list
disc - standard
circle - en cirkel
square - en firkant
none - ingen.

=== Ordered list-style-type ===

På tilsvarende vis kan man lave forskellige indstillinger med list-style-type på en ordered list. Her er det lavet på to forskellige [[CSS-class|classes]]:

<pre>
<style type="text/css">
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</pre>

Hvis man skriver to lister med hver deres list-style-type kan det gøres som følger:

<pre>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</pre>

Hvilket giver følgende visning:

[[Image:list-type-ol.png]]

Der er mange forskellige typer i den ordnede liste. De kan ses ved [http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=decimal www.w3schools.com list-style-type play-it]<ref>[http://www.w3schools.com/cssref/pr_list-style-type.asp www.w3schools.com list-style-type]</ref> hvor man kan se resultatet af de forskellige typer.

== Forskelle i browsere ==

Hvis du bruger Internet Explorer eller Opera så vil dit billede sidde lidt højre end ellers.

Så hvis du bruger Sarafri, Firefox, eller Chrome så vil billedet sidde lidt længere nede.

Hvis du bruger "Crossbrowser" så vil det se ens ud, ligemeget hvilken browser du bruger.

Det er også muligt at angive alle de liste egenskaber i én enkelt egenskab.

== Referencer ==
<references />

{{webdesign}}
[[Kategori:CSS_Egenskaber]]

CSS-list-style - Versionshistorie

Bar: 1 version importeret

htx_>Bar med 2. aug. 2022, 08:01