
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Teoria e pratica di una delle più potenti e complesse tecniche CSS
I margini negativi combinati ai float sono uno degli strumenti più versatili per realizzare layout basati sui CSS. Non si tratta di un argomento nuovo qui sulle pagine di HTML.it: sono stati già pubblicati infatti Layout con i margini negativi e la serie Layout Gala, di cui è disponibile una pagina indice.
Abbiamo ritenuto però che fosse necessario approfondire le basi della tecnica: sebbene il meccanismo sia piuttosto semplice, la sua comprensione totale è indispensabile per il suo utilizzo.
Il concetto dei margini negativi combinati ai float si può condensare tutto in unica frase:
Un margine negativo concorde con il lato del float ha l’effetto di traslare ulteriormente verso il lato del float l’elemento a cui è applicato; un margine negativo opposto al lato del float non ha effetto sulla posizione dell’elemento a cui è applicato, ma ha l’effetto di cedere spazio ad altri elementi affiancati sul lato del margine negativo.
Questo concetto è da tener ben presente negli esempi che seguiranno.
Presentiamo subito il primo esempio, che difficilmente
troverà utilizzo pratico così com’è ma è fondamentale per la comprensione dei margini negativi.
L’HTML è molto semplice. Si tratta di un unico div
con un paragrafo
al suo interno:
<div id=”box1″>
<p>Qui il testo</p>
</div>
Ora il foglio di stile: nel CSS incorporato all’esempio sono presenti diverse regole,
tra cui l’eliminazione di margin e padding dagli elementi html
e body
e l’assegnazione di un “righello” di sfondo per agevolare la comprensione. L’unica regola CSS
dell’esempio fondamentale è però la seguente:
div#box1{
float: right;
width: 500px;
margin-right: -200px;
}
In sostanza, il div con id="box1"
viene reso float a destra, con una larghezza di 500 pixel
e un margine destro di -200px. In questo caso quindi l’effetto, dato che il margine negativo
è concorde con il lato del float, sarà di traslare ulteriormente il div verso il lato comune,
ovvero verso destra.
Visto che il float accosta il div sul lato destro della finestra del browser, il margine negativo di 200 pixel avrà quindi l’effetto di traslare l’elemento oltre la finestra del browser, a tal punto che 200 pixel dell’elemento stesso non sono visibili. L’area visibile del div dell’esempio sarà quindi 300 pixel (500 pixel di larghezza meno i 200 pixel di margine negativo).
Una piccola nota pratica: nel traslare elementi oltre gli estremi della finestra del browser un’accorgimento fondamentale è assicurarsi che non vengano generate scrollbar orizzontali in nessun browser su cui si effettuano i test di resa. La loro comparsa non è purtroppo documentata e sinceramente non mi sono molto chiari i meccanismi che le causano. Generalmente è comunque possibile adottare un diverso approccio ed evitare le scrollbar.
Eccoci quindi al secondo esempio, in cui i margini negativi, concordi con il lato del float, vengono usati per ottenere un layout a due colonne. Ecco il markup dell’esempio:
<div id=”box1″>
<div id=”box1-content”>
<p>Contenuto box 1</p>
</div>
</div>
<div id=”box2″>
<p>Contenuto box 2</p>
</div>
Anche in questo caso i margini negativi concordi con il lato del float vengono usati
per traslare un’elemento verso il lato del float. Vediamo il CSS
dell’esempio. Per prima cosa il div id="box1"
viene reso float a sinistra e dichiarato largo 700 pixel:
div#box1{
float: left;
width: 700px;
}
Il div con id="box2"
, largo 200px, è quello che usa i float e i margini negativi.
È reso infatti float a sinistra (e si disporrebbe naturalmente appena può, ovvero
accostato sul lato destro del box1) ma viene traslato di 700 pixel verso sinistra grazie
a un margine sinistro di -700 pixel, riportandosi quindi attaccato al bordo sinistro
della finestra del browser. Ecco la regola:
div#box2{
float: left;
width: 200px;
margin-left: -700px;
}
Per evitare la sovrapposizione del contenuto dei due div, è quindi necessario
un elemento all’interno di box1
con un margine sinistro proprio di
200 pixel (ovvero la larghezza di box2), con id="box1-content"
che ha lo scopo
di rendere quindi 500 pixel utili al contenuto per box1, alla destra del box2.
Ecco la regola:
div#box1-content{
margin-left: 200px;
}
Riepiloghiamo quindi i passi logici utilizzati nella costruzione dell’esempio:
Ed ecco le tre regole CSS relative:
div#box1{float: left;width: 700px}
div#box2{float: left;width: 200px; margin-left: -700px}
div#box1-content{margin-left:200px}
Il nostro esempio è così ultimato, siamo pronti a passare al successivo.
Siamo cosÏ arrivati al terzo esempio, in cui i margini negativi vengono utilizzati sul lato opposto del float: in questo caso i margini negativi non hanno effetto sulla posizione dell’elemento float, ma servono a cedere spazio ad elementi affiancati sul lato del margine negativo. Cominciamo dal markup di base, che è lo stesso dell’esempio precedente:
<div id=”box1″>
<div id=”box1-content”>
<p>Contenuto box 1</p>
</div>
</div>
<div id=”box2″>
<p>Contenuto box 2</p>
</div>
Ora procediamo con il CSS dell’esempio.
Il div id="box1"
viene reso float a sinistra, con larghezza 100% e un margine destro negativo
di 200 px. Ci sono alcune dettagli implementativi da approfondire: il div in questione
viene reso float a sinistra così da permettere ad eventuali div di affiancarsi. Sebbene abbia larghezza
100%, grazie al margine negativo destro, e quindi opposto al lato del float, è in grado infatti di cedere
200 pixel sul lato destro.
Ed è proprio 200 pixel la larghezza del div id="box2"
, che, essendo float a destra, va ad accomodarsi
nello spazio ceduto da “box1”. Da notare che lo stesso effetto si sarebbe ottenuto rendendo float l’elemento a sinistra.
Infine al contenuto del box1, ovvero il div id="box1-content"
viene assegnato un margine destro di 200 pixel,
così da evitare la sovrapposizione del contenuto. Ecco quindi le tre regole CSS:
div#box1{float: left; width: 100%;margin-right: -200px}
div#box1-content{margin-right: 200px}
div#box2{float: right;width: 200px}
Il nostro esempio è così ultimato: rivediamolo.
In questo articolo abbiamo visto tre semplici esempi spero utili per la comprensione dei margini negativi combinati con i float. La compatibilità degli esempi è buona: sono stati testati su Internet Explorer dalla versione 5.0 alla 7, Opera, Firefox e Safari.
Le potenzialità dei margini negativi, siano essi concordi od opposti al float, sono moltissime: unico neo dei questo approccio di sviluppo, è che il più delle volte sarà necessario un div aggiuntivo per regolare i margini effettivi ed evitare sovrapposizioni di contenuto.
Codice ed esempi sono disponibili per il download. Alla prossima.
Se vuoi aggiornamenti su Margini negativi inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Come cambiano i metodi di pagamento e lo stato dell’arte della sicurezza negli acquisti online.
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Un’introduzione Ghost, la blogging platform alternativa a WordPress e basata su Node.js nata per fornire funzionalità appositamente dedicate alla produzione di contenuti.
I driver, le schede video, gli emulatori, i giochi nativi: un piccolo vademecum per chi vuole usare Linux per giocare
Creare box con angoli arrotondati affiancati sulla stessa riga
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.