| Visa föregående ämne :: Visa nästa ämne |
|
| Författare |
Meddelande |
Per Edenbrink
Medlem
Blev medlem: 10 November 2005
Inlägg: 36
|
 Skrivet: Fri Nov 25, 2005 6:48 pm Rubrik: Hur ändrar man prickarna i en HTML <ul> lista? |
 |
|
Här är ett exempel:
| Kod: | <ul>
<li> rad1
<li> rad2
</ul> |
Hur kan jag byta ut "prickarna" i denna HTML lista?
Jag har sett andra som har gjort detta, men vet inte om dessa använt andra HTML element än <ul> och <li>.
Om jag bara kom ihåg adressen till någon av dessa webbplatser skulle jag kunna kollat själv, men tyvär.
Tack på förhand
Per |
|
| Till överst på sidan |
|
Mattias
Stammis
Blev medlem: 07 October 2005
Inlägg: 160
|
| Skrivet: Fri Nov 25, 2005 7:55 pm Rubrik: |
|
|
För att ta bort list-prickarna använder du list-style-type:none;.
Här är ett exempel:
| Kod: | <style type="text/css" rel="stylesheet">
li
{
list-style-type:none;
}
</style> |
För att sedan lägga in en egen bild använder du enklast denna som bakgrund utan upprepning och lägger in float:left samt padding-left.
| Kod: | <style type="text/css" rel="stylesheet">
li
{
list-style-type:none;
background: url('bild.gif') no-repeat;
float:left;
padding-left:20px;
}
</style> |
|
|
| Till överst på sidan |
|
Per Edenbrink
Medlem
Blev medlem: 10 November 2005
Inlägg: 36
|
| Skrivet: Fri Nov 25, 2005 8:38 pm Rubrik: |
|
|
Tack, det fungerade perfekt!
Mina egna fina <li> prickar syns nu istället.
Tänk vad man kan åstadkomma med CSS 
Stort tack! |
|
| Till överst på sidan |
|
Nooki
Medlem
Blev medlem: 07 October 2005
Inlägg: 90
Från: Gävle
|
| Skrivet: Mon Nov 28, 2005 12:43 pm Rubrik: |
|
|
Du kan också använda <ul type=square> eller circle osv
Jag har blivit lite anti css känner jag  |
|
| Till överst på sidan |
|
Mattias
Stammis
Blev medlem: 07 October 2005
Inlägg: 160
|
| Skrivet: Mon Nov 28, 2005 1:14 pm Rubrik: |
|
|
Det är knappast användbart att använda standardprickar i andra områden är vart de vanligtvis finns.
Circle t.ex används som default i andra nivån av nestlade listor - alltså blir det väldigt dåligt i användbarhets-synvinkel att ha dessa i första nivån.
Sedan vet vi alla att det inte är en tävling mellan HTML och CSS.
CSS bestämmer designen av HTML element - de två språken är inte fristående. |
|
| Till överst på sidan |
|
webbdesign
Site Admin
Blev medlem: 05 September 2005
Inlägg: 226
|
| Skrivet: Wed Nov 30, 2005 11:10 am Rubrik: |
|
|
| Mattias skrev: |
| Kod: | <style type="text/css" rel="stylesheet">
li
{
list-style-type:none;
background: url('bild.gif') no-repeat;
float:left;
padding-left:20px;
}
</style> |
|
Jag har en liten justering här, rel-attributen används bara till länkar.
Du är antagligen så van att använda externa CSS filer att du blev lite fartblind när du skrev ditt inlägg.
Rel ger oss möjligheten att berätta för sökmotorns spindlar vad som finns på andra sidan länken.
Korrekt kod skall alltså vara:
| Kod: | <style type="text/css">
li
{
list-style-type:none;
background: url('bild.gif') no-repeat;
float:left;
padding-left:20px;
}
</style> |
|
|
| Till överst på sidan |
|
|
|
