Søg
Avatar billede Slettet bruger
20. januar 2005 - 04:37 Der er 15 kommentarer og
1 løsning

Justering af indryk v/lister

Hidtil har jeg ikke benyttet mig af lister, fordi jeg ikke vil have, at listen rykker ind.
Men nu har jeg set noget, der tyder på, at man ved hjælp af css kan lave en liste, som ikke rykker ind - og hvor man også kan lave sine egne bullets til.
Nogen der kan hjælpe mig med koden til det.
Jeg bruger css.fil, så det ville være dejligt at få koden, som skal puttes i css-filen, og koden, som jeg skal bruge til listen.
På forhånd tak
Avatar billede susanne_larsen Nybegynder
20. januar 2005 - 09:31 #1
Kan man sagtens. Du kan læse og få en masse eksempler om hvordan du skal gøre her
http://css.maxdesign.com.au/listamatic/
Avatar billede Slettet bruger
20. januar 2005 - 13:45 #2
Supersted, men hvorfor virker det ikke, når jeg lægger dette i min css-fil

#li ul
{
margin: 0;
padding: 0;
list-style-type: square;
}

og dette i min html fil:

<div id="li">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
Avatar billede susanne_larsen Nybegynder
20. januar 2005 - 17:17 #3
Kig lidt nærmere på eksemplet
http://css.maxdesign.com.au/listamatic/vertical02.htm

Her kan du se at de ikke navngiver med nogen af de fastsatte tags, da det kan give problemer.
Din id er sat forkert. Den skal placeres på <ul>.

Kan dog stærkt anbefale dig at omdøbe din id, f.eks. fra "li ul" til #minliste li

...og  indsætter en doctype i toppen af din html fil, ex
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

...så har du nu en css der ser sådan ud:
#container {
    width: 100px;
    height: 300px;
}

#minliste li
{
    margin: 0;
    padding: 0;
    list-style-type: square;
}


Html filen ser nu således ud:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<title>Milk, eggs etc...</title>

<link rel="stylesheet" href="liste.css" type="text/css" media="screen">
</head>

<body>
<div id="container">

    <ul id="minliste">
        <li>Milk</li>
        <li>Eggs</li>
        <li>Cheese</li>
        <li>Vegetables</li>
        <li>Fruit</li>
</ul>

</div>
</body>

</html>

Og madlisten vises med firkantede bullits ;)
Avatar billede Slettet bruger
20. januar 2005 - 17:24 #4
Fornemt
Men hele listen er rykket ind fra venstre margin, og det var det jeg ville undgå
Avatar billede susanne_larsen Nybegynder
20. januar 2005 - 19:02 #5
Oki. Så er padding ikke nok, du skal også have margin-left på hvis du vil bestemme indryk.
Avatar billede Slettet bruger
20. januar 2005 - 19:51 #6
Det gør ingen forskel at sætte den til 0. Hvis jeg sætter den til5 0, så virker den, men det hjælper jo ikke meget
Avatar billede susanne_larsen Nybegynder
21. januar 2005 - 10:09 #7
Jammen der bliver jo nødt til at være om ikke andet en lille indrykning, ellers er der ikke plads til din bullit, der placeres foran din tekst ;)

Men du kan kringle den således her:
Din css:

#container {
    width: 400px;
    height: 300px;
}

#minliste
{
    margin-left: 0px;
    padding-left: 0px;
   
}

#minliste li {
    list-style: square;
    margin-left: 20px;
    padding: 0px;
}

....og din html fil

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<title>Milk, eggs etc...</title>

<link rel="stylesheet" href="liste.css" type="text/css" media="screen">
</head>

<body>
<div id="container">
    <p>En eller anden tekst her...</p>

        <ul id="minliste">
                <li>Milk</li>
                <li>Eggs</li>
                <li>Cheese</li>
                <li>Vegetables</li>
                <li>Fruit</li>
        </ul>

</div>
</body>

</html>
Avatar billede Slettet bruger
21. januar 2005 - 10:35 #8
Mit problem er, at jeg skal lave nogle lister, hvor der er meget lidt plads i bredden. Men bullits er stadig ikke helt ude ved venstre margin, og det kan de åbenbart ikke komme.
Og så noget mystisk:
Jeg lagde koden ind i en html fil, hvor der i forvejen stod noget kode - faktisk bare noget tekst - og nu er der ca. 10 liniers afstand fra listen og ned til den tekst, uanset hvad jeg gør. Og det samme sker, når jeg lægger det ind i en anden fil.
På samme måde kan jeg ikke fjerne den dobbelte linieafstand fra 'En eller anden tekst her...' og ned til listen - heller ikke ved at fjerne </p>.
Avatar billede susanne_larsen Nybegynder
21. januar 2005 - 11:20 #9
Hvis der ikke er så meget plads i bredden, kan du så ikke sætte teksten til en mindre font ?

Mht til linieafstanden, så lydder det umiddelbart som om der er et block element der forårsager dette, men det er lidt svært at sige hvad det er, når jeg ikke kan se hele din kode....

Kan du ikke prøve og poste din css og din html, eller endnu bedre uploade siden, så er det lidt lettere :)
Avatar billede Slettet bruger
21. januar 2005 - 13:20 #10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Intro</TITLE>
<LINK REL="Stylesheet" HREF="../css/s.css" TYPE="text/css">
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<meta HTTP-EQUIV="imagetoolbar" CONTENT="no">
</HEAD>
<BODY>

<DIV STYLE="text-align:center">
<TABLE WIDTH="523" BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD>


<div id="container">
En eller anden tekst her...

        <ul id="minliste">
                <li>Milk</li>
                <li>Eggs</li>
                <li>Cheese</li>
                <li>Vegetables</li>
                <li>Fruit</li>
        </ul>
</div>
aaaaaaaaaaaaaaa
</TD></TR></TABLE>
</DIV>
</BODY>
</HTML>


body {
    FONT-SIZE: 11;
    COLOR: #0D6B08;
    FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
    FONT-STYLE: normal;
    TEXT-DECORATION: none;
    SCROLLBAR-FACE-COLOR: #ffd979;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffd979;
    SCROLLBAR-SHADOW-COLOR: #ffd979;
    background-color: #ffff99;
    SCROLLBAR-3DLIGHT-COLOR: #ffd979;
    SCROLLBAR-ARROW-COLOR: #ffff99;
    SCROLLBAR-TRACK-COLOR: #ffeab9;
    SCROLLBAR-DARKSHADOW-COLOR: #666666;
    BACKGROUND-COLOR: #ffff99;
}
A:link
{
    TEXT-DECORATION: none;
    COLOR: #0D6B08;
}
A:visited
{
    COLOR: #0D6B08;
    TEXT-DECORATION: none;
}
A:hover
{
    COLOR: #FF0000;
    TEXT-DECORATION: none;
    FONT-STYLE: italic;
}
A:active
{
    COLOR: #FF0000;
    TEXT-DECORATION: none;
    FONT-STYLE: italic;
}
.mintabel {
    FONT-SIZE: 11px;
    COLOR: #0D6B08;
    FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
    text-align:center;
}
}
#container {
    width: 400px;
    height: 300px;
}

#minliste
{
    margin-left: 0px;
    padding-left: 0px;
 
}

#minliste li {
    list-style: square;
    margin-left: 20px;
    padding: 0px;
}
Avatar billede Slettet bruger
21. januar 2005 - 13:22 #11
Hvordan laver man iøvrigt en kode, som sætter fontstørrelsen til en bestemt størrelse?
Avatar billede susanne_larsen Nybegynder
22. januar 2005 - 11:17 #12
Mht hvordan du sætter fontstørrelse, så har du allerede sat den til 11 under BODY.
Hvis du vil sætte fontstørrelsen på listelementerne, tilføjer du font-size:XXpx på #min liste li

Det er dog ikke nødvendigt at angive fontstørrelsen både ved BODY og mintabel, hvis du har planer om udelukkende at opbygge din side i en tabel.

Du mangler en link på din DOCTYPE, ellers sættes browseren bare i quirksmode og du har yderst begrænset kontrol over hvordan din side fortolkes/vises

så brug:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

og du mangler at fortælle hvilket tegnsæt browseren skal bruge (dansk), så:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

og definer først stien til din css efter TITLE og META

Kan ikke rigtig forholde mig til HVAD det er du ønsker. Den kode du lister centrer ALT OGSÅ din bullitliste. Er det det du vil, mhh næppe, eller hva ;)
Jeg antager at du kun ønsker at centrere selve tabellen i browserens vindue. CSS og html kommer så til at se sådan her ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>

<TITLE>Intro</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<link rel="stylesheet" href="test.css" type="text/css" media="screen">
</HEAD>

<BODY>
<div align="center">
  <center>
    <TABLE WIDTH="523" BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD class="mintabel">
   
        <p>En eller anden tekst her...</p>
       
            <ul id="minliste">
                <li>Milk</li>
                <li>Eggs</li>
                <li>Cheese</li>
                <li>Vegetables</li>
                <li>Fruit</li>
            </ul>
       
        <p>Mere tekst ind hernede</p>
    </TD></TR></TABLE>

  </center>
</div>

</BODY>

</HTML>


.......og den tilhørende CSS

BODY, p {
    font-size: 11px;
    color: #0D6B08;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-style: normal;
    text-decoration: none;
    background-color: #ffff99;
    SCROLLBAR-FACE-COLOR: #ffd979;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffd979;
    SCROLLBAR-SHADOW-COLOR: #ffd979;
    SCROLLBAR-3DLIGHT-COLOR: #ffd979;
    SCROLLBAR-ARROW-COLOR: #ffff99;
    SCROLLBAR-TRACK-COLOR: #ffeab9;
    SCROLLBAR-DARKSHADOW-COLOR: #666666;
    BACKGROUND-COLOR: #ffff99;
}

A:link, A:visited
{
    text-decoration: none;
    color: #0D6B08;
}

A:hover, A:active
{
    color: #FF0000;
    text-decoration: none;
    font-style: italic;
}


.mintabel {
    font-size: 11px;
    color: #0D6B08;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    text-align: left;     /*Venstrejuster teksten i tabellen*/
    border : 1px dotted; /*prikker rundt om tabellen*/
    border-color : #000000; /*farve på prikker rundt om tabellen*/
}

#minliste
{
    margin-left: 0px;
    padding-left: 0px;
   
}

#minliste li {
    list-style: square;
    font-size: 9px;
    margin-left: 20px;
    padding: 0px;
}
Avatar billede susanne_larsen Nybegynder
02. februar 2005 - 20:17 #13
>>ntq kan du få det til at virke ?
Avatar billede Slettet bruger
02. februar 2005 - 20:21 #14
Nej, for jeg vil gerne have det helt ud til venstre margen, og det kan åbenbart ikke lade sig gøre
Avatar billede susanne_larsen Nybegynder
07. februar 2005 - 18:26 #15
tja hvis du sætter #minliste li til flg:

#minliste li {
    list-style: square;
    font-size: 9px;
    margin-left: 15px;
    padding: 0px;
}

så bliver bullit-listen (i IE) rykket helt til venstre kant. Kan ikke fra denne her PC tjekke om det er crossbrowser ;)
Avatar billede sonne Nybegynder
25. marts 2005 - 22:58 #16
må jeg foreslå ntg
http://www.html.dk/
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 22:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
I går 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
White papers
Flere white papers »