Se per esempio agli LI di una lista attribuisci display:inline-block o display:inline, tra le voci si verranno a creare dei piccoli spazi, per ovviare puoi scrivere gli LI attaccati nel codice html oppure associare al contenitore padre font-size:0
E’ davvero possibile farlo? La prima cosa che ci assicuriamo quando dobbiamo centrare un elemento è controllare se è dotato di larghezza e altezza. Sono informazioni che ci rendono sicuramente l’operazione molto più semplice. Ma cosa succede se non si hanno queste informazioni? è ancora possibile centrarli in modo verticale e orizzontale? Approfondendo anche in rete credo [...]
Elimina! In questo post troverai una mia realizzazione riguardo all’eliminazione di un prodotto da carrello. Ho cercato di riprodurre un’effetto simile a quello della gestione dei brani musicali su iphone, praticamente quando si vuole eliminare una canzone da un album. Vediamo in che modo. Codice Html Come prima cosa ho impostato il codice html. Questa lista [...]
Introduzione In un precedente articolo, ti ho spiegato come affiancare elementi blocco con la proprietà CSS3 column. Voglio ricollegarmi a quella proprietà, molto comoda ma ancora poco supportata per analizzare un metodo un pò più old school ma sicuramente piu retro-compatibile per realizzare un layout multicolonna con larghezze miste. Era da un pò di tempo [...]
Facciamo 2 calcoli Pochi mesi fa Stefano ha spiegato nel post “Box-sizing CSS3” come calcolare in modo automatico la larghezza di un elemento attraverso la proprietà box-sizing. Oggi voglio ricollegarmi al concetto introducendo la proprietà calc(). Questa proprietà consente di effettuare delle vere e proprie espressioni matematiche utilizzando addizione, sottrazione, moltiplicazione e divisione come valore [...]
Evitiamo ridondanze Spesso ti sarai ritrovato a ripetere un valore di una proprietà in diverse regole css. A volte è necessario, ma in alcune situazioni si potrebbe anche evitare. Un primo esempio Immagina ad esempio di voler cambiare il colore della navigazione principale con lo stesso colore del corpo del testo, faccio subito un esempio [...]
Cosi non ci piace! A chi non è mai capitato almeno una volta di affiancare elementi con la proprietà display:inline-block? Questo metodo ha però un piccolo difetto, accostando gli elementi html tramite css si viene a creare un piccolo spazio che li divide. Vediamo di cosa si tratta. Codice html e css Ecco il risultato [...]
Di cosa parliamo? Oggi voglio parlarti di questa proprietà CSS appartenente al livello 3 delle specifiche che consente di “ridisegnare” il box-model a cui siamo solitamente abituati. Se non sai proprio di cosa sto parlando, prima di continuare la lettura, ti consiglio di dare uno sguardo a questo e quest’altro mio vecchio articolo, in caso [...]
Il problema! Uno dei grandi problemi di noi WebDesigner è sempre stato quello di dover affiancare elementi blocco di differenti altezza. L’esempio potrebbe essere quello di una normalissima lista nella quale si susseguono più elementi affiancati l’uno all’altro. L’unica proprietà (a parte il position) che consente di affiancare due elementi blocco estraendoli dal normale flusso [...]
L’importanza della proprietà display In un precedente articolo di Antonio Polese sulla modifica dei ruoli, c’è un concetto direi fondamentale sul quale si basa tutto il funzionamento dei CSS, ovvero la natura intrinseca di un elemento. Quando setti la propietà display per un particolare elemento del DOM, devi sempre ricordati che stai modificando il ruolo [...]
Come posizionare il Footer Ultimamente abbiamo già trattato un articolo simile, vi abbiamo suggerito come posizionare un footer in fondo ad una pagina web. Grazie ad un javascript in questo articolo vedremo come posizionare un elemento dopo un contenuto in modalità assoluta, come un footer dopo due colonne in position absolute. Questa soluzione è stata [...]
I Wireframe Oggi voglio parlarti di come realizzare un template che abbia il footer sempre posizionato in fondo alla pagina, sia nel caso in cui i contneuti sono talmente pochi da non generare alcuna scrollbar, sia nel caso in cui sono gli stessi contenuti a spingere verso il basso il footer. Il seguente wireframe, realizzato [...]