Aiuto per corretto utilizzo box-sizing

[ivanisevic82]

Ciao a tutti, come da titolo, avrei bisogno del vostro supporto per risolvere un problema legato al box-sizing.

In particolare, ho una pagina del sito in cui è stato necessario applicare questa parte di codice, senza la quale una tabella costituita da quattro colonne, mi si "scompagina" completamente.

* {box-sizing: border-box;
}

Il problema è che se applico questa parte di codice a tutto il sito, viene alterata in tutte la pagina la larghezza complessiva.

Per questa ragione, ho applicato il box-sizing solo alla pagina contenente la suddetta tabella.

Ho però un'altra pagina dove dovrò riprodurre sia dei contenuti ordinari, sia la predetta tabella.

Vorrei poter attribuire il box-sizing solo alla porzione di codice (contenuta in un div contenitore) dove è presente la tabella.

Ho pertanto provato questo codice:

 #div_contenitore_tabella  {box-sizing: border-box;
}

Purtroppo in questo modo non viene applicato alcun border-box.

In altre parole, mi funziona solo se con "*" lo applico a tutta la pagina.

Potete aiutarmi a trovare una soluzione?

Grazie!

[KillerWorm]

Ciao, ti spiego come funziona.

Questa regola:

* {
  box-sizing: border-box;
}

si tratta di un reset generale del box model CSS. Il selettore universale asterisco (*) non fa altro che selezionare tutti gli elementi. Se viene applicato in quel modo, cioè senza specificare alcun elemento ascendente, avrà effetto su tutti gli elementi discendenti dell'oggetto radice; in sostanza equivale a scrivere html *

Ogni parte del selettore ha una specifica funzione:
- "html" è un selettore per nome tag, in questo caso viene selezionato l'elemento html
- " " lo spazio tra due selettori specifica una relazione "ascendente discendente", dove il discendente può avere un qualsiasi grado di parentela
- "*" l'asterisco è un selettore universale, per cui in questo caso selezionerà tutti gli elementi discendenti di html

Una volta che hai compreso questa logica, puoi applicarla in modo analogo alla tua tabella. E' abbastanza semplice per cui non ti fornisco una soluzione pronta ma ti invito a provare da te.
Se poi hai bisogno di ulteriore aiuto chiedi pure.

Riguardo al reset generale, come ti avevo accennato in una precedente discussione, si tratta di una tecnica utilizzata proprio per "facilitare" l'impostazione CSS dell'impaginazione. Oggi viene usata pressoché da tutti. Puoi fare qualche ricerca per maggiori informazioni.

Se ti è possibile, ti consiglio vivamente di usare questa pratica per tutte le pagine del sito (e per qualsiasi altro eventuale elaborato CSS di cui ti occuperai in futuro); è chiaro che in questo caso dovrai aggiustare i valori di quelle proprietà che non tornano ma, credimi, a lungo andare ne sarà valsa la pena. Ti sarà più semplice e intuitivo calcolare le dimensioni degli elementi all'interno del layout sia nella fase iniziale di sviluppo sia per qualsiasi implementazione, oltre al fatto che ti risparmierai vari probabili grattacapi qualora tu debba integrare codici esterni in cui è molto probabile trovare applicata tale tecnica, come questo caso.

[ivanisevic82]

Ciao Killer, scusa se rispondo in ritardo, purtroppo negli ultimi giorni ho avuto i minuti contati.

La tua risposta è stata illiuminante!

Ovviamente ho deciso di seguito il tuo consiglio, pertanto ho applicato il border-box a tutto il sito e sono andato a correggere la parte che veniva alterata, assegnando semplicemente alle colonne la larghezza corretta, escludendo dal conteggio i padding (la somma quindi doveva essere pari al 100% del max-width complessivo).

Ora tutto funziona a meraviglia, si tratta effettivamente di una cosa che semplifica molto la vita, ti ringrazio ancora una volta per avermi aiutato e supportato al meglio!

[KillerWorm]

Figurati, mi fa piacere essere stato d'aiuto e che tu sia riuscito a sistemare

Aggiungo giusto un'allegorica parentesi con qualche cenno storico per completare il quadro e comprendere meglio la necessità di usare, in maniera esplicita, tale tecnica.

---

Nei browser primordiali non esisteva la proprietà box-sizing, in quanto l'ancestrale box model CSS, ai suoi albori, era stato pensato e concepito per funzionare come sistema contenutocentrico. Ogni misura era imperniata sulla sostanza, escludendo dal calcolo la presenza di fronzoli e merletti vari.

Tale sistema quindi funzionava implicitamente generando un risultato che equivale all'attuale valore content-box. I bordi e i padding non erano considerati nel calcolo delle dimensioni, forse perché i siti web monolitici erano concepiti in maniera alquanto rudimentale e i web-designer patriarchi puntavano a ciò che c'era dentro il barattolo piuttosto che agli abbellimenti e al barattolo stesso.

Quando i web-designer si sono man mano evoluti, hanno sviluppato in loro la necessità di dare una maggiore importanza anche al lato estetico ed esteriore (quindi non solo ai contenuti) in modo da rendere più semplice l'addobbo dei nuovi siti web.

Si è così capito che l'antico sistema risultava scomodo perché induceva ad effettuare calcoli di entità stratosferica per i vari elementi solo per poter includere qualche bordatura e qualche spazio di respiro attorno ai relativi contenuti.

Allora i web-designer legionari hanno mosso battaglia contro i bastioni e la fortezza del W3C (l'ente supremo preposto alla standardizzazione di cose del web, ecc. ecc.).
Dopo poco tempo gli omini del W3C hanno ceduto alle incalzanti richieste di migliorare tale sistema e si sono impegnati nel trovare una soluzione che potesse andare bene per i nascituri siti web ma che, allo stesso tempo, non andasse a sconvolgere l'impaginazione dei siti web arcaici, già esistenti e frequentatissimi fino ad allora; altrimenti si sarebbe potuta verificare una contro rivolta da parte dei web-designer fondamentalisti.

Si è arrivati quindi ad un compromesso per il quale è nata la proprietà box-sizing che, come uno scettro, da il potere ad ogni web designer di decidere in modo esplicito il sistema più "consono" da applicare a qualsiasi elemento nei propri elaborati, secondo i valori "content-box" (valore di default) e "border-box".

Va da sé che il sistema più consono è, nella quasi totalità dei casi, "border-box" ma, per il fatto che molti web-designer novizi ne ignorano l'esistenza, si cade nell'errore di lasciare l'implicito valore di default con la conseguenza di lavorare col sistema più complicato. Infatti questo continua ad accadere, anche se sempre meno perché nella maggior parte dei casi ci si appoggia a strutture preimpostate che già includono il "moderno sistema".

---

E' tutto, buone cose