Er det virkelig slik at farger vises så ulikt...

Skriv et svar

Er det virkelig slik at farger vises så ulikt...

Innleggav srb » ons 03.09.2008 19:32

Jeg har laget en side som jeg har prøvd ut i Firefox, Opera og Safari - får opp like farger, og stort sett leverer de aktseptable resultater ellers også. Men så sjekket jeg siden i XP og finner at det ikke ser ut som det skal. Farger er ikke bra og noen elementer fungerer rett og slett ikke, ikke da jeg prøvde ihvertfall. Det er gråfarger som er brukt på siden og disse så lilla ut i XP syntes jeg.
Har noen noe lurt å komme med i forhold til dette, evt gi meg tilbakemeldinger om de får slidevisning på siden "malerier", og om linkene ligger oppå annen tekst på "front" siden. Det skal den altså ikke.
Siden skal ha disse fargene:
Bilde
web adr: http://home.online.no/~pedebe/index.html

Her er html` en til "malerier":
Kode: Merk alt
<!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=UTF-8" />
<title>maleri 1</title>
<link type="text/css"  rel="stylesheet" href="malerier.css" />
<script src="bjornberg_maleri_1.js"></script>
</head>
<body onload="switchImage('bjornberg')">
 <div id="galleri1">
 <div id="copyright">© Bjørn Berg</div>
 <div id="navcontainerMalerier">
   <ul id="navlist">
    <li id="active"></li>
    <li><a href="galleri.html">mørkt galleri</a></li>
    <li><a href="galleriLysbg.html">lyst galleri</a></li></ul>
    </div>
  <div id="textbox"><h5>Maleriene</h5>
  <p>Maleriene inngår i "mars 08" serien.<br />Gå inn i galleriet for større format - uten tekst.<br /> <br /> <br /><br /><br /><br />Ved spørsmål er du velkommen til å sende en mail, eller kontakte Bjørn på mobil: 90746450<br /><br />bestillinger kan gjøres direkte her: <a href="mailto:bjorn@identicon.no"> bjorn@identicon.no</a></div>
  <div id="maleribakgrunn"><img name="bjornberg" alt="" src="maleri_1.png" width="" height="" border=""  />
   <a href="#" onclick="switchImage('bjornberg')">play slide show</a>
   <a href="#" onclick="clearTimeout(timerID)">pause</a>
   <a href="#" onclick="prevImage('bjornberg'); clearTimeout(timerID)">previous</a>
   <a href="#" onclick="switchImage('bjornberg'); clearTimeout(timerID)">next</a>  </div>
  <div id="navcontainer">
   <ul id="navlist">
    <li id="active"></li>
    <li><a href="bjorn.html">bjørn</a></li>
    <li><a href="inspirasjon.html">inspirasjon</a></li>
    <li><a href="maleri_1.html">malerier</a></li>
    <li><a href="utstilling_oslo.html">utstillinger</a></li>
    <li><a href="index.html">front</a></li></ul>
    </div>
   </div>
  </div>
 </body>
</html>



CSS:
Kode: Merk alt
@charset "UTF-8";
/* CSS Document */


html{
   margin:0;
   padding:0;
}
   
body{
   margin:0;
   padding:0;
   background-color:#CCCCCC;
   font:"Times New Roman", Times, serif;
   font-size:12px;
}


#bodymorktgalleri{
   margin:0;
   padding:0;
   background-color:#000000;
   font:"Times New Roman", Times, serif;
   font-size:12px;
   height: 1200px;
}

#bodylystgalleri{
   margin:0;
   padding:0;
   background-color:#FFFFFF;
   font:"Times New Roman", Times, serif;
   font-size:12px;
   height: 1200px;
}

p{
   float:left;
   font-style:normal;
   color:#666666;
   padding:10px;
}
   
#footer{
   color:#333333;
   position:relative;
   text-decoration:none;
   width:150px;
   height:30px;
   top:586px;
   left:15px;
}

#footer a {
   text-decoration:none;
   color:#999999;
}

#footer a:hover{
   text-decoration:underline;
   color:#000000;
}
   
a {
   text-decoration:none;
   color:#000000;
}

a:visited{
   text-decoration:none;
   color:#000000;
}

a:hover{
   text-decoration:underline;
   color:#CCCCCC;
}

a:active{
   text-decoration:none;
   color:#000000;
}

#maincontent{
   margin:0 auto;
   height:600px;
   width:800px;
   position:relative;
   top:80px;
   left:0;
   background-image:url(maincontent.png);
}
   
#front{
    margin:0 auto;
    height:600px;
    width:800px;
   position:relative;
   top:80px;
   left:0;
   background-image:url(front.png);
}
   
#galleri1{
   margin:0 auto;
    height:600px;
    width:800px;
   position:relative;
   top:80px;
   left:0;
   background-image:url(malerier.png);
}
   
#galleri2{
   margin:0 auto;
    height:600px;
    width:800px;
   position:relative;
   top:80px;
   left:0;
   background-image:url(galleri.png);
}
   
#galleri3{
   margin:0 auto;
    height:600px;
    width:800px;
   position:relative;
   top:80px;
   left:0;
   background-image:url(gallerilysbg.png);
}
   
#navcontainer{
   display:inline;
   position:absolute;
   width:455px;
   height:30px;
   padding-left: 0;
   list-style: none;
   bottom:310px;
   right:385px;
   padding:0px;
   z-index:1;
}
 
#navlist li{
   display:inline;
   list-style-type:none;
   padding-right:20px;
   left:20px;
}
 
#navlist li a{
   color:#333333;
}
   
#navlist li a:visited{
   color:#666666;
}
   
#navlist li a:hover{
   color:#FF6600;
   text-decoration:none;
}

#navlist li a:active{
   color:#FFFFFF;
}

#navcontainerFront{
   display:inline;
   position:absolute;
   width:130px;
   height:40px;
   padding-left: 0;
   list-style: none;
   bottom:90px;
   right:600px;
   padding:0px;
   z-index:1;
}
 
#navlistFront li{
   display:inline;
   list-style-type:none;
   padding-right:20px;
   left:20px;
}
   
#navlistFront a{
   text-decoration:none;
   color:#000000;
}
      
#navlistFront li a:hover{
   text-decoration:none;
   color:#FF6600;
   font-size:18px;
}

#navcontainerFrontG{
   display:inline;
   position:absolute;
   width:150px;
   height:40px;
   padding-left: 0;
   list-style: none;
   bottom:170px;
   right:30px;
   padding:0px;
   z-index:1;
}
 
#navlistFrontG li{
   display:inline;
   list-style-type:none;
   padding-right:20px;
   left:20px;
   
}
   
#navlistFrontG a{
   text-decoration:none;
   color:#CCCCCC;
}
   
   
#navlistFrontG li a:hover{
   text-decoration:none;
   color:#666666;
   font-size:24px;
}

#navcontainerMalerier{
   display:inline;
   position:absolute;
   width:250px;
   height:50px;
   padding-left: 0;
   list-style: none;
   top:415px;
   right:545px;
   padding:0px;
   z-index:1;
}
 
#navlistMalerier li{
   display:inline;
   list-style-type:none;
   padding-right:20px;
   left:20px;
}
   
#navlistMalerier a{
   text-decoration:none;
   color:#666666;
}

#navcontainerGalleri{
   display:inline;
   position:absolute;
   width:110px;
   height:30px;
   padding-left: 0;
   list-style: none;
   top:572px;
   right:340px;
   padding:0px;
   z-index:1;
}
 
#navlistGalleri li{
   display:inline;
   list-style-type:none;
   padding-right:20px;
   left:20px;
}
   
#navlistGalleri a{
   text-decoration:none;
   color:#666666;
}
      
#navlistMalerier li a:hover{
   text-decoration:none;
   color:#FFFFFF;
}
   
#textbox{
   background-image:url(textbox.png);
   background-repeat:no-repeat;
   width:325px;
   height:280px;
   position:absolute;
   top:300px;
   left:15px;
   overflow:auto;
   text-align:left;
}

#textbox h5{
   text-align:right;
   padding-right:20px;
   font-size:12px;
}
   
#textbox a{
   color:#333333;
}

#textbox a:hover{
   text-decoration:none;
   color:#666666;
}

.textboxBjorn{
   background-image:url(textbox.png);
   background-repeat:no-repeat;
   width:325px;
   height:280px;
   position:absolute;
   top:300px;
   left:15px;
   overflow:auto;
   text-align:left;
}

.textboxBjorn h5{
   text-align:left;
   padding-left:20px;
   
}
   
.textboxBjorn a{
   color:#333333;
}

.textboxBjorn a:hover{
   text-decoration:none;
   color:#666666;
}

.textboxInspirasjon{
   background-image:url(textbox.png);
   background-repeat:no-repeat;
   width:325px;
   height:280px;
   position:absolute;
   top:300px;
   left:15px;
   overflow:auto;
   text-align:left;
}

.textboxInspirasjon h5{
   text-align:left;
   padding-left:20px;
   font-size:12px;
}
   
.textboxInspirasjon a{
   color:#333333;
}

.textboxInspirasjon a:hover{
   text-decoration:none;
   color:#666666;
}
      
#objbox{
   background-position:center;
   background-image:url(objbox.png);
   background-repeat:no-repeat;
   height:280px;
   width:436px;
   position:absolute;
   top:300px;
   right:15px;
}

#maleribakgrunn{
   background-position:center;
   background-image:url(maleribakgrunn.png);
   background-repeat:no-repeat;
   height:463px;
   width:434px;
   position:absolute;
   top:117px;
   right:15px;
}

#maleribakgrunn a:link{
   color:#333333;
}

#maleribakgrunn a:hover{
   color:#999999;
}

#maleribakgrunnGalleri{
   background-position:center;
   background-image:url(galleri.png);
   background-repeat:no-repeat;
   height:600px;
   width:800px;
   position:absolute;
   top:0px;
   right:0px;
}

#maleribakgrunnGalleri a{
   color:#999999;
}

#maleribakgrunnGalleri a:hover{
   color:#FFFFFF;
}

#maleribakgrunnGallerilys{
   background-position:center;
   background-image:url(gallerilysbg.png);
   background-repeat:no-repeat;
   height:600px;
   width:800px;
   position:absolute;
   top:0px;
   right:0px;
}

#maleribakgrunnGallerilys a{
   color:#000000;
}

#maleribakgrunnGallerilys a:hover{
   color:#666666;
}



#snowleopard{
   color:#333333;
   position:relative;
   text-decoration:none;
   width:150px;
   height:30px;
   top:556px;
   left:655px;
}

#snowleopard a {
   text-decoration:none;
   color:#000000;
}

#snowleopard a:hover{
   text-decoration:none;
   color:#999999;
}

#snowleopardF{
   color:#333333;
   position:relative;
   text-decoration:none;
   width:130px;
   height:30px;
   top:585px;
   left:660px;
}

#snowleopardF a {
   text-decoration:none;
   color:#000000;
}

#snowleopardF a:hover{
   text-decoration:none;
   color:#999999;
}

#copyrightGalleri{
   color:#666666;
   position:relative;
   text-decoration:none;
   width:130px;
   height:30px;
   top:600px;
   left:730px;
   z-index:1;
}

#copyright{
   color:#666666;
   position:relative;
   text-decoration:none;
   width:130px;
   height:30px;
   top:565px;
   left:270px;
   z-index:1;
}


   


Her er javascriptet til samme side:
Kode: Merk alt
// JavaScript Document

var interval= 5000;
var random_display=0;
var imageDir="";

var imageNum=0;
imageArray=new Array();
imageArray[imageNum++]=new imageItem(imageDir+"maleri_1.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_2.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_3.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_4.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_5.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_6.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_7.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_8.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_9.png");
imageArray[imageNum++]=new imageItem(imageDir+"maleri_10.png");

var totalImages=imageArray.length;

function imageItem(image_location){
   this.image_item=new Image();
    this.image_item.src=image_location;
    }
function get_ImageItemLocation(imageObj){
    return(imageObj.image_item.src)
    }
   
   
function randNum(x,y){
    var range=y-x+1;
    return Math.floor(Math.random()*range)+x;
   }
   
   
function getNextImage(){
if(random_display){
imageNum=randNum(0, totalImages-1);
}
else{
imageNum=(imageNum+1)%totalImages;
}

var new_image=get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}

function getPrevImage(){
imageNum=(imageNum-1)%totalImages;
var new_image=get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}

function prevImage(place){
var new_image=getPrevImage();
document[place].src=new_image;
}

function switchImage(place){
var new_image=getNextImage();
document[place].src=new_image;
var recur_call="switchImage('"+place+"')";
timerID=setTimeout(recur_call,interval);
}
srb
medlem i 193 måneder
 
Topp

Re: Er det virkelig slik at farger vises så ulikt...

Innleggav Mega_Therion » ons 03.09.2008 20:04

Søk etter fargerom og gamma på forumet. Tonnevis med tråer om dette. Konklusjonen er at kalibrert skjerm med 2.2 gamma og srgb fargeprofiler gir likt resultat i alle browsere.
Mega_Therion
Brukerens avatar
medlem i 235 måneder
 
Topp

Re: Er det virkelig slik at farger vises så ulikt...

Innleggav Åsmund » ons 03.09.2008 20:14

Jepp, men de fleste har ikke kalibrerte skjermer, så da er det virkelig slik at det ser ulikt ut på forskjellige maskiner.
Åsmund
Æresmedlem
Brukerens avatar
medlem i 249 måneder
 
Topp

Re: Er det virkelig slik at farger vises så ulikt...

Innleggav srb » ons 03.09.2008 22:52

ok.
srb
medlem i 193 måneder
 
Topp

Re: Er det virkelig slik at farger vises så ulikt...

Innleggav Mega_Therion » ons 03.09.2008 23:21

Åsmund skrev:Jepp, men de fleste har ikke kalibrerte skjermer, så da er det virkelig slik at det ser ulikt ut på forskjellige maskiner.

Det er ikke leserens skjerm som trenger å være kalibrert, men den som lager de grafiske filene. Apple bruker gamma 1,8 som standard, mens PC-standarden (og nettet) bruker 2,2.
Mega_Therion
Brukerens avatar
medlem i 235 måneder
 
Topp

Re: Er det virkelig slik at farger vises så ulikt...

Innleggav srb » ons 03.09.2008 23:29

Altså, jeg som lager siden stiller inn min MAC på gammaverdien du ref til...
da vil farger bli mer like generelt?
Ok, men så er det den ene siden jeg har trøbbel med slides visningen. Det fungerer på to andre steder på samme siten...
srb
medlem i 193 måneder
 
Topp
Skriv et svar

Returner til XHTML/HTML



Hvem er i Forumene

Registrerte brukere: Google [Bot]



cron