Padding & Margin...

**cristianleandri** · 06-04-2025, 11.53.26

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.

**GraphOGLRisorse** · 06-04-2025, 13.36.40

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.

**cristianleandri** · 06-04-2025, 13.39.48

Ok ma non voglio usare Flex... puoi darmi un sorgente compilato?

**GraphOGLRisorse** · 06-04-2025, 14.46.33

Originalmente inviato da cristianleandri

Ok ma non voglio usare Flex... puoi darmi un sorgente compilato?

Va bene, niente flex box.

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.

**cristianleandri** · 06-04-2025, 15.50.47

Postami un "sample" di come faresti te... sorgente intendo...

**GraphOGLRisorse** · 06-04-2025, 19.56.22

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:

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>

Cordiali saluti.

**cristianleandri** · 07-04-2025, 08.41.56

Non voglio usare i div, come posso mettere una pezza al codice attuale e togliere lo spazio vuoto in basso?

**GraphOGLRisorse** · 07-04-2025, 16.13.44

Originalmente inviato da cristianleandri

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.

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:

Codice:

table {
  height:100vh;
}

oppure, cambiando i valori altezza e larghezza in tr e td in questo modo:

Codice:

#main tr{
  height:12.8rem;
}

#main td{
  width:12.8rem;
  
  /* --- resto dei valori --- */
}

In entrambi i casi, i risultati varieranno a seconda del dispositivo da cui la pagina sarà visualizzata.

Cordiali saluti.

Discussione: Padding & Margin...

LinkBack

Strumenti discussione

Display

Padding & Margin...

Tags for this Thread

Regole di scrittura