Jump to content
Just nu i M3-nätverket

Komma åt textnod med CSS


Gerhard

Recommended Posts

Håller på och mixtrar lite med min blogg, där jag försöker få till det så att första bokstaven i varje inlägg blir väldigt stor. Detta fixar jag med first-letter i CSS. Dock är det så att de inlägg som innehåller en bild inte får den här stora bokstaven, och jag vet nog varför:

 

Ett vanligt inlägg ser ut som såhär, och funkar helt felfritt:

 

<p>Detta är en text...</p>

 

De med bild ser dock lite annorlunda ut, då a-taggen (bilderna är länkar) ligger före brödtexten eftersom de ska vara float: right:

 

<p><a href="http..."><img src="bild.jpg" /></a>Detta är en text...</p>

 

När jag väljer att första bokstaven ska vara annorlunda så verkar webläsaren även räkna med de första taggarna. Man hade ju kunnat tro att dessa skulle ignoreras, men tyvärr är det inte så.

Man hade ju kunnat skriva om koden, men då det ligger hårdkodat i databasen så känns det inte som ett bra alternativ, då jag först måste uppdatera alla rader med en sql-sats, sedan skriva om php'n (vilket jag inte behärskar) för att även nya inlägg ska se likadana ut.

 

Några förslag? Enklast vore ju helt enkelt om jag kunde komma åt texten efter a-taggen på ett smidigt sätt.

Link to comment
Share on other sites

Det enklaste vore förstås:

<div><a href="http..."><img src="bild.jpg" /></a><p>Detta är en text...</p></div>

eller lägga texten i en <span> som kan användas som mål.

Men eftersom det inte verkar så genomförbart:

 

Det enda jag kan tänka mig är att använda a:after med :first-letter men då måste du även infoga bokstaven.

ccs2 kan nog helt enkelt inte träffa så exakt…

 

En lösning med javaskript vore förstås möjligt.

Link to comment
Share on other sites

Jo, jag har också testat :after, men det verkar ju som sagt inte vara så dynamiskt. Får känslan i alla fall att det jag är ute efter inte är möjligt utan att använda sig av annan kod, t.ex. just javascript. Kanske borde försöka något sådant. Kan dock föreställa mig att sidan blir lite långsammare vid inladdningen.

Link to comment
Share on other sites

Jo, jag har också testat :after, men det verkar ju som sagt inte vara så dynamiskt. Får känslan i alla fall att det jag är ute efter inte är möjligt utan att använda sig av annan kod, t.ex. just javascript. Kanske borde försöka något sådant. Kan dock föreställa mig att sidan blir lite långsammare vid inladdningen.
Den lilla mängd kod man behöver för detta innebär inte särskilt mycket extra tyngd. Däremot innebär det förstås en liten extra ansträngning för klienten och det fungerar inte om javascript är avstängt.

 

Det bästa är naturligtivs att bekämpa problemet vid källan, alltså se till att servern levererar rätt kod. (Spara html direkt i databasen är inte en särskild bra lösning i sig.)

Link to comment
Share on other sites

(Spara html direkt i databasen är inte en särskild bra lösning i sig.)

 

Det är wordpress som väljer att spara så, inte jag. :P

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...