Printable View
Ciao, ho creato, anzi aggiornato il mio sito qui su AV... ho cercato di renderlo RESPONSIVE. Problema: visto da mobile e scrollato verso il basso si presenta comunque un enorme spazio vuoto. Mi dicono di correggere padding - margin... qualcuno tra Voi può aiutarmi?
URL: https://cristianleandri.altervista.org/
Grazie in anticipo,
Cristian.
Salve Cristian,
i meta tag è megglio metterli subito dopo il tag <title></title> anzichè tra CSS e js. Poi manca il meta tag di codifica caratteri <meta charset="UTF-8">.
Per rendere il sito responsive, vista la struttura a griglia, proveri a gestire il tutto con le proprietà flex box di CSS. Così che a seconda della risoluzione video si ridispongano le rispettive parti secondo lo spazio disponibile.
Anche la struttura a griglia gestita tramite tag <table></table> può essere modernizzata e graficamente riprodotta/emulata usando CSS.
Cordiali saluti.
Ok ma non voglio usare Flex... puoi darmi un sorgente compilato?
Va bene, niente flex box.Citazione:
Originalmente inviato da cristianleandri
In che senso un sorgente compilato?
HTML è un codice (o più precisamente un linguaggio di markup) che viene interpretato ed eseguito dal browser, non è un codice che viene compilato, come ad esempio avviene per gli script dei codici da cui si generano/compilano gli eseguibili di un programma da usare sul pc.
Cosa vorrebbe quindi, un demo con il codice già pronto all'uso in un file HTML?
Un demo riguardo a cosa, alle tabelle emulate in CSS o che altro?
Cordiali saluti.
Postami un "sample" di come faresti te... sorgente intendo...
Una tabella responsive è una cosa, mentre cosa ben diversa è una pagina con una struttura grafica a griglia. Per il secondo caso, non l'ideale l'uso di una tabella respomsive.
Io lo imposterei facendo qualcosa di questo tipo:
Cordiali saluti.Codice HTML:<!DOCTYPE html>
<html>
<head>
<title>Titolo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<style>
.center {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
height: 100%;
}
.container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
justify-content: center;
background-color: DodgerBlue;
}
.container > div {
background-color: #f1f1f1;
width:128px;
height:128px;
margin: 10px;
text-align: center;
line-height: 128px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
Non voglio usare i div, come posso mettere una pezza al codice attuale e togliere lo spazio vuoto in basso?
Se le misure tra le parti/elemnti (nel suo caso di 128x128) della pagina sono a misura fissa (quindi non è responsive), non sarà possibile riaddattare il tutto a seconda della risoluzione dello schermo.Citazione:
Originalmente inviato da cristianleandri
Si può forzare la cosa in 2 modi (sì, è proprio mettere una pezza al codice), con ovvie alterazioni tra le proprozioni di altezza è larghezza.
Aggiugendo questo per riempire tutta l'altezza:
oppure, cambiando i valori altezza e larghezza in tr e td in questo modo:Codice:table {
height:100vh;
}
In entrambi i casi, i risultati varieranno a seconda del dispositivo da cui la pagina sarà visualizzata.Codice:#main tr{
height:12.8rem;
}
#main td{
width:12.8rem;
/* --- resto dei valori --- */
}
Cordiali saluti.