Avatar billede skizo_someone Nybegynder
23. august 2005 - 17:53 Der er 26 kommentarer og
2 løsninger

Opstilling af punkt-lister med lige stor afstand.

Bag den noget kryptiske overskrift gemmer dig sig dette problem.

Jeg har på min hjemmeside en punktopstilling af noget tekst, altså en

<ul>
<li>punkt 1</li>
<li>punkt 2</li>
</ul>

Mit problem er, at hvis teksten i punkt er så lang at den skal "beskæres" til flere linjer, så starter disse linjer under selve punkt-tegnet. Jeg vil gerne have det således at de linjer der er associeret med et punkt har den samme afstand fra sidens kant - hvis i forstår :)

Håber i kan hjælpe mig
Christian Rasmussen
Avatar billede nielle Nybegynder
23. august 2005 - 17:58 #1
Måske er det dette du leder efter?

CSS-stylen

ul.outside {
    list-style-position: outside
}

HTML-taggen:

<ul class="outside">
Avatar billede skizo_someone Nybegynder
23. august 2005 - 17:59 #2
jamen jeg kan da lige prøve...
Avatar billede nielle Nybegynder
23. august 2005 - 18:00 #3
Avatar billede skizo_someone Nybegynder
23. august 2005 - 18:03 #4
nej, jeg synes ikke rigtigt det har den ønskede effekt
Avatar billede skizo_someone Nybegynder
23. august 2005 - 18:04 #5
selvom jeg kan se at det, ifølge de links du lige har posted, burde være det der skulle til...
Avatar billede olebole Juniormester
23. august 2005 - 18:04 #6
<ole>

Jamen, det er da netop sådan en UL opfører sig - så du må selv have gjort noget aktivt for at ophæve denne opførsel  :)

/mvh
</bole>
Avatar billede nielle Nybegynder
23. august 2005 - 18:06 #7
Kan du poste noget af din kode? Eller eventuelt give os et link?
Avatar billede skizo_someone Nybegynder
23. august 2005 - 18:06 #8
hmm...nu skete der noget, det ser ud til at det er det der skal til, men det resulterer så i at Firefox placerer puntkerne ret sjovt i forhol til designet... tag en kigger på: http://dev.pornogris.dk/cms/core.php?module=content&file=read&page_id=6
Avatar billede skizo_someone Nybegynder
23. august 2005 - 18:07 #9
jeg vil på forhånd godt sige at jeg ikke er den store css haj, så jeg tør ikke garantere at den måde jeg har fået designet til at opføre sig som jeg vil have det til, er den mest valide måde :)
Avatar billede nielle Nybegynder
23. august 2005 - 18:09 #10
Jeg får "Sjove" prikker i Mozilla og FireFox. Men, jeg ser dem slet ikke i MSIE.
Avatar billede nielle Nybegynder
23. august 2005 - 18:11 #11
Jeg kan se at du førsøger at lave siden som XHTML - det har Ole nok snart et par skrappe kommentarer til!

Det korte og det lange er at det kan du ikke. Brug i stedet denne:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede olebole Juniormester
23. august 2005 - 18:12 #12
Enten:

<ul style="list-style-position: outside">

- eller:

<style type="text/css">
.myClass {
  list-style-position: outside
}
</style>

<ul style="myClass">
Avatar billede olebole Juniormester
23. august 2005 - 18:13 #13
nielle >> Det kan han nok ikke, da han er så uheldig at sidde med et eller andet skod-CMS  :oP
Avatar billede olebole Juniormester
23. august 2005 - 18:14 #14
- og så var der en fejl i min forrige kommentar. Der skulle stå:

Enten:

<ul style="list-style-position: outside">

- eller:

<style type="text/css">
.myClass {
  list-style-position: outside
}
</style>

<ul class="myClass">
Avatar billede olebole Juniormester
23. august 2005 - 18:24 #15
Fejlen ligger i dit style-sheet. Du havde i forvejen denne liggende:

ul { line-height: 14px; list-style-type: disc; margin: 1em 0 1em 40px; list-style-position: outside; }

- så du kan godt slette din nye klasse 'outside'.

Til gengæld er IE og Moz ikke enige om at bruge margin og padding i lister, så du skal i stedet skrive:

ul { line-height: 14px; list-style-type: disc; margin: 1em 0 1em 40px; padding: 1em 0 1em 40px; list-style-position: outside; }

Så renderes listen (næsten) ens i de to browsere - så kan du tilpasse de enkelte værdier, så de passer med dine ønsker  :)
Avatar billede skizo_someone Nybegynder
23. august 2005 - 18:25 #16
ja, jeg har har fået opstillingen til at virke nu, men kan i greje hvor fejlen der får punkterne til at være underligt placeret i forhold til det hvide areal, er?
Avatar billede nielle Nybegynder
23. august 2005 - 18:28 #17
Lige nu har du skrevet:

<ul class="ul.outside">

- men det skal være:

<ul class="outside">

Desuden har du to definitioner af stylen for <ul> i dit stylesheet.

ul { line-height: 14px; list-style-type: disc; margin: 1em 0 1em 40px; list-style-position: outside; }

- og:

UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px }
Avatar billede olebole Juniormester
23. august 2005 - 18:30 #18
Nej, nielle ... læs min sidste kommentar  :)

skizo_someone >> spring den kommentar over  :)
Avatar billede olebole Juniormester
23. august 2005 - 18:31 #19
*LooL* - bortset fra du naturligvis skal slette den sidste, nielle viste dig  ;D
Avatar billede olebole Juniormester
23. august 2005 - 18:35 #20
Altså ... denne:
    <ul class="ul.outside">

- skal se sådan ud:
    <ul>

Så skal denne slettes:
    UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px }

- og i stedet for denne:
    ul { line-height: 14px; list-style-type: disc; margin: 1em 0 1em 40px; list-style-position: outside; }

- skriver du:
    ul { line-height: 14px; list-style-type: disc; margin: 1em 0 1em 40px; padding: 1em 0 1em 40px; list-style-position: outside; }

Så burde det køre  :)
Avatar billede skizo_someone Nybegynder
23. august 2005 - 18:35 #21
weee...det hjalp en del, nielle, tak fordi du mindede mig om at der lå en masse underlig  css som skulle slettes, det var jeg helt kommet fra :)
Avatar billede skizo_someone Nybegynder
23. august 2005 - 18:37 #22
jeg fangede godt de små fejl, jeg kan heldigvis godt lidt css, så jeg har fået det til at virke som i mente :)

Hvis i begge vil være så venlige at oprette et svar, så skal jeg belønne jer :)
- og jeg godtager ikke noget "jeg bruger ikke point" for et stykke arbejde skal belønnes!
Avatar billede nielle Nybegynder
23. august 2005 - 18:57 #23
Jeg kan se at du har fået dem på plads i Mozilla og FireFox, hvorimod jeg slet ikke kan se dem i MSIE. Nå, det skyldes jo nok det XHTML som vi var inden om før.

... og et svar :^)
Avatar billede olebole Juniormester
23. august 2005 - 19:49 #24
Nej, den fejl kan ikke skyldes XHTML'en, men at spørgeren stadig ikke har gjort det rigtigt  :)

skizo_someone >> Du skal angive _både_ padding og margin ... og de skal være ens:

    ul { line-height: 14px; margin: 12px 0 12px 0; padding: 12px 0 12px 0; list-style-type: disc; list-style-position: outside; }

- så bliver det ens i FF og IE  ;o)
Avatar billede skizo_someone Nybegynder
23. august 2005 - 20:18 #25
nu prøvede jeg at paste din ul direkte ind ole, det har resulteret i at IE stadig ikke viser punkterne men også at FF igen placerer dem underligt - jeg prøver at rode lidt med det :)
Avatar billede skizo_someone Nybegynder
23. august 2005 - 20:20 #26
ja nemlig...sådan dér! :D
Avatar billede olebole Juniormester
23. august 2005 - 20:42 #27
- tak for points  :)
Avatar billede nielle Nybegynder
23. august 2005 - 21:14 #28
Nøøøj, pæne prikker i alle tre browsere ;^)

... og takker for point. :^)
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