optimering af mit nedtællings ur til alle skærmstørrelser.
Hej.JEg har lavet et nedtællings ur som passer til en 1440x900 skærm, men jeg ville også gerne have den til at passe til alle andre...
CSS:
/* CSS Document */
.background {
border-style: none;
width: 50%;
height: 80px;
}
.numbers {
border-style: none;
background-color: #292929;
padding: 0px;
width: 61px;
height: 42px;
text-align: center;
font-family: "Myriad Pro", Arial, Helvetica, Sans-serif;
font-size: 36px;
font-weight: normal; /* options are normal, bold, bolder, lighter */
color: #f18b49; /* change color using the hexadecimal color codes for HTML */
margin-top:220px;
margin-left:18%;
}
.title { /* the styles below will affect the title under the numbers, i.e., "Days", "Hours", etc. */
border: none;
padding: 0px;
margin: 0px 3px;
width:10%;
text-align: center;
font-family: "Myriad Pro", Arial, Helvetica, Sans-serif;
font-size: 10px;
font-weight: normal; /* options are normal, bold, bolder, lighter */
color: #999999; /* change color using the hexadecimal color codes for HTML */
background-color: #000000;
margin-top:223px;
margin-left:18.5%;
}
#form { /* the styles below will affect the outer border of the countdown timer */
width: 50%;
height: 80px;
border-style: solid; /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */
border-width: 2px;
border-color: #666666; /* change color using the hexadecimal color codes for HTML */
background-color: #000000;
padding: 5px;
margin-left:26%;
margin-top:50px;
}
.line {
width: 10%;
height: 2px;
z-index: 15;
}
#count2{
position: absolute; top: 10px; height: 80px; padding: 15px 0 0 10px; background-color: #000000; z-index: 20;
}
#dday{
position: absolute; left: 69px; top: 21px;
}
#dhour{
position: absolute; left: 141px; top: 21px;
}
#dmin{
position: absolute; left: 213px; top: 21px;
}
#dsec{
position: absolute; left: 285px; top: 21px;
}
#days{
position: absolute; left: 66px; top: 73px;
}
#hours{
position: absolute; left: 138px; top: 73px;
}
#minutes{
position: absolute; left: 210px; top: 73px;
}
#seconds{
position: absolute; left: 282px; top: 73px;
}
HTML og java script:
<!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>
<title>Ølfestival 2012 | Ølfestival 2013</title>
<script language="javascript" type="text/javascript">
/* Change the items below to create your countdown target date and announcement once the target date and time are reached. */
var current="Så er ølfesten skydt i gang!"; //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2013; //—>Enter the count down target date YEAR
var month=05; //—>Enter the count down target date MONTH
var day=23; //—>Enter the count down target date DAY
var hour=15; //—>Enter the count down target date HOUR (24 hour clock)
var minute=00; //—>Enter the count down target date MINUTE
var tz=+1;
/* DO NOT CHANGE THE CODE BELOW! */
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {
todayy+=1900; }
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('count2').innerHTML=current;
document.getElementById('count2').style.display="inline";
document.getElementById('count2').style.width="390px";
document.getElementById('dday').style.display="none";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('days').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
return;
}
else {
document.getElementById('count2').style.display="none";
document.getElementById('dday').innerHTML=dday;
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}
</script>
</head>
<body onload="countdown (year,month,day,hour,minute);">
<div id="transbox" class="stretch"></div><!--transbox-->
<div id="contentsamler">
<div id="content">
<div id="h101">Datoer for Ølfestival 2013.</div>
<div id="text01">Så er nedtællingen til Ølfestivalen 2013 skudt i gang.<br /><br />
Festivalen bliver denne gang holdt fra den 23. maj til den 25. maj 2013, og igen i år er vi glade for at kunne fortælle at festivalen bliver holdt i TAP1. <br /><br />
Følg med på siden her og hold dig opdateret. Eller hold dig opdateret igennem Facebook eller Twitter.
</div>
<div id="text02">
<div id="form">
<div class="numbers" id="count2"></div>
<div class="numbers" id="dday" ></div>
<div class="numbers" id="dhour" ></div>
<div class="numbers" id="dmin" ></div>
<div class="numbers" id="dsec" ></div>
<div class="title" id="days" >Dage</div>
<div class="title" id="hours" >Timer</div>
<div class="title" id="minutes" >Minutter</div>
<div class="title" id="seconds" >Sekunder</div>
</div><!--form-->
</div><!--text slut-->
</div><!--content-->
<div id="højrebox">
<div class="højretitel"><a href="billetype.html" class="link">Bestil billet til 2013</a></div>
Billetsalget er allerede skudt i gang, og du kan købe den billet <div class="højretext"><a href="billetype.html" >HER!</a></div>
</div><!--højrebox-->
<div id="tilmildboks1"> <div id="tilmeldtekst"><a class="tilmeld" onclick="showmenu('newsmailbox')">TILMELDING TIL NYHEDSBREV</a> </div></div>
</div><!--content samler-->
</body>
</html>
