Dimensione del corpo / Quale codice è richiesto?

[ogulcan1787]

Ciao a tutti.
Ho aggiunto il raggio del bordo a questo codice e ho reso la parte inferiore come volevo.
Ma non riesco a sistemare la parte superiore.

Quali codici dovrei aggiungere per far sì che la parte superiore assomigli alla parte inferiore?

come: top-height-size: -30%; ? ma questo non funziona

body:before {
  display: inline-block;
  border-radius: 15px;
  width: 1125px;
  min-height: 100%;
  height: inherit;
  background-color: #fff;
  content: " ";
  position: fixed;
  left: 50%;
  right: 0;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}

[bryce (Bryce Huhtala)]

Mi dispiace, ma non sembra chiaro cosa devi fare. Potresti aggiungere maggiori dettagli su:

1. Quale parte specifica della pagina stai cercando di modificare.
2. Quale modifica stai cercando di apportare.

[ogulcan1787]

La parte superiore, voglio farla così
https://pvpfarm.com
Voglio aggiungere un raggio del bordo come la parte inferiore (sotto)
Tutto quello che voglio è avere un po’ di spazio in alto tra essa e l’intestazione.

Il mio inglese è scarso, scusa. Grazie per l’aiuto

[bryce (Bryce Huhtala)]

Va bene, il tuo inglese è buono, ma il codice può essere complicato da spiegare! Grazie per aver aggiunto maggiori dettagli. Penso che il problema abbia senso.

A volte puoi usare margin-top per aggiungere più spazio sopra.

Ma non funziona quando scorri!

Questo perché c’è position: fixed nella parte body:before, quindi rimarrà sempre nello stesso punto dello schermo. Cambiamolo invece in position: absolute. ‘Absolute’ ci permette di dirgli quanto vogliamo che i bordi siano distanti dai lati. Dobbiamo dirgli di usare body per i lati, quindi dobbiamo aggiungere questo codice:

body {
  position: relative;
}

(Se vuoi saperne di più su position, fixed e absolute qui qui c’è un post con esempi)

Ok, eliminiamo min-height: 100% da body:before, perché vogliamo che sia più corto del 100%. Ora possiamo controllare dove sono il sopra e il sotto! Aggiungiamo top: 70px e bottom: 30px. (Top deve essere abbastanza grande da superare l’header dalla parte superiore dello schermo).

Sembra come volevi? Fammi sapere se ha senso.

[ogulcan1787]

Sei fantastico!
Grazie per avermi insegnato invece di darmi codici già pronti.
@bryce