Archivi tag: risoluzione

Leggere la risoluzione dello schermo

Css e (x)Html, , , ,

Per quanto io possa preferire la costruzione dei siti senza dover tenere conto della risoluzione dello schermo dei client alcune volte può capitare di averne bisogno.

Lo “screen detection” si può fare usando poche semplici istruzioni in Javascript.

<script type= "text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

Prendendo come base l’esempio sopra possiamo mostrare qualcosa a seconda della risoluzione. Potrebbe essere uno sfondo anzichè un altro, o una pagina ottimizzata per una risoluzione anzichè per un’altra… Come qui:

<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600))
{
window.location.replace('http://www.miosito.com/800x600-o-ris-inferiore');
} else {
window.location.replace('http://www.miosito.com/ris-superiore-a-800x600');
}
</script>

Ciau

Centrare un DIV in orizzontale e verticale

Css e (x)Html, , , , , , , , , , , , , ,

Avevamo già visto come centrare orizzontalmente un div nella pagina.

Vediamo adesso come posizionare un elemento al centro di una pagina (x)html, non conoscendo le dimensioni della pagina, quindi adattabile a qualsiasi risoluzione. L’unica cosa che dobbiamo avere chiara è la dimensione del nostro “box”.

Utilizzo il posizionamento assoluto con i margini negativi.

#main {
  position:absolute;
  top:50%;
  left:50%;
  width:500px;
  height:200px;
  margin-left:-250px;
  margin-top: -100px;
}

Continua la lettura di Centrare un DIV in orizzontale e verticale →