04. juli 2006 - 09:04 Der er 7 kommentarer

Præcis indrykning i Ordered bullets

Jeg har lavet nedenstående HTML som gerne skulle vise en ordered list hvor
- afstanden fra numrenes venstre side til venstre browserkant er 0px
- afstanden fra numrenes venstre side til tekstens venstre side er 10px

Det virker bare slet ikke. Tallene forsvinder simpelt hen!
Hvad skal jeg gøre for at jeg kan lege med de to nævnte afstande som jeg har lyst uden at tallene forsvinder?

Koden:

<html>
    <head>
        <style>
            ol {
                margin:0px;
            }
           
            li {
                padding-left:10px;
            }   
        </style>
    </head>
    <body style="margin:0px;padding:0px">
        <div style="border:1px solid red">
            <ol>
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
            </ol>
        </div>
    </body>
</html>
Avatar billede michael_stim Ekspert
04. juli 2006 - 09:55 #1
sätter du margin på 25 kommer tallene:

<html>
    <head>
        <style>
            ol {
                margin-left:25px;
                margin-top:0px;
                margin-bottom:0px;
            }
         
            li {
                padding-left:0px;
            } 
        </style>
    </head>
    <body style="margin:0px;padding:0px">
        <div style="border:1px solid red;">
            <ol>
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
            </ol>
        </div>
    </body>
</html>
Avatar billede michael_stim Ekspert
04. juli 2006 - 09:59 #2
Men er sikker på det ikke er den rigtige måde at göre det på. Overlader det til HTML-freaksene ;o)
04. juli 2006 - 10:08 #3
Ja, jeg ved godt hvordan jeg får tallene tilbage, men det hjælper mig ikke rigtig hvis jeg nu beslutter mig for at der skal være f.eks. 5px imellem numre og tekst! og med dit eksempel er jeg ikke sikker på der er 10px imellem, som jeg bad om!
Avatar billede Slettet bruger
04. juli 2006 - 13:53 #4
Så vidt jeg husker, er der forskel på hvordan browsere gør som standard med det her. Nogle bruger padding og andre bruger margin til at styre layout af lister. Derfor er det en god ide altid at sætte begge to sammen.

Derudover bør du, når du leger med CSS sørge for at sætte en passende DOCTYPE på din side, for den har meget stor indflydelse på hvilke regler en browser vil benytte til at fortolke stylesheetet. Uden en DOCTYPE vil IE fortolke efter sine helt egne regler, som ikke rigtigt ligner de regler andre benytter, men med en fuld DOCTYPE vil IE godt lege sammen med andre.
04. juli 2006 - 14:01 #5
sandbox > Du har ret i det hele. Jeg tænkte bare at der var nogle som havde fundet opskriften før mig, fordi egentligt er det jo ret simpelt det jeg forlanger. Selv har jeg mange gange lavet grafiske bullets som var en span med en bullet grafik som bg og en padding til at definerer afstanden til teksten og en margin til at definerer afstanden helt til venstre, og jeg syntes egentlig det burde være ligeså nemt med alm. bullets.
Avatar billede Slettet bruger
04. juli 2006 - 14:25 #6
Prøv at starte med denne, og så lege videre derfra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            body { margin:0px;padding:0px;}
            ol {
                margin:0px; padding:0px;
            }
         
            li {
                /* prøv også inside '/
                list-style-position: outside;
                padding:10px;
                margin: 0px;
            } 
        </style>
    </head>
    <body>
        <div style="border:1px solid red">
            <ol>
                <li>Punkt 1</li>
                <li>Punkt 2</li>
                <li>Punkt 3</li>
            </ol>
        </div>
    </body>
</html>
Avatar billede Slettet bruger
04. juli 2006 - 14:25 #7
Hov, der kom lige en ' i stedet for en * til at slutte min kommentar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester