Dodawanie tła do funkcji/ wyśrodkowanie elementu

0

Hejka, przychodzę z drobnym problem, który ma polepszyć moją stronę wizualnie, tzn chciałbym dodać białe tło do zegara, ponieważ przez background strony jest niewidoczny, oraz wyśrodkować funkcje odpowiedzialną za wyświetlanie reklam. Jak to zrobić?

<!DOCTYPE>
<html lang="pl">

<head>
  <meta charset = "utf-8" />
  
  <link rel="stylesheet" href="style.css" type"text/css"/>
  
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="skrypt.js"></script>
  
</head>
<body onload="onload()">
  <div id="zegar"></div>

  <input type="text" placeholder="Wprowadź login..." id="plogin"/>
  <input type="text" placeholder="Wprowadź hasło..." id="phaslo"/>
  <input type="submit" value="zaloguj" onclick="logowanie()"/>
  <div id="wynlog"></div>
  
  <form id="calculator">
    <input type="text" id="a" placeholder="a" />
    <input type="text" id="b" placeholder="b" />
    <input type="text" id="wynik" placeholder="=" disabled="disabled" />
    <button type="button" onclick="Calculator(this.innerHTML)">+</button> 
    <button type="button" onclick="Calculator(this.innerHTML)">-</button>
    <button type="button" onclick="Calculator(this.innerHTML)">x</button>   
    <button type="button" onclick="Calculator(this.innerHTML)">/</button>
</form>
  
  <div id="slajdy"></div>
</body>
</html>

function odliczanie()
 {
   var dzisiaj = new Date();
   var dzien = dzisiaj.getDate();
   if(dzien<10) dzien = "0"+dzien;
   var miesiac = dzisiaj.getMonth()+1;
   if(miesiac<10) miesiac = "0"+miesiac;
   var rok = dzisiaj.getFullYear();
   
   var godzina = dzisiaj.getHours();
   if(godzina<10) godzina = "0"+godzina;
   var minuta = dzisiaj.getMinutes();
   if(minuta<10) minuta = "0"+minuta;
   var sekunda = dzisiaj.getSeconds();
   if(sekunda<10) sekunda = "0"+sekunda;
   
   document.getElementById("zegar").innerHTML = dzien+"/"+miesiac+"/"+rok+" | "+godzina+":"+minuta+":"+sekunda;
   
   setTimeout("odliczanie()",1000);
   
  }
  
  function logowanie()
  {
    var login = document.getElementById("plogin").value;
	var haslo = document.getElementById("phaslo").value;
	if(login == "mati" && haslo == "123" ) document.getElementById("wynlog").innerHTML="zalogowano";
	else document.getElementById("wynlog").innerHTML="Podany login/hasło jest niepoprawny";
  }
  
  var numer = Math.floor(Math.random()*4)+1;

 
  function reklama(operator)
  {
    numer++; if(numer>4) numer=1;
	
	var plik = "<img src=\"Reklamy/reklama" + numer + ".png\"/>";
	document.getElementById("slajdy").innerHTML = plik;
	$("slajdy").fadeIn(500);
	
	setTimeout("reklama()",15000);

  }
  
  function Calculator(operator) 
{
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;  
 
    switch(operator) 
    {
        case '+':
            var wynik = parseFloat(a) + parseFloat(b);         
        break;
        case '-':
            var wynik = parseFloat(a) - parseFloat(b);         
        break;  
        case 'x':
            var wynik = parseFloat(a) * parseFloat(b); 
        break;  
        case '/':
            var wynik = parseFloat(a) / parseFloat(b);         
        break;    
    }
 
    document.getElementById('wynik').value = '= ' + wynik;
}
  
  function onload()
  {
  reklama();
  odliczanie();
  }
  
  

body{
  background-image: url("tło.jpg") 
 }

#calculator {
    background: #eaeaea;
	float: center;
    margin: 0 auto;
    padding: 25px 50px 25px 50px;
    width: 200px;
    text-align: center;
}
#calculator button {
	float: center;
    padding: 10px;
    width: 40px;
}
#calculator input[type="text"] {
    padding: 10px;
    width: 147px;
    margin-bottom: 5px;
}
#reklama{
	float: center;
    //nie działa
}
2

Wyśrodkowanie masz. Wszystko wrzuciłem do jednego pliku jednak nie mam pojęcia o co chodzi z "odać białe tło do zegara, ponieważ przez background strony jest niewidoczny"? Zrobiłem zegar na żółto.

https://jsfiddle.net/3mo5cpw1/1/

<!DOCTYPE>
<html lang="pl">

<head>
  <meta charset = "utf-8" />

  <link rel="stylesheet" href="style.css" type"text/css"/>

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="skrypt.js"></script>

</head>
<body onload="onload()">
  <div id="zegar"></div>

  <input type="text" placeholder="Wprowadź login..." id="plogin"/>
  <input type="text" placeholder="Wprowadź hasło..." id="phaslo"/>
  <input type="submit" value="zaloguj" onclick="logowanie()"/>
  <div id="wynlog"></div>

  <form id="calculator">
    <input type="text" id="a" placeholder="a" />
    <input type="text" id="b" placeholder="b" />
    <input type="text" id="wynik" placeholder="=" disabled="disabled" />
    <button type="button" onclick="Calculator(this.innerHTML)">+</button> 
    <button type="button" onclick="Calculator(this.innerHTML)">-</button>
    <button type="button" onclick="Calculator(this.innerHTML)">x</button>   
    <button type="button" onclick="Calculator(this.innerHTML)">/</button>
</form>

  <div id="slajdy"></div>
  
  <script>
    function odliczanie()
     {
       var dzisiaj = new Date();
       var dzien = dzisiaj.getDate();
       if(dzien<10) dzien = "0"+dzien;
       var miesiac = dzisiaj.getMonth()+1;
       if(miesiac<10) miesiac = "0"+miesiac;
       var rok = dzisiaj.getFullYear();

       var godzina = dzisiaj.getHours();
       if(godzina<10) godzina = "0"+godzina;
       var minuta = dzisiaj.getMinutes();
       if(minuta<10) minuta = "0"+minuta;
       var sekunda = dzisiaj.getSeconds();
       if(sekunda<10) sekunda = "0"+sekunda;

       document.getElementById("zegar").innerHTML = dzien+"/"+miesiac+"/"+rok+" | "+godzina+":"+minuta+":"+sekunda;

       setTimeout("odliczanie()",1000);

      }

      function logowanie()
      {
        var login = document.getElementById("plogin").value;
        var haslo = document.getElementById("phaslo").value;
        if(login == "mati" && haslo == "123" ) document.getElementById("wynlog").innerHTML="zalogowano";
        else document.getElementById("wynlog").innerHTML="Podany login/hasło jest niepoprawny";
      }

      var numer = Math.floor(Math.random()*4)+1;

      function reklama(operator)
      {
        numer++; if(numer>4) numer=1;

        var plik = "<img src=\"Reklamy/reklama" + numer + ".png\"/>";
        document.getElementById("slajdy").innerHTML = plik;
        $("slajdy").fadeIn(500);

        setTimeout("reklama()",15000);

      }

      function Calculator(operator) 
    {
        var a = document.getElementById('a').value;
        var b = document.getElementById('b').value;  

        switch(operator) 
        {
            case '+':
                var wynik = parseFloat(a) + parseFloat(b);         
            break;
            case '-':
                var wynik = parseFloat(a) - parseFloat(b);         
            break;  
            case 'x':
                var wynik = parseFloat(a) * parseFloat(b); 
            break;  
            case '/':
                var wynik = parseFloat(a) / parseFloat(b);         
            break;    
        }

        document.getElementById('wynik').value = '= ' + wynik;
    }

    function onload()
    {
      reklama();
      odliczanie();
    }
  </script>
  
  <style>
    body{
      background-image: url("tło.jpg") 
     }

    #calculator {
        background: #eaeaea;
        float: center;
        margin: 0 auto;
        padding: 25px 50px 25px 50px;
        width: 200px;
        text-align: center;
    }
    #calculator button {
        float: center;
        padding: 10px;
        width: 40px;
    }
    #calculator input[type="text"] {
        padding: 10px;
        width: 147px;
        margin-bottom: 5px;
    }
    
    #zegar{
      display:table;
      margin:auto;
      background:yellow;
    }
    
    #slajdy{
        margin-top:20px;
        margin:auto;
        display:table;
        padding:20px;
        background:red;
    }  
  </style>
  
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1