At lægge en tekst oven på et foto via CSS?

WordPress DK Forum » Temaer

At lægge en tekst oven på et foto via CSS?

(9 indlæg) (3 voices)

Startet for 15 years siden af peterhenrichsen
Seneste svar fra Mark Thomas Gazel
This topic is not resolved

Tags:

peterhenrichsen

Supermedlem
Joined: apr '07
Posts:
Reputation:

Kære Wp'ere

Sidder og hygger mig med CSS, og har kigget lidt med Mark på dette problem, som jeg dog stadig ikke har fået løst.

Når jeg fx har en fakta-box i en artikel, kunne det være lækkert at lægge et foto nedenunder, i stedet for blot een fast farve. På engelsk plejer man at kalde det "Superimpose text over an image". Altså i stedet for at bruge Photoshop til at lægge tekst på et billedet, og læggde det op i WP, ja, så har man blot billedet som baggrund, og via sin CSS lægger man så blot almindelig html-tekst oven på. Smart nok, kan bare ikke få det til at virke :-)

CSS'en ser sådan ud:

#blackbox {
background: transparent url(/images/blackbox.jpg);
background-repeat: no-repeat;
height: 400px;
width: 220px;
float: right;
margin: 0px 10px 20px 20px !important;
border-top: 2px solid #2D4265;
border-bottom: 1px solid #2D4265;
padding: 20px 20px 10px 18px !important;
}

#blackboxtext {
position: relative;
height: auto;
width: auto;
left: 10px;
top: 10px;
}

Og i artiklens html kaldes blot med div og id="backbox" etc.

Det mest af CSS'en virker også fint i ovenstående - bare ikke billedet.

I http://kulturfoto.dk/2009/01/09/ungdomsanmeldelse-camp-rock/
benyttes referencen til CSS en helt nederst i artiklen sidste afsnit "Camp Rock Soundtrack" hvor billedet af den sorte box /images/blackbox.jpg skulle være kommet frem i boksen bag ved billedet af CD-coveret og bag teksten om land, distributør, releasedato og så videre. Dén tekst, er den der skulle være "superimposed" altså klistret oven på mit baggrundbillede, men resultatet er blot hvid baggrund som det ses, dog med fine top- og bottom-borders som CSS angiver. Så det meste af CSS'en virker altså, på nær billedet.

Min sorte boks kan sagtens kaldes direkte:

http://www.kulturfoto.dk//wp-content/themes/revolution_blog_split-10/images/blackbox.jpg

I CSS'en har jeg forsøgt at bruge ID i stedet for CLASS når jeg kalder blackbox, men der er ingen forskel.

Hvorfor kommer min blackbox mon ikke på?

Ligger den bag ved noget?

Alle bud modtages med tak :-)

Bedste hilsner Peter

Skrevet 15 years siden #
peterhenrichsen

Supermedlem
Joined: apr '07
Posts:
Reputation:

Ja ok, min sorte boks giver så en "Forbidden" når jeg ikke selv er logget ind, og billedet kaldes direkte, men den sorte boks ligger nu korrekt nok via den sti :-)

Skrevet 15 years siden #
Søren Hugger Møller

Senioradministrator
Joined: mar '07
Posts:
Reputation:

Det baggrundsbilleder der forøges indlæst er http://kulturfoto.dk/images/blackbox.jpg, prøv at ændre din reference til billedet fra "/images/blackbox.jpg" til "images/blackbox.jpg".

Søren Hugger Møller - http://spiri.dk

Skrevet 15 years siden #
peterhenrichsen

Supermedlem
Joined: apr '07
Posts:
Reputation:

Hey Spiri

Så tæt på, og alligevel så langt fra! Det virker sgu! Taak, du er dagens mand, for det har jeg brugt lang tid på. :-)

Jeg nappede kode her: http://articles.techrepublic.com.com/5100-10878_11-5169871.html

og der er også en slash foran. Det må nok være en fejl så.

Så kommer der lige et spørgsmål mere, blot for at forstå det. Når jeg fjerner foranliggende slash, hvordan ved WP så at den skal kigge i images katalog i temaet?
Domænetnavnet er selvfølgelig givet, men hvor kender den, den mellemliggende sti /wp-content/themes/temanavnet fra? Altså det der ligger mellem domænenavnet og /images kataloget i temaet.

Mange hilsner og tak

Peter

Skrevet 15 years siden #
Søren Hugger Møller

Senioradministrator
Joined: mar '07
Posts:
Reputation:

Den første / gør at der bliver kigget i roden af serveren, altså kulturfoto.dk/images. Når du fjerner den første / bliver der kigget ud fra den placering style.css har. Det vil sige at når style.css ligger i kulturfoto.dk/wp-content/themes/temanavn/, så fortsættes der bare derfra, hvilket betyder at der kigges i kulturfoto.dk/wp-content/themes/temanavn/images/.

Det er altså ikke en fejl i artiklen, de har bare gået ud fra at billedet havde en anden placering i forhold til css-filen, end den havde i dit tilfælde :)

Skrevet 15 years siden #
peterhenrichsen

Supermedlem
Joined: apr '07
Posts:
Reputation:

Super enkelt forklaring. Tænkte slet ikke over at den tog udgangspunkt i det bibliotek hvor CSS'en lå.

Skønt når man lærer noget nyt.

1000 tak for hjælp og forklaring, spiri.

Mange hilsner Peter

Skrevet 15 years siden #
peterhenrichsen

Supermedlem
Joined: apr '07
Posts:
Reputation:

Hm, og så mangler jeg bare at få Status på dette topic til at være resolved. Den hopper hele tiden tilbage til not-resolved, når jeg forsøger at ændre.

Men altså: dette problem er løst! :-)

Skrevet 15 years siden #
Søren Hugger Møller

Senioradministrator
Joined: mar '07
Posts:
Reputation:

Velbekomme, godt at du fik det til at virke :)

Og ja, der er lidt bugs i forummet i øjeblikket, så det er deværre ikke muligt at ændre status.

Skrevet 15 years siden #
Mark Thomas Gazel

Senioradministrator
Joined: maj '06
Posts:
Reputation:

Velbekomme, godt at du fik det til at virke :)

Ja, dit falkeøje var bedre end mit.

Og ja, der er lidt bugs i forummet i øjeblikket, så det er deværre ikke muligt at ændre status.

Der må snart komme bug-fri version 1.0.

Mark Thomas Gazel
"Jeg er ikke ung nok til at være erfaren" - Oscar Wilde
http://mark.gazel.dk

Skrevet 15 years siden #

RSS feed for this topic

Svar

Du skal være logget ind for at skrive.