Allineamenti e risposta allo zoom

**WebNovellinoDsg** · 25-12-2021, 02:02

Ciao Ragazzi e buone feste.
Da 2 3 giorni ho problemi con gli allineamenti degli elementi e dello sfondo immagine del body.
Innanzitutto non riesco ad allineare il div al centro del body, sarà una cavolata di sicuro ma dalla stanchezza comincio a non capirci più nulla.
Cosa invece che mi fa innervosire parecchio è il background image del body: ho notato che se riduco lo zoom, il contenuto del body (div) si riduce sullo schermo, mentre background image non si ristringe proporzionalmente come/con il div, ma resta espanso su tutto lo schermo/area del browser, vorrei si ristringesse anche il background...
Preciso comunque delle dimensioni che potrebbero esservi utili, ho uno schermo 1366X663, avendo utilizzato un height 1024 e comparendo quindi la scrollbar, al width del body ho tolto 17px di quest'ultima per evitare la comparsa della barra anche giù, quindi width in % probabilmente non mi aiuterebbe.
Vi posto il codice, spero in modo corretto:

codice:

<!DOCTYPE html css>
<html lang="it-en-us">
    <head>
        <title>xyz5&ograve; Galleria!</title>
        <meta charset="utf-8" name="author" content="FDS";/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta name="size" content="width: 1366px; height:1326px"/>

<style type="text/css">

    body{
        background-image: radial-gradient(gold, #F0C241, goldenrod, #cda435,goldenrod,
        #F0C241, gold, #F0C241, goldenrod, #cda434, goldenrod);
        background-repeat: no-repeat; background-attachment: scroll; background-size: cover; width: 1349px; height: 1326px; margin: 0px;}
    div{border: black 30px; width: 1000px; height: 950px; background-color:purple;text-align: center;}
</style></head>

<body>
    <div><h1>000</h1></div>
</body>
</html>

**KillerWorm** · 27-12-2021, 18:40

Ciao, Buone Feste anche a te

La proprietà text-align:center viene applicata solo a testo ed elementi a livello inline. Il tuo div è a livello block, per questo motivo tale proprietà non influisce sul suo allineamento ma, dal momento che è ereditaria, influisce sui contenuti inline che sono dentro quel div.

Per allineare orizzontalmente un elemento block, di larghezza definita, puoi impostare il valore auto ai margini laterali:

codice:

margin: 0 auto;

.
Considera comunque che, avendo impostato una larghezza fissa per il body, il div risulterà allineato rispetto a tale larghezza, non alla larghezza totale della finestra del browser (viewport).

Ci sono comunque diverse soluzioni possibili per centrare gli elementi in orizzontale e/o verticale.
Puoi trovare vari riferimenti di guide e tutorial al capitolo "CSS in azione" dei link utili CSS, sotto la voce "Centrare in orizzontale/verticale".

il background image del body: ho notato che se riduco lo zoom, il contenuto del body (div) si riduce sullo schermo, mentre background image non si ristringe proporzionalmente come/con il div

L'elemento body ha dei comportamenti particolari rispetto ad un generico div.

Ora non so quali specifiche siano considerate per questo comportamento ma, in sostanza, quello che sta avvenendo è il fatto che il suo background viene esteso per tutto l'elemento <html>.
Per l'imitare il background solo sul body basta impostare la proprietà background anche per html.

Ad esempio:

codice:

html {
   background: #fff;
}

.

Qui noto qualche mancanza:

codice:

border: black 30px;

Occhio, hai impostato il border per il div ma la forma contratta che hai usato, pur risultando valida, potrebbe essere incompleta. Se non specifichi anche un valore per la sotto-proprietà border-style (necessaria), questo resta "none" di default, per cui non sarà mostrato alcun bordo.

Vedi documentazione:
CSS Shorthand Border Property
CSS border-style Property

Una forma "corretta" potrebbe essere:

codice:

border: 30px solid black;

.

Buon proseguimento

Discussione: Allineamenti e risposta allo zoom

Strumenti discussione

Ricerca discussione

Visualizza

Allineamenti e risposta allo zoom

Permessi di invio