Ciao a tutti,
provando a creare una semplice pagina web in cui è presente un contatore JS ho deciso di applicarle qualche regola di stile tramite CSS3.
La struttura della pagina lo ho creata tramite HTML5.
La mia idea è quella di avere un header, e due colonne:
- la prima colonna dove impostare il valore di incremento della conta tramite un form e un pulsante per avviare la conta.
- la seconda colonna mostra il valore della conta (tale numero è posizionato al centro sia verticalmente che orizzonalmente)
Ho già impostato il layout sopra descritto, ma mi sorge un dubbio riguardo al posizionamento del form e del relativo pulsante per la gestione della conta.
Per posizionarli al centro orizzontalmente, ho impostato "position:relative" e "left:###px".
E' possibile impostare lo posizione centrale senza specificare in modo puntale la posizione? Ho provato ad impostare "margin:auto", ma senza successo.
Al momento sono riuscito in entrambi i casi a impostare la posizione centrale verticalmente.
Ecco il mio codice (HTML e CSS):
Pagina HTML+JS
<!DOCTYPE html>
<html>
<head>
<title>Contatore dinamico</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
<header>
<h1>Contatore</h1>
</header>
<div class="col-1">
<section id="configurazione_conta">
<form id="formIncremento">
<label for="incremento">Scegli l'incremento:</label>
<select id="incremento" name="incremento">
<option value="1">+1</option>
<option value="5">+5</option>
<option value="10">+10</option>
</select>
</form>
<button id="avviaConta" onClick="lettura_incremento()">Avvia la conta!</button>
</section> <!-- end section -->
</div>
<div class="col-2">
<h2 id="out_conteggio"></h2>
</div>
<!-- script JS -->
<script type="text/javascript">
function lettura_incremento()
{
var val_incremento = document.getElementById("incremento").value;
console.log(val_incremento);
sessionStorage.setItem("inc", parseInt(val_incremento));
sessionStorage.setItem("conta",parseInt(0)); //creo sessionStorage "conta=0"
contatore();
}
function stampa()
{
document.getElementById("out_conteggio").innerHTML=sessionStorage.getItem("conta");
}
function contatore()
{
var x = sessionStorage.getItem("conta");
var y = sessionStorage.getItem("inc");
var z = parseInt(x) + parseInt(y);
if(!isNaN(z))
{
sessionStorage.setItem("conta",z);
console.log(z);
stampa();
} //end if
} //end function contatore
setInterval(contatore,2000); //ogni X secondi richiamo la funzione contatore
</script>
</body>
</html>
Pagina CSS
header{
width: 100%;
height: 100px;
line-height: 100px;
background-color: #FF6633;
color:white;
text-align: center;
}
.col-1{
width: 50%;
height: 300px;
line-height: 300px;
float:left;
background-color: green;
border:1px;
}
.col-1 section,button{
display: inline-block;
vertical-align: middle;
line-height: normal;
position: relative;
left: 40%;
}
.col-2{
width: 50%;
height: 300px;
line-height: 300px;
background-color: blue;
float: left;
}
.col-2 > h2
{
color:white;
text-align: center;
}
#avviaConta{
color:red;
}
Grazie in anticipo!