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.dkMit 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(
15. september 2005 - 13:24
#1
Har du prøvet med en padding-top ?-)
15. september 2005 - 13:25
#2
-- eller margin-top !-)
15. september 2005 - 13:27
#3
Hvordan - hvorhenne?
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.
15. september 2005 - 13:30
#5
altså lav 4-5 gennemsigtige pixels over din bullet, inde i PS eller lign.
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>
15. september 2005 - 22:03
#7
olebole - jeg synes ikke rigtig, det har nogen effekt at indsætte den linje på siden .. ??
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 !-)
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(
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]
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 :)
16. september 2005 - 02:29
#12
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
20. september 2005 - 16:23
#14
- men det har ikke meget med semantik at gøre, vel? :)
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??
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."
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..
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)
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
29. september 2005 - 21:14
#20
Hm - jeg mangler altså lige olebole og jokkejensen - vil I lægge et svar??
30. september 2005 - 06:25
#21
her er et fra mig.. :)
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*
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
30. september 2005 - 13:49
#24
Hej Kroko!
Jeg tester i version 7.2.
/Rip
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
Vi tilbyder markedets bedste kurser inden for webudvikling
