Problemer i css Design for web

13. mai 2006

Holder på å designe en side (som jeg ikke gjør ofte), så oppstår det en del problemer etterhvert.

Problem 1
Gjennomsiktig PNG bilde fungerer ikke i IE, ligger problemet i photoshop eller i koden?
Eller må jeg gå over til GIF eller noe annet?
IE:http://home.no.net/datageek/css/ie-png-problem.png
FF:http://home.no.net/datageek/css/ff-png-problem.png
Bildet er altså teksten "yo" i hvitt og gjennomsiktig bakgrunn, mens jeg har brukt svart som bakgrunnsfarge i css.

Kode

#container {
	background-color: #000000;
	width: 200px;
	height: 100px;
	}
#bilde {
	background-color: #000000;
	background-image: url("yo.png");
	width: 100px;
	height: 100px;
	}

Problem 2
Border i Opera legger seg inni div og gjør at jeg må øke størrelse for at borderen skal gå rundt bilde/objekt.

Opera: http://home.no.net/datageek/css/border-problem-opera.jpg
FF: http://home.no.net/datageek/css/border-problem-ff.jpg
Kode:

Kode

#container {
	border: 3px solid #000;
	width: 100px;
	height: 100px;
	}
#bilde {
	background-color: #999999;
	background-image: url("yo.png");
	width: 100px;
	height: 100px;
	}

Takk til alle som hjelper til.

Sist endret av erix; 13. mai 2006 kl. 21:45.

Lundern

1.600 128

13. mai 2006

Hadde vært fint med en kode

Cadex

Fittesatananarkikommando

1.436 756

13. mai 2006

Ang. problem nr. 1: MSIE har manglende PNG-støtte (ihvertfall i eldre versjoner, vet ikke hvordan det er med den aller nyeste), så det har ikke noe med photoshop å gjøre.

Når det gjelder nr. 2 så er det et faktum at forskjellige nettlesere tolker koden forskjellig, spesielt når det kommer til boksmodeller; padding, margins og borders. Vet dette ikke LØSER problemene, men tenkte jeg skulle bekrefte det for deg. Du får søke litt rundt etter diverse csshacks for å omgå visse problemer, eller se etter alternative løsninger. Alistapart.com er en fantastisk kilde til CSS-informasjon, kan være verdt å sjekke etter hjelp der.

erix

Trådstarter

362 12

13. mai 2006

Men hvilke andre alternativer er det til png når det gjelder gjennomsiktige bilder?
Har prøvd GIF, men bildene blir så hakkete/kornete i kantene.
http://home.no.net/datageek/css/hakkete.jpg

Stormen

Nerdenes Prins

3.376 4.288

13. mai 2006

Du må antialiase bokstavene mot bakgrunnsfargen i Photoshop; og så lage gif av bokstavene, MED overgangen mot bakgrunnen..

Cadex

Fittesatananarkikommando

1.436 756

13. mai 2006

Sitat av Stormen

Du må antialiase bokstavene mot bakgrunnsfargen i Photoshop; og så lage gif av bokstavene, MED overgangen mot bakgrunnen..

Vis hele sitatet...

I Photoshop under "Save for web" er det en funksjon som heter "Matte". Det jeg tror Stormen sier er at du bør sette denne til bakgrunnsfargen til nettsiden (såklart i tillegg til å ha anti-aliasede fonter i utgangspunktet) da får man en penere overgang fra grafikk til ikke-grafikk (siden gif ikke støtter gjennomskinnelighet, bare transparent).

Sist endret av Cadex; 13. mai 2006 kl. 22:17.

n5k

Rokkukyu

3.287 364

14. mai 2006

Bruk javascriptet "sleight.js" for å få transparente png's til å funke i IE. Eller sleightbg.js hvis det er snakk om et bakgrunnsbilde (i en tabell f.eks.)

Google and you shall find.