Impostare altezza div con i CSS

Giorgio Borelli

Impostare l'altezza di un elemento div con i Cascading Style Sheets (CSS)Il tag <div> è sicuramente tra i box più usati come raccoglitore di contenuti e per la preparazione di layout per le pagine web, capirne il corretto funzionamento secondo il box-model e formattarlo correttamente usando i fogli di stile (CSS), è basilare per chi realizza pagine html e sviluppa sul web.

Come descritto nel precedente articolo "Impostare altezza div con Javascript", uno degli aspetti fondamentali del div è la gestione della sua altezza, esso di default adatta la sua altezza al testo e immagini che esso contiene; in altri casi questa viene impostata come fissa specificandone il valore height in pixel o in percentuale in una regola di stile.

Ovviamente con un'altezza fissa per un div, nasce l'esigenza di gestirne la visualizzazione quando il suo contenuto varia, risultando di meno o in eccedenza rispetto all'altezza fissata, nell'articolo "Impostare altezza div con Javascript" abbiamo visto come modificare l'altezza di un div tramite una semplice funzione Javascript, questa tecnica sebbene efficace, ha la grossa limitazione di essere inutilizzabile quando i browser hanno Javascript disabilitato. Per ovviare a questo problema, ed ottenere una più estesa compatibilità cross-browser ci vengono in aiuto i Cascading Style Sheets (CSS) o più semplicemente Fogli di Stile, i quali ci consentono di specificare degli attributi per la proprietà height in grado di gestire correttamente l'altezza di un div anche quando il suo contenuto varia dinamicamente.

Prosegue...

Categorie: CSS | html | Web | Web Design

Tags: ,

Impostare altezza div con Javascript

Giorgio Borelli

Impostare l'altezza di un elemento div con JavascriptIl tag <div>, in html rappresenta un blocco per ragruppare e separare i contenuti di una pagina html. Secondo il block model, a differenza del tag <span> esso non è un elemento block inline, ossia qualsiasi altro elemento che vi sta affianco viene automaticamente riportato a capo, poichè esso occupa tutta la linea del documento (a meno di non specificare diversamente). Il tag div, viene usato in maniera massiccia nella realizzazione delle pagine html, sia come raccoglitore di contenuti che come blocco per il layout web, sopratutto in quei layout table less (che non fanno uso di tabelle) così consigliati dai più recenti standard web. L'elemento div può contenere qualsiasi altro elemento e testo, e nei siti dinamici assume un ruolo fondamentale, poichè in larghezza è un elemento block, come detto manda a capo gli altri elementi a seguire fuori dal div, in altezza invece ha la proprietà di adattarsi al contenuto che esso contiene, il chè lo rende utilissimo a questo scopo, ovvero nell'uso dei layout per siti con contenuti dinamici.

Allo stesso modo, possono nascere esigenze che il div abbia un'altezza fissa, impostata magari tramite una regola di stile, proprio per adattarsi bene al layout della pagina web e/o per una migliore resa grafica, come fare allora se il contenuto del div cambia dinamicamente o la sua altezza deve variare a seconda della pagina che navighiamo?

Siamo "costretti" a cambiare "al volo" l'altezza del div. Possiamo impostare l'altezza del div in due modi, o con i fogli di stile (css), o tramite Javascript; in questo articolo andiamo a scoprire come fare usando Javascript.

Prosegue...

Categorie: CSS | html | Javascript | Web Design

Tags: , ,

4 Metodi per aggiungere i CSS alle pagine HTML

Giorgio Borelli

Come inserire i fogli di stile nelle pagine webI Fogli di stile sono la tecnologia di riferimento per la realizzazione dei layout e della formattazione delle pagine web, per chi fà web, come i webdesigner o i webmaster, conoscerli è fondamentale, non fosse per altro che rappresentano lo standard imposto dal W3C per realizzare la struttura delle pagine web.

Un layout web realizzato con i CSS anzichè con le classiche tabelle HTML è impronta di professionalità e qualità del sito, oltre ovviamente a tutta una serie di vantaggi come l'indicizzazione, l'accessibilità, la manutenibilità, la pulizia del codice, la velocità del sito stesso. La filosofia che sta dietro i fogli di stile nasce dall'esigenza di avere un "linguaggio" distinto dall'HTML per strutturare e formattare i siti web, mentre l'HTML dovrebbe essere usato esclusivamente come markup per i contenuti, una tabella HTML serve per presentare dei dati in forma tabellare e non per suddividere le sezioni di una pagina web, ecco perchè sempre più il W3C impone l'uso dei CSS come standard, per radicare anche la mentalità che il codice (di formattazione o di programmazione) deve essere tenuto separato dal contenuto della pagina web.

Non voglio però entrare nella storia e nel merito dei CSS, sarebbe un argomento ben troppo lungo che esula dal nostro scopo, voglio fornirvi invece un'articolo che racchiude e spieghi le quattro tecniche  principali per inserire un foglio di stile all'interno delle pagine HTML, mostrando i vantaggi e gli svantaggi di ognuna di esse.

Prosegue...

Categorie: CSS | Web Design

Tags: , ,

Ottenere l'effeto frame senza l'uso dei frame con i CSS

Giorgio Borelli

Usare i Css con la proprietà overflow per ottenere un'effetto uguale a quelle dell'uso dei frame e degli iframeCome molti di voi sapranno i frame html consentono di suddividere il layout di una pagina web in più riquadri, consentendo così di presentare molte più informazioni di quelle che la singola pagina non potrebbe contenere a meno di non diventare chilometrica.

Indubbiamente quindi sia i frame (letteralmente cornici) che gli iframe (frame interni) presentano i loro vantaggi, primo fra tutti consentono di presentare e suddividere i contenuti in riquadri all'interno di una pagina web in modo tale d'agevolare la visione e la navigazione da parte dell'utente, come nella creazione di particolari menù, pagine con contenuti molto lunghi, richiami ad argomenti correlati, presentazione di script o parti di codice e così via.

Nonostante l'uso dei frame porta i suoi indubbi vantaggi (hanno avuto un grande successo in passato), l'uso ne è fortemente sconsigliato, oggi vengono visti come un'approccio dilettantistico e poco consono al layout ed all'indicizzazione delle pagine web per l'esigenze del Web 2.0. Tuttavia ci sono dei casi in cui il loro uso sembra quasi indispensabile, come fare allora ad ottenere l'effetto frame senza l'uso del frame stesso, ci vengono in aiuto i CSS (Cascading Style Sheets o fogli di stile), i quali sfruttando una loro regola di stile ci permettono di ottenere l'effetto frame senza subire tutti gli svantaggi derivanti dal loro uso.

Andiamo a scoprire come ottenere un effetto frame con i CSS senza l'uso dei frame.

Prosegue...

Categorie: CSS | Web Design

Tags:

CSS: pseudo class hover IE6 bug fix

Giorgio Borelli

Internet Explorer 6 non interpreta correttamente la pseudo class hover come regola nei fogli di stileCome visto anche nell'articolo precedente, la compatibilità Cross Browser ha un'importanza fondamentale nella realizzazione e nel successo di un sito web.

Visto e considerato che non tutti i browser interpretano correttamente ed allo stesso modo i tag HTML, e soprattutto se ne infischiano delle direttive del W3C (almeno nel passato), i Web Designer si ritrovano a dover risolvere problemi di compatibilità grafica tra i vari browser a dir poco ostici. Non solo abbiamo un elevato numero di browser, ma questi si moltiplicano ancora per le loro varie versioni, e riuscire a far vedere bene un sito con tutti, credetemi, è un'impresa faraonica se non impossibile. Comunque noi non ci scoraggiamo ed oggi cerchiamo di rendere la vita più facile agli sviluppatori web parlando di come risolvere (Fix) un bug dell'odiatissimo Internet Explorer 6 (ed anche IE5.5).

Il bug in questione riguarda la non corretta interpretazione della pseudo class hover in Internet Explore 6 e versioni precedenti.

Prosegue...

Categorie: CSS | Web Design

Tags: , , , , , ,