Il box model è quel modello che definisce le regole per la gestione dei blocchi all'interno della pagina html.
Vediamo la nostra pagina html come un insieme di box, suddivisi fra righe e colonne. Possiamo controllare l'aspetto e il comportamento di questi elementi grazie alle sue proprietà principali:
- Padding
- Margin
- Border
Ciao. Sto realizzando un modulo di iscrizione alla newsletter che lasci l’utente all’interno del sito anzichè essere rediretto alle pagine di mailchimp.
Ho installato il plugin “MailChimp per WordPress” che permette di realizzare un form collegato a una lista di utenti. Da notare che il form eredita lo stile dal tema Enfold che è quello che sto usando per il sito
Ho quindi personalizzato il codice html e impostato i css necessari per visualizzare correttamente il tutto e ora il risultato mi soddisfa tranne un particolare: la posizione del pulsante “Iscriviti” che non è centrato rispetto al form ma si trova sul lato sinistro.
Ho provato a dichiarare per questo pulsante una classe e assegnargli la proprietà {margin:0 auto} ed anche a isolare il bottone in un div al quale ho assegnato una classe specifica assegnandogli la stessa proprietà.
Mentre la proprietà ha effetto sui margini superiore ed inferiore della classe (sia dell’elemento che del div nel quale è contenuto), non ottengo il risultato di vedere centrat il pulsante.
Cosa mi sfugge? Forse è qualche proprietà del tema Enfold che “vince” su quelle del mio codice personalizzato?
Cia Andrea, per tagliare la testa al toro e controllare che appunto non sia una proprietà di Enfold “ad avere la meglio” prova ad usare !important.
Questa dichiarazione dice al browser “Ehi, qualsiasi proprietà è stata dichiarata, questa vince!”.
Logicamente lo sviluppatore di tema o altro non deve utilizzare !important perché altrimenti toglie questa possibilità all’utilizzatore finale. Pertanto non è una best practice.
buona giornata
Ciao Lorenzo, non pare essere un problema di sovrapposizione con Enfold. !important non ha effetti e se assegno un margine sinistro ad esempio di 20px, il pulsante si sposta verso destra della corrispondente quantità mentre la dichiarazione “auto” non ha nessun effetto. eppure è questa che si dovrebbe utilizzare per centrare il pulsante vero?
Ciao Andrea,
dipende dalla larghezza del contenitore in cui hai messo il pulsante. Assegna a questo un width:100%.
Tipo così?
…….
.body {width:100%;}
…….
Ciao Andrea,
un consiglio in genarale, ma soprattutto per quando si deve scrivere codice, sia di programmazione che HTML/CSS. Elabora il tutto sempre “estaniandolo” dal contesto. Per contesto intendo in questo caso WordPress, plugin ecc… Prima di inserire il tuo codice all’interno di un ambiente, devi come prima cosa padroneggiare gli strumenti e come seconda cosa essere sicuro che funzioni in autonomia. In questo modo quando lo andrai ad inserire e qualche cosa non va, allora saprai che potrebbe essere l’interazione fra quello che hai fatto tu e l’ambiente, e non un errore nel tuo codice… fondamentale.
Facciamo un esempio in questo caso. Creiamo una pagina HTML ed inseriamo:
<div style="width:100%;"><button style="margin: 0 auto; width:200px">Clicca qui</button></div>Ok qualcosa non va… il bottone non è centrato. Forse è il tag button che da problemi? Proviamo a sostituirlo con un semplice div:
<div style="width:100%;"><div style="margin: 0 auto; width:200px">Clicca qui</div></div>Ah ok, con il div funziona. Se non mi viene in mente il problema allora cerco in Google: “button html margin 0 auto” e come sempre, il mitico “stackoverflow” ci dona risposta.
Ovvero l’elemento di input button è inline (vedi le lezioni dedicate a questo argomento) ma per avere un margin auto, giustamente, deve essere block. Quindi aggiungiamolo nei css:
<div style="width:100%;"><button style="margin: 0 auto; width:200px; display: block;">Clicca qui</button></div>Spero ti averti dato un processo chiaro da seguire quando crei tu le cose.
Ti assicuro che questo ti risparmia tempo e grattacapi. Soprattutto con tutte le regole e le cose che ci sono da ricordare, a meno che non le usi quotidianamente, devi sempre rifarti a delle risorse, in primis Google. Io stesso giornalmente faccio decine di ricerche su Google: ci fosse una volta che mi ricordo i nomi delle funzioni!
Buona giornata
eh..niente..quando si ha a che fare con i professionisti la differenza si vede!
il bottone ora è centrato!
Ciao Andrea,
grazie! L’importante però è che tu abbia capito il processo di come ho affrontato e risolto il problema.
Buona giornata