---

Hej NG

Jeg arbejder på en side, hvor man ved klik på et link kan skifte sidens
design. Oprindeligt havde siden en header i grafik, men ved designskift
passer grafikken ikke.

Jeg har derfor tænkt mig at lave noget i denne retning:

html

<img id="hl" alt="headline" title="Sidens logo">

css

#hl {
[definition af billedets path/filnavn]
width: 430px;
height: 48px;
}

I de forskellige css-filer skal der defineres forskellige billeder (ikke
baggrundsbilleder!).

Jeg mener at have set et sted, hvordan man definerer et filnavn til billedet
i css, men jeg kan ikke finde det.

Da siden bliver udarbejdet i forskellige versioner til designskift via asp,
php og javascript, der alle benytter samme sæt css-filer til at skifte
design, er hverken client- eller serversidedefinition af billedet
umiddelbart en option.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

Erik Ginnerskov skrev:

> Jeg mener at have set et sted, hvordan man definerer et
> filnavn til billedet i css, men jeg kan ikke finde det.

Jeg tror du har set syner. Du kan definere baggrundsbilleder, men
ikke forgrundsbilleder med css.

Du kunne vælge at have alle billederne i html-koden, og så benytte
css til at definere hvad der skal vises - men det vil give en del
spildtrafik ved første load.

Jeg tror mere på en udgave hvor du benytter forskellige
baggrundsbilleder defineret i css - de kan om nødvendigt kombineres
med et fælles forgrundsbillede.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:

>> Jeg mener at have set et sted, hvordan man definerer et
>> filnavn til billedet i css, men jeg kan ikke finde det.
>
> Jeg tror du har set syner. Du kan definere baggrundsbilleder, men
> ikke forgrundsbilleder med css.

Så er det nok derfor, jeg ikke kan finde det "igen".

> Jeg tror mere på en udgave hvor du benytter forskellige
> baggrundsbilleder defineret i css - de kan om nødvendigt kombineres
> med et fælles forgrundsbillede.

Den vil jeg så prøve at arbejde videre med. Tak for input.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> writes:

> Jeg mener at have set et sted, hvordan man definerer et filnavn til billedet
> i css, men jeg kan ikke finde det.

Det kan man godt. Det virker bare ikke i alle browsere (fx ikke i IE, så
anvendeligheden er begrænset ... men på den anden side kunne man måske
bruge IE's filtre til noget lignende, hvis man ved hvordan).

#h1 {
content: url(sti/til/image.png);
width: 430px;
height: 48px;
}

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:

> Det kan man godt. Det virker bare ikke i alle browsere (fx ikke i IE, så
> anvendeligheden er begrænset ... men på den anden side kunne man måske
> bruge IE's filtre til noget lignende, hvis man ved hvordan).
>
> #h1 {
> content: url(sti/til/image.png);
> width: 430px;
> height: 48px;
> }

Det er vist ikke helt rigtigt. Så vidt
jeg ved kan content-egenskaben kun knyttes
til pseudoelementerne :before og :after,
så

#h1:before {
content: url(sti/til/image.png);
width: 430px;
height: 48px;
}

vil placere billedet inline foran h1-over-
skriften.

#h1:before {
content: url(sti/til/image.png);
width: 430px;
height: 48px;
display:block;
}

vil placere billedet over overskriften.



--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Lasse Reichstein Nielsen wrote:

>> Jeg mener at have set et sted, hvordan man definerer et filnavn til
>> billedet i css, men jeg kan ikke finde det.
>
> Det kan man godt. Det virker bare ikke i alle browsere (fx ikke i IE,
> så anvendeligheden er begrænset

Jeg valgte at følge Jens' råd og lavede følgende:

I html
<img src="usynlig.gif" width="430" height="48" id="hl" alt="logo" />

Og i css
#hl {
color: inherit;
background: url(headline.gif) no-repeat;
}

Det fungerer helt gnidningsløst. I de forskellige css-filer definerer jeg så
bare forskellige baggrundsbilleder og designskiftet er hjemme.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/