---

Hej! Jeg har lavet en tabel med opacity(Den er gennemsigtig).
Så vil jeg gerne have sat et billede ind i den, men billedet
bliver automatisk gennemsigtigt ligesom tabellen. Nogen der har
en idé til, hvordan jeg kan forhindre det?

-Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Den 06-03-2010 21:22, Christoffer Overgaard skrev:
> Hej! Jeg har lavet en tabel med opacity(Den er gennemsigtig).
> Så vil jeg gerne have sat et billede ind i den, men billedet
> bliver automatisk gennemsigtigt ligesom tabellen. Nogen der har
> en idé til, hvordan jeg kan forhindre det?

Kom med et link til din side, så skal vi nok kigge på det.

Jeg ved godt, tror jeg, hvad problemet er, men vil hellere have linket
først.



MVH
Rune Jensen

---

Rune Jensen wrote in dk.edb.internet.webdesign.html:
> Den 06-03-2010 21:22, Christoffer Overgaard skrev:
> > Hej! Jeg har lavet en tabel med opacity(Den er gennemsigtig).
> > Så vil jeg gerne have sat et billede ind i den, men billedet
> > bliver automatisk gennemsigtigt ligesom tabellen. Nogen der har
> > en idé til, hvordan jeg kan forhindre det?
>
> Kom med et link til din side, så skal vi nok kigge på det.
>
> Jeg ved godt, tror jeg, hvad problemet er, men vil hellere have linket
> først.
>
>
>
> MVH
> Rune Jensen


Ja, har et link her: http://cjovergaard.dk/eksempel/

-Christoffer


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Christoffer Overgaard skrev:
> Rune Jensen wrote in dk.edb.internet.webdesign.html:
>> Den 06-03-2010 21:22, Christoffer Overgaard skrev:
>>> Hej! Jeg har lavet en tabel med opacity(Den er gennemsigtig).
>>> Så vil jeg gerne have sat et billede ind i den, men billedet
>>> bliver automatisk gennemsigtigt ligesom tabellen. Nogen der har
>>> en idé til, hvordan jeg kan forhindre det?

Der #tabel2, hvis hele indhold er gennemskinneligt.
Den klemme kommer du du af, hvis du giver tabel2
position-egenskaben reltive og dernæst positionerer
dit billedet inde i tabel2 med position-værdien absolute
(evt. med float). På den måde stabler du populært sagt
billedet oven på tabelcellen.

Men hvorfor en tabel? Opgaven kan lige så let løses med
den mere korrekte div. Jf. de seneste dages diskussion
om netop dette emne.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

> Der #tabel2, hvis hele indhold er gennemskinneligt.
> Den klemme kommer du du af, hvis du giver tabel2
> position-egenskaben reltive og dernæst positionerer
> dit billedet inde i tabel2 med position-værdien absolute
> (evt. med float). På den måde stabler du populært sagt
> billedet oven på tabelcellen.
>
> Men hvorfor en tabel? Opgaven kan lige så let løses med
> den mere korrekte div. Jf. de seneste dages diskussion
> om netop dette emne.
>
> --
>
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
> ..

Tak for svaret! Jeg har prøvet dine forslag, men det ser ikke ud til
at ændre noget ved det...
Se her: http://cjovergaard.dk/eksempel

Mvh. Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Den 07-03-2010 14:41, Christoffer Overgaard skrev:

> Tak for svaret! Jeg har prøvet dine forslag, men det ser ikke ud til
> at ændre noget ved det...
> Se her: http://cjovergaard.dk/eksempel

Jeg har ikke afprøvet det her, men prøv det og vend tilbage:

#billede {
   height:200px;
   width:200px;
   posistion: absolute;
   z-index: 5;
}

Jeg kan ikke gemme din side, derfor er det her udfra hukommelsen.


Som Jørgen skriver, så ville det måske være godt på et tidspunkt at
kigge på CSS og DIVer som alternativ til tabeldesign.


MVH
Rune Jensen

---

Rune Jensen wrote in dk.edb.internet.webdesign.html:
> Den 07-03-2010 14:41, Christoffer Overgaard skrev:
>
> > Tak for svaret! Jeg har prøvet dine forslag, men det ser ikke ud til
> > at ændre noget ved det...
> > Se her: http://cjovergaard.dk/eksempel
>
> Jeg har ikke afprøvet det her, men prøv det og vend tilbage:
>
> #billede {
>    height:200px;
>    width:200px;
>    posistion: absolute;
>    z-index: 5;
> }
>
> Jeg kan ikke gemme din side, derfor er det her udfra hukommelsen.
>
>
> Som Jørgen skriver, så ville det måske være godt på et tidspunkt at
> kigge på CSS og DIVer som alternativ til tabeldesign.
>
>
> MVH
> Rune Jensen

Har prøvet det, men det gør altså ikke rigtig nogen forskel...
Men jeg er åben overfor nye måder at lave dette design på, hvis du fx har
en evt. tutorial til andre metoder...

Mvh. Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Den 07-03-2010 15:43, Christoffer Overgaard skrev:

> Har prøvet det, men det gør altså ikke rigtig nogen forskel...

Nej, nu fik jeg stablet en test-side på benene, og jeg kan heller ikke
få opacity til at spille ordenligt.

Jeg har fundet en anden løsning, som måske kan bruges i stedet for opacity:

background: rgba(255,255,255,0.6);

Den sætter baggrundsfarven udfra farverne rød, grøn, blå og til sidst
gennemsigtigheden. Det er ikke 100% det samme som opacity, som er fuld
gennemsigtighed, så det kommer lidt an på, hvilken effekt, du vil have.
Men det skaber en "slags" gennemsigtighed.

Du kan se en proof-of-concept her:
http://www.webdesigngruppen.dk/test/test_opacity.asp

Hvis nogen har en løsning på "rigtig" gennemsigtighed, så er jeg da
interesseret ;)

> Men jeg er åben overfor nye måder at lave dette design på, hvis du fx har
> en evt. tutorial til andre metoder...

Der er lagt lidt idéer i linket ovenfor til et DIV-design, men det
kommer fuldstændigt an på, hvordan du vil have siden til at se ud, så
jeg har ikke gjort meget ud af det.

DIVer bruges bl.a. til at opdele din side i logiske "blokke", som f.eks.
header, menu, indhold og footer (men du kan selv bestemme).

Disse blokke placeres via CSS.

DIVer kan også pakkes ind i andre DIVer, det ser man tit. Jeg har brugt
dette på en "wrapper", som indeholder hele designet, og som så centreres
med med en margin: auto på right og left.

Indeni har jeg lagt tre DIVer, som man så kan give indhold.

Du får nok brug for lidt mere viden på et tidspunkt, men hvis du giver
lidt oplysninger om, hvordan designet skal være, kan jeg godt vejlede.


MVH
Rune Jensen

---

Rune Jensen wrote:

> Du kan se en proof-of-concept her:
> http://www.webdesigngruppen.dk/test/test_opacity.asp
>
> Hvis nogen har en løsning på "rigtig" gennemsigtighed, så er jeg da
> interesseret ;)

Det er squ da en grim udfordring ;)
Uanset tabel eller div, ser det ud som om det er grumme sværrt at lægge et
billede ovenpå en (semi)transparent div - position relative, absolute eller
ej.

(Har ingen løsning, men det kunne være interessant at kende den).

--
Med venlig hilsen
Stig Johansen

---

Den 07-03-2010 18:20, Stig Johansen skrev:
> Rune Jensen wrote:
>
>> Du kan se en proof-of-concept her:
>> http://www.webdesigngruppen.dk/test/test_opacity.asp
>>
>> Hvis nogen har en løsning på "rigtig" gennemsigtighed, så er jeg da
>> interesseret ;)
>
> Det er squ da en grim udfordring ;)
> Uanset tabel eller div, ser det ud som om det er grumme sværrt at lægge et
> billede ovenpå en (semi)transparent div - position relative, absolute eller
> ej.
>
> (Har ingen løsning, men det kunne være interessant at kende den).

Det virker for så vidt. Bare ikke i Internet Explorer - så jeg lige.

Ellers, så skal man fylde en DIVs baggrund med en gennemsigtig PNG. Men
det er ret ufleksibelt, for så skal man ændre gennemsigtigheden i
billedbehandlingsprogrammet.

Findes der ikke gennemsigtighed i IE?


MVH
Rune Jensen

---

Rune Jensen wrote:

> Den 07-03-2010 18:20, Stig Johansen skrev:
>> Rune Jensen wrote:
>>
>>> Du kan se en proof-of-concept her:
>>> http://www.webdesigngruppen.dk/test/test_opacity.asp
>>>
>>> Hvis nogen har en løsning på "rigtig" gennemsigtighed, så er jeg da
>>> interesseret ;)
>>
>> Det er squ da en grim udfordring ;)
>> Uanset tabel eller div, ser det ud som om det er grumme sværrt at lægge
>> et billede ovenpå en (semi)transparent div - position relative, absolute
>> eller ej.
>>
>> (Har ingen løsning, men det kunne være interessant at kende den).
>
> Det virker for så vidt. Bare ikke i Internet Explorer - så jeg lige.

Snakker vi om det samme?

Jo, dit eksempel med rgba virker, men jeg tænker på "rigtig" gennemsigtighed
- jfr. din 'udfordring'.

Jeg har prøvet at gemme en kopi, og fedte frem og tilbage med ekstra div'er
m.m., men at få et 'klart' billede på en "rigtig" gennemsigtig baggrund kan
jeg ikke greje.

(NB jeg er ikke CSS haj, så det kan være jeg bare ikke kan finde ud af det).

--
Med venlig hilsen
Stig Johansen

---

Den 07-03-2010 18:43, Stig Johansen skrev:

>> Det virker for så vidt. Bare ikke i Internet Explorer - så jeg lige.
>
> Snakker vi om det samme?

Jeg vrøvler, Stig, det skal du ikke tage dig af ;)

Nej, jeg har forsøgt at finde "rigtig gennemsigighed" på nettet, men
ingen der rigtigt dur.

> Jo, dit eksempel med rgba virker, men jeg tænker på "rigtig" gennemsigtighed
> - jfr. din 'udfordring'.

Ja, som sagt nok svær ;)

> Jeg har prøvet at gemme en kopi, og fedte frem og tilbage med ekstra div'er
> m.m., men at få et 'klart' billede på en "rigtig" gennemsigtig baggrund kan
> jeg ikke greje.
>
> (NB jeg er ikke CSS haj, så det kan være jeg bare ikke kan finde ud af det).

Hvis man kan "fikse" den med rgba og noget IE-halløj, er det måske
bedre. Ellers er det en mere grundig søgning på Google, for jeg kan ikke
svaret.

Så vidt jeg kan se, så kan man godt ramme den gennemsigtighed med rgba,
som der efterspørges. Bare et spørgsmål om baggrundsfarver - og så lige
det med IE.


MVH
Rune Jensen

---

Tusind tak for det! :)
Tror du det er muligt at lave en filter i
opacity:0.4;filter:alpha(opacity=40);
der opretter en ny værdi for et billede eller lign.?

Tror du forresten dette vil blive lettere med DIVer?
Jeg sætter stor pris på din hjælp,

-Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Den 07-03-2010 18:27, Christoffer Overgaard skrev:
> Tusind tak for det! :)
> Tror du det er muligt at lave en filter i
> opacity:0.4;filter:alpha(opacity=40);
> der opretter en ny værdi for et billede eller lign.?

Det virker ikke i IE - jeg prøver at finde en løsning. Her er foreløbig
for FF og andre.

Det, som sker er (nedenfor), at du fortæller hvor meget lys der skkal
sendes ud af rød, grøn og blå. Hvis du fortæller, der ikke skal sendes
noget lys ud, bliver farven sort. Dernæst sættes gennemsigtigheden, så
man får en sort farve med gennemsigtighed.

background: rgba(0, 0, 0 , 0.4);

Gennemsigtigheden her er så 0.5, som vel svarer til opacity=40.

Jeg har ikke kigget grundigt på Jørgens eksempel, han har muligvis en
anden og bedre løsning end denne.

> Tror du forresten dette vil blive lettere med DIVer?
> Jeg sætter stor pris på din hjælp,

Det er svært at sige, uden at vide, hvordan du vil have siden til ae ud,
og ikke mindst hvad den skal bruges til.

For en mere simpel side med et par undersider, der har det nok ikke så
meget at sige, for det er forholdsvist nemt at skifte tli nyt design,
når den tid kommer.

Jeg ved ikke, hvor langt du er i din kunnen, men jeg synes, man skal
have lov til at eksperimentere i starten, det lærer man også af.

Når du bliver bedre, så vil det under alle omstændigheder være en stor
fordel at kunne inddele sin side med DIV, og så lægge selve designet,
størrelser, farver og placeringer i CSS-filen.


MVH
Rune Jensen

---

Den 07-03-2010 18:27, Christoffer Overgaard skrev:
> Tusind tak for det! :)
> Tror du det er muligt at lave en filter i
> opacity:0.4;filter:alpha(opacity=40);
> der opretter en ny værdi for et billede eller lign.?

Virker i IE, men er ikke så fleksibel - hvis du vil ændre opacity, skal
det gøres i billedbehandlingsprogram (jeg bruger GIMpen). Den benytter i
stedet et PNG-billede (opacity_baggrund.png) med den ønskede opacity:

http://www.webdesigngruppen.dk/test/test_opacity2.asp

Jeg har desværre ikke kunnet finde andre løsninger, som også virker i IE...


> Tror du forresten dette vil blive lettere med DIVer?
> Jeg sætter stor pris på din hjælp,

Prøv at fortælle, hvordan du vil have siden til at se ud, så kan vi give
nogle råd om, hvordan det kan gøres nemmest.

Simple tabeller kan tit erstattes næsten direkte af DIVer, så det er
ikke et stort problem.

Hvis der er celler ved siden af hinanden i din tabel, kan dette laves
med flydende DIVer. Læs f.eks.:

http://hjemmesideskolen.dk/html/float.php?id=flbillede


MVH
Rune Jensen

---

> Virker i IE, men er ikke så fleksibel - hvis du vil ændre opacity, skal
> det gøres i billedbehandlingsprogram (jeg bruger GIMpen). Den benytter i
> stedet et PNG-billede (opacity_baggrund.png) med den ønskede opacity:
>
> http://www.webdesigngruppen.dk/test/test_opacity2.asp
>

Hej Rune. Det der er faktisk den bedste løsning for mig! Kan ikke forstå
hvorfor jeg ikke har tænkt på det lidt før ;)
Altså, jeg skal bare lave en simpel tabel med lidt tekst og lidt billede i, så
tror det her vil fungere perfekt..

Tak!

-Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Christoffer Overgaard wrote in dk.edb.internet.webdesign.html:
> > Virker i IE, men er ikke så fleksibel - hvis du vil ændre opacity, skal
> > det gøres i billedbehandlingsprogram (jeg bruger GIMpen). Den benytter i
> > stedet et PNG-billede (opacity_baggrund.png) med den ønskede opacity:
> >
> > http://www.webdesigngruppen.dk/test/test_opacity2.asp
> >
>
> Hej Rune. Det der er faktisk den bedste løsning for mig! Kan ikke forstå
> hvorfor jeg ikke har tænkt på det lidt før ;)
> Altså, jeg skal bare lave en simpel tabel med lidt tekst og lidt billede i, så
> tror det her vil fungere perfekt..
>
> Tak!
>
> -Christoffer
>

Okay, der var jeg lige så begejstret...
Det lykkedes for mig at gemme et gennemsigtigt billede, men når jeg loader det
som baggrund i min tabel, bliver den bare helt mat sort. Se:
www.cjovergaard.dk/eksempel

-Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

> Hej Rune. Det der er faktisk den bedste løsning for mig! Kan ikke forstå
> hvorfor jeg ikke har tænkt på det lidt før ;)
> Altså, jeg skal bare lave en simpel tabel med lidt tekst og lidt billede i, så
> tror det her vil fungere perfekt..
>
> Tak!
>
> -Christoffer

..Okay, der var jeg lige så begejstret. Det lykkedes for mig at lave et billede
med opacity i GIMP. (Det er bare en sort firkant med opacity effekt)
Jeg prøvede at anvende den på en side(www.cjovergaard.dk/eksempel), men den viser
den bare som en sort baggrund... Link til CSS:
http://www.cjovergaard.dk/stylesheet.css

MVH Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Den 07-03-2010 21:31, Christoffer Overgaard skrev:
>> Hej Rune. Det der er faktisk den bedste løsning for mig! Kan ikke forstå
>> hvorfor jeg ikke har tænkt på det lidt før ;)
>> Altså, jeg skal bare lave en simpel tabel med lidt tekst og lidt billede i, så
>> tror det her vil fungere perfekt..
>>
>> Tak!
>>
>> -Christoffer
>
> .Okay, der var jeg lige så begejstret. Det lykkedes for mig at lave et billede
> med opacity i GIMP. (Det er bare en sort firkant med opacity effekt)
> Jeg prøvede at anvende den på en side(www.cjovergaard.dk/eksempel), men den viser
> den bare som en sort baggrund... Link til CSS:
> http://www.cjovergaard.dk/stylesheet.css

Jeg tror, det er denne:

   background-color: #000000;


i din table{-definition. Den sætter sort baggrundsfarve på hele tabellen.

baggrundsbilledet er jo gennemsigtigt, men den farve, som er nedenunder
er ren sort.

Nu kan jeg ikke lige huske hvordan og hvorledes, men du kan prøve enten
at REMme den ud, lave den om til transparent, eller inherit.

Se, om det hjælper.

Da den så fjerner den sorte farve fra tabellen, kan du muligvis have
brug for at sætte denne farve ind enkelte steder. Det kan gøres med en
class, men vend lige tilbage, når det er, hvis du er i tvivl.


MVH
Rune Jensen

---

Den 07-03-2010 21:55, Rune Jensen skrev:

> Jeg tror, det er denne:
>
> background-color: #000000;
>
>
> i din table{-definition. Den sætter sort baggrundsfarve på hele tabellen.
>
> baggrundsbilledet er jo gennemsigtigt, men den farve, som er nedenunder
> er ren sort.
>
> Nu kan jeg ikke lige huske hvordan og hvorledes, men du kan prøve enten
> at REMme den ud,

/* background-color: #000000; */


> lave den om til transparent,

background-color: transparent;

> eller inherit.

background-color: inherit;


MVH
Rune Jensen

---

Rune Jensen wrote in dk.edb.internet.webdesign.html:
> Den 07-03-2010 21:55, Rune Jensen skrev:
>
> > Jeg tror, det er denne:
> >
> > background-color: #000000;
> >
> >
> > i din table{-definition. Den sætter sort baggrundsfarve på hele tabellen.
> >
> > baggrundsbilledet er jo gennemsigtigt, men den farve, som er nedenunder
> > er ren sort.
> >
> > Nu kan jeg ikke lige huske hvordan og hvorledes, men du kan prøve enten
> > at REMme den ud,
>
> /* background-color: #000000; */
>
>
> > lave den om til transparent,
>
> background-color: transparent;
>
> > eller inherit.
>
> background-color: inherit;
>
>
> MVH
> Rune Jensen


nååå ja (:
Tak for hjælpen

MVH Christoffer

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Christoffer Overgaard skrev:

> Tak for svaret! Jeg har prøvet dine forslag, men det ser ikke ud til
> at ændre noget ved det...
> Se her: http://cjovergaard.dk/eksempel

Undskyld,undskyld, undskyld!!!

Jeg har forledt dig og mindst en anden i denne
nyhedsgruppe med et ud af ærmet, uigennemtænkt
og forkert svar på dit konkrete spørgsmål.

En skitsemæssig løsning finder du på
http://webdesign101.dk/x/christopher/

Og her er den rigtige forklaring på,
hvad der sker:

Når opacity-egenskaben påtrykkes et element,
bliver hele elementet og dets indhold, inklusive
baggrunden gennemskinnelig.

Min skitseløsning kommer om ved dette ved
1) at oprette et relativt positioneret
element, der skal danne referenceramme for
2) et absolut positioneret element med samme
bredde og højde som det overordnede element,
som påtrykkes opacity-egenskaben, og
3) et eller flere elementer, som også positioneres
absolut i forhold til det overordnede element.

Et absolut positioneret danner et lag, der så at
sige svæver over det overordnede element, og
derfor dækker over dette og dets eventuelle indhold.


Efter alt dette et råd: Formindsk dit
portræt så det ikke fylder mere end de
200 gange 200 pixel du skal bruge.
Et billede på over en megabyte er
spil af båndbredde.

Det synes jeg egentlig også dit baggrundsbillede
er, det har ringe nytteværdi i forhold til
sidens indhold i øvrigt, som vi endnu har
tilgode at se.

Jeg kan se du er en ung person, så det er
muligvis ikke klart for dig at hvad du har
at fortælle er meget meget vigtigere end
den måde, du præsenterer det på.

Tænk på en eksamen: Tror du ikke det er
vigtigere at du fortæller noget om det
fag du er oppe i end hvilke noget tøj
du har på. Ønsker du at blive belønnet for
din påklædning eller for det du kan?

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Den 07-03-2010 18:04, Jørgen Farum Jensen skrev:

> Jeg kan se du er en ung person, så det er
> muligvis ikke klart for dig at hvad du har
> at fortælle er meget meget vigtigere end
> den måde, du præsenterer det på.

Jeg tror indholdet er på forsiden.

Fed humor iøvrigt... kedsomhed er roden til al kreativitet ;)


MVH
Rune Jensen