Gå til innhold

Bakgrunnsbilder sin posisjon?

Arne

Av Arne
i Programmering og webutvikling

Anbefalte innlegg

qualbeen

qualbeen

Skrevet
Skrevet

godt vi fikk klarert no-repaet-diskusjonen Loomy, jeg er helt enig med deg;)

 

Ang. hvit kant på bilde: den fargen har du selv lagt inn der da du lagde bildet. Det du kanskje er ute etter er å få bilde transparant (gjennomsiktig) i kantene. Bare så synd ikke EI støtter dette skikkelig..

 

Derfor: Rediger bildet ditt i Photoshop (e.l.) og gjør om hvitfargen til den fargen du ønsker.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Arne

Arne

Skrevet
  • Forfatter
Skrevet (endret)

Ok. Nokon som veit kvifor IE ikkje støtar dette?

EDIT: Takk for flotte svar. Men før eg endrar bildene sk'lik at kanten blir grå (og bildet blir mindre), må eg få "opplegget" til å virke.

Kan nokon hjelpe meg å finne feilen no?

Istaden for repeat:no-repeat, så har eg no-repeat.

Skal eg gjere det same med repeat:repeat-y ?

Endret av Fjott
Lenke til kommentar
Kim T

Kim T

Skrevet
Skrevet (endret)

Nå har jeg funnet ut feilen din og rettet opp så godt som jeg kan :blush:

 

Her er xhtml koden din:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Temp1</title>
<link rel="stylesheet" type="text/css" href="minestiler.css">
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="main"></div>
<div class="bottom"></div>
</div>
</body>
</html>

 

Slik har jeg laget CSS filen din:

.main {
height: 400px;
width: 682px;
background-image: url(bilder/middle.jpg);
background-repeat: repeat-y;
 }
.top {
background:  url(bilder/top.jpg) no-repeat center top;
height: 12px;
 width: 680px;
}
.wrap {
width:  800px;
 	min-height: 900px;
 }
.bottom {
   background: url(bilder/bottom.jpg) no-repeat;
width: 682px;
height: 32px;
}

 

Det største problemet ditt er at bildene dine er av en fysisk størrelse som er mye større enn akkurat bildet. Dvs det er masse transparent pixler rundt bildet.

 

EDIT:

For å få en bedre forståelse så kan jeg sette opp målene som du hadde på dine bilder og hva de "egentlig" er:

 

"top": 800x200 mens det egentlig er: 680x12

"middle": 800x200 mens det egentlig er: 680x13

"bottom": 800x200 mens det egnetlig er: 682x32

 

Så jeg har lastet opp nye bilder til deg. Disse må du lage nye av men for at du skal se forskjellen så har jeg laget dem på nytt.

 

EDIT: Grunnen til at du må lage nye er at bildene er av ulik bredde. I tillegg mangler "top" skyggen på høyre side.

 

Og ikke minst bør bildene ikke være i .jpg format. Var litt slem når jeg lagret dem som .jpg. Men det er for ditt eget beste ;)

 

top.jpg

middle.jpg

middle.jpg

middle.jpg

middle.jpg

middle.jpg

middle.jpg

middle.jpg

bottom.jpg

Endret av kimthoma
Lenke til kommentar
Kim T

Kim T

Skrevet
Skrevet

Skal du ha en skyggeeffekt slik som du har på høyre siden har du to alternativer. Lagre bildet som .gif med riktig bakgrunnsfarge. Eller du kan lagre dem som .png 24 og ikke noe bakgrunnsfarge.

 

Det som skjer da er at bildene blir kjempeflotte i alle andre browsere enn "Internet explorer". Den lager en "kunstig" bakgrunnsfarge som skriker. :blush:

 

Vil du se forskjellen kan du ta en titt på denne i IE og f.eks Opera.

 

plane_miss_dc.png

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...