Avatar billede jps2mt Nybegynder
10. juli 2006 - 17:15 Der er 8 kommentarer og
1 løsning

Første bogstav i hvert ord med rødt, hvordan?

Jeg har fået en lille opgave i forbindelse med en CMS site jeg er ved at sætte op for en kunde...

Kunden ønsker, i menuen, at hvert ord i en sætning startes med et rødt bogstav.

p:first-letter er ikke nok, da det kun gælder det første bogstav i en <p></p> sammenhæng...

Er der en CSS metode til at få første bogstav i hvert ord farvet rødt?
Avatar billede milandt Nybegynder
10. juli 2006 - 18:20 #1
css:

p:first-letter { color: #ff0000; }

html:

<p>test</p>
Avatar billede milandt Nybegynder
10. juli 2006 - 18:20 #2
oh, første bogstav i _hvert_ ord.. ovenstående gør kun det første bogstav i hver p rødt.
Avatar billede jps2mt Nybegynder
10. juli 2006 - 18:30 #3
Nemlig...Det skrev jeg også i teksten ;)
Avatar billede milandt Nybegynder
10. juli 2006 - 21:41 #4
så er svaret "nej".

sæt et span element rundt om de bogstaver du ønsker i en anden farve, og giv dette span element en klasse.

css:

span.firstletter { color: red }

html:

<p><span class="firstletter">J</span>eg <span class="firstletter">e</span>t <span class="firstletter">h</span>us <span class="firstletter">m</span>ig <span class="firstletter">b</span>ygge <span class="firstletter">v</span>il</p>

nej, det er ikke kønt
Avatar billede Slettet bruger
10. juli 2006 - 23:32 #5
Hvis du vil have lidt mindre kode, kunne følgende måske bruges:

css:

#menu em {
  color: red;
  text-decoration: none;
}

html:

<p><em>J</em>eg <em>e</em>t <em>h</span>us <em>m</em>ig <em>b</em>ygge <em>v</em>il</p>

Fidusen er, at i CSS-koden binder vi os op på et id, som skal være på hele menuen, og så kan vi slippe for at bruge klasser på em inde i menuen.
Avatar billede milandt Nybegynder
11. juli 2006 - 11:42 #6
Ja, i princippet præcis det samme. Bare vær opmærksom på at i sandbox's måde at gøre det på bliver din tekst også kursiv.

Tilføj yderligere til #menu em { font-style: normal; }
Avatar billede Slettet bruger
11. juli 2006 - 15:09 #7
Det var egentlig meningen, at jeg ville have slået kursiv fra. Det var det, jeg havde tænkt med text-decoration: none; men den fjerner bare understregning og den slags, så den bør erstattes af den font-style: normal som milandt skrev.

Og grunden til at jeg lige valgte em, er at der er jo tale om en fremhævning af det første bogstav, og em er lige netop det element, der er beregnet til at fortælle browseren, at noget skal fremhæves.
Avatar billede jps2mt Nybegynder
11. juli 2006 - 18:10 #8
Har kodet det i PHP istedet, da det er noget dynamisk genereret noget jeg skulle bruge det til...
Avatar billede milandt Nybegynder
11. juli 2006 - 23:13 #9
mmkay......
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