Avatar billede ripley Nybegynder
15. september 2005 - 13:21 Der er 23 kommentarer og
2 løsninger

Placering af tekst med bullets

Jeg er ved at lave denne side:

www.coodu.dk

Mit problem er for det første, at bullets'ene står lidt højere oppe end hver tekstlinje .. de er lavet med et lille grafik-stykke og tilføjet min css:

ul.frontpageRight {
    margin-left: 0;
    padding-left: 0;
    padding: 0;
    margin: 0;
    line-height: 26px;   
    list-style-image: url(../graphics/bullet.gif);
}

Mit andet problem er, at bullets til højre skal være fordelt nedover siden så den nederste linje flugter med teksten i venstre-siden .. hvilket den kun næsten gør.
De to ting hænger jo sammen, derfor har jeg oprettet ét spørgsmål herinde.
For jeg har "spredt" linjerne med bullets med ovennævnte "line-height", og det gør, at bullets kommer til at stå lidt fjollet.

Gav det nogen mening???
Jeg giver en del points, da jeg har siddet længe og bøvlet med det og ikke kan komme nogen vegne .. når jeg får den nederste tekstkant til at flugte, så flugter de to stykker tekst i henh. venstre- og højresiden ikke .. og omvendt :o(
Avatar billede roenving Novice
15. september 2005 - 13:24 #1
Har du prøvet med en padding-top ?-)
Avatar billede roenving Novice
15. september 2005 - 13:25 #2
-- eller margin-top !-)
Avatar billede ripley Nybegynder
15. september 2005 - 13:27 #3
Hvordan - hvorhenne?
Avatar billede jokkejensen Novice
15. september 2005 - 13:28 #4
Jeg plejer at lave min bullet med den højde der er passende til at bulleten kommer til at stå som ønsket, altså selvom din bullet er ex. 2x2 px.. så laver jeg den alligevel 2xline-height, altså igennem billedet sørger for at den bliver centreret.

Da den er aligned top, og ikke kan centreres gennem CSS, tror jeg dette er den letteste løsning.
Avatar billede jokkejensen Novice
15. september 2005 - 13:30 #5
altså lav 4-5 gennemsigtige pixels over din bullet, inde i PS eller lign.
Avatar billede olebole Juniormester
15. september 2005 - 13:39 #6
<ole>

Den vertkale placering af din bullet afhænger ganske rigtigt af grafikken - og bør rettes her.

At få de nederste linjer til at flugte kræver formodentlig, du ikke sætter en DTD, der disabler de vigtigste dele af CSS i IE. Brug i stedet denne:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- ellers er det ikke til at regne med CSS - eller forudsige, hvordan siden renderes.

/mvh
</bole>
Avatar billede ripley Nybegynder
15. september 2005 - 22:03 #7
olebole - jeg synes ikke rigtig, det har nogen effekt at indsætte den linje på siden .. ??
Avatar billede roenving Novice
15. september 2005 - 22:05 #8
Man har lov til at håbe, at den linje ikke betyder noget, men oftest betyder det ret meget, hvis man tvinger IE til at overholde væsentlige dele af css-rekommendationerne !-)
Avatar billede ripley Nybegynder
15. september 2005 - 22:33 #9
Hm, hvis jeg indsætter den linje så "hopper" den øverste tekst i venstresiden en smule ned, så de øverste tekster ikke flugter længere.
Har jeg så virkelig lyst til at ændre den linje???

ARGH - jeg kan ikke få det her til at funke :o(
Avatar billede roenving Novice
15. september 2005 - 22:43 #10
Har du prøvet at se siden i andre browsere end IE ?-)

-- da man må forvente, at der i det grafiske miljø findes en hel del nørder og specielt en hel del Mac-brugere, bør du minimum teste det op mod nogle af de almindeligste alternativer, f.eks. en Gecko-browser (som virker næsten ens på windows og Mac, hvis ikke helt ens !-), og helst også på en Safari ...

-- hvis det skal fungere rimeligt ens, er det et must, at du angiver en fuldt kvalificeret doctype, da IE ellers benytter det som undskyldning til at disable væsentlige dele af css-rekommendationerne !o]
Avatar billede olebole Juniormester
16. september 2005 - 02:27 #11
De fleste er nok lidt tunge i r...., når det gælder om at indse nødvendigheden og komme igang med en fuld DTD. Jeg har til gengæld aldrig hørt om nogen, der er gået den anden vej - endsige tænkt tanken  :)
Avatar billede olebole Juniormester
16. september 2005 - 02:29 #12
Avatar billede krokohunter Nybegynder
20. september 2005 - 14:05 #13
En måde at centrerer dine bullet på (når de er grafik) er ved at sætte din list-style til none, og så definerer din grafik som baggrund på dine <li> tags..

#menu ul {
    list-style: none;
    }

#menu ul li {
    background: url(../images/default/bullet.jpg) no-repeat 0 50%;
    padding-left: 20px;
    }

det er de 50% der centrerer i forhold til din list-item. Så bruger du bare en padding-left til at skubbe din list-item ud på højre side af din bullet-grafik.

Hygge
Kroko
Avatar billede olebole Juniormester
20. september 2005 - 16:23 #14
- men det har ikke meget med semantik at gøre, vel?  :)
Avatar billede ripley Nybegynder
21. september 2005 - 12:33 #15
.. suk, det virker ikke i Netscape.
Det ser ellers PERFEKT ud i IE.

Hm, måske skulle jeg bare stoppe her - medmindre der er flere lyse idéer??
Avatar billede olebole Juniormester
21. september 2005 - 14:34 #16
- jamen, du har da vel også fået svaret:
  "Den vertkale placering af din bullet afhænger ganske rigtigt af grafikken - og bør rettes her."
Avatar billede jokkejensen Novice
21. september 2005 - 15:11 #17
hehe ja, hvis du stadig ikke har fået det til at virke, ville jeg nok også bare have klippet grafikken ud..
Avatar billede ripley Nybegynder
22. september 2005 - 09:15 #18
Nu har jeg klippet grafikken ud, jeg gider simpelthen ikke mere.
Der sker jo også det, at hvis tingene flugter som de skal kan brugeren bare skifte tekststørrelse, så har vi ballanden igen, tilsynelandende :o(

Jeg vil gerne fordele points således, hvis det er OK med jer, at olebole, jokkejensen og krokohunter alle får points - jeg syntes i alle kom med 3 forskellige, konkrete bud på hvad der kunne løse problemet og jeg blev lidt klogere af alle 3 bud.
Læg et svar - og I skal blive belønnet :o)
Avatar billede krokohunter Nybegynder
22. september 2005 - 09:25 #19
Jeg takker og bukker.... Du har allerede fået et svar fra mig ...

Må da lige hjem og tjecke hvorfor det ikke virker i Netscape. Det er et trick jeg har lært fra Dan Cederholms første bog ... Kan ikke huske om han skriver noget om kompatibilitetsproblemer, men det vil jeg da gå hjem og tjecke.

Cheers
Kroko
Avatar billede ripley Nybegynder
29. september 2005 - 21:14 #20
Hm - jeg mangler altså lige olebole og jokkejensen - vil I lægge et svar??
Avatar billede jokkejensen Novice
30. september 2005 - 06:25 #21
her er et fra mig.. :)
Avatar billede ripley Nybegynder
30. september 2005 - 11:21 #22
olebole - hvis du ikek snart svarer, så går point ubeskåret til de andre .. hvor længe tør du vente? *GG*
Avatar billede krokohunter Nybegynder
30. september 2005 - 11:49 #23
Hey Ripley.

jeg kan nu ikke forstå, at du ikke kan få det til at virke i Netscape. Jeg bruger det selv på en side jeg er ved at lave. Jeg har lige testet den i Nescape 8.0, og der ser det fint ud.

Hvilken version har du testet det i?

Cheers
Kroko
Avatar billede ripley Nybegynder
30. september 2005 - 13:49 #24
Hej Kroko!

Jeg tester i version 7.2.

/Rip
Avatar billede krokohunter Nybegynder
07. oktober 2005 - 14:37 #25
Hey Ripley ..

Nu har jeg testet, en af de sider hvor jeg bruger den omtalte teknik, i Netscape 7.2, og det ser ud til at virke fint nok hos mig ....

Cheers
Kroko
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