Solo il blog di un altro web designer.
Postato il 6 Luglio 2007
Riprendo un secondo un articolo che avevo scritto tempo fa per la versione inglese di questo spazio, e cerco di portare il discorso un po’ più avanti.
Dunque, potendo scegliere di inventare così su due piedi una nuova proprietà dei fogli di stile, avevo pensato che sarebbe stato utile poter impostare automaticamente due colonne ad avere la stessa altezza. Tradotto in fanta-CSS verrebbe più o meno così:
#div2 {
height: #div1;
}
Ovvero, in parole povere:
Rendi l’elemento caratterizzato da
iduguale adiv2alto tanto quanto l’elemento coniduguale adiv1.
Ok, questa è fantascienza, ma con Javascript forse qualcosa può essere fatto in tal senso. Javascript è infatti in grado di modificare gli elementi di un documento XML leggendo e alterandone le rispettive proprietà. Per questo motivo, possiamo immaginare di leggere l’altezza di div1, e applicarla a div2.
Portando avanti il ragionamento, potremmo pensare di estendere la cosa a più elementi. Potremmo ad esempio scegliere di dare una particolare classe a tutti gli elementi che vorremmo avessero la stessa altezza, in modo da gestire la presentazione della nostra pagina solo ed esclusivamente tramite fogli di stile, come dovrebbe essere.
Quindi, con la funzione getElementsByClassName definita dall’utente che ritorna un array contenente tutti gli elementi che hanno una data classe, ecco la funzione che normalizza le altezze degli elementi posti in quell’array.
function stessa_altezza(className) {
cols = getElementsByClassName(className);
var max = 0;
for(var i=0; i<cols.length; i++) {
if(cols[i].clientHeight > max) max = cols[i].clientHeight;
}
for(i=0; i<cols.length; i++) {
cols[i].style.height = max + "px";
}
for(i=0; i<cols.length; i++) {
if(cols[i].clientHeight > max) {
offset = cols[i].clientHeight - max;
cols[i].style.height = (parseInt(cols[i].style.height)) - offset + "px";
}
}
}
Descrivendo a parole cosa fa la funzione in oggetto:
classNamePer maggiore chiarezza, ecco un esempio pratico della funzione.
Al momento non sono presenti riferimenti esterni per questo articolo.
By Andrea Gandino — XHTML + CSS.
La soluzione mi piace. Anche se a me verrebbe più naturale usare direttamente il foglio di stile per impostare un’atezza fissa (o meglio massima)..
Grazie della dritta e complimenti.
Ciao Davide, grazie per il commento e per i complimenti!
Purtroppo utilizzare un’altezza fissa o massima da CSS limita parecchio le possibilità, dal momento che sullo sviluppo verticale di una pagina non si hanno mai molte certezze.
Se è vero che possiamo controllare la lunghezza di un testo, è altresì vero che potrebbe bastare qualche ingrandimento del testo a sballare completamente il layout.
Javascript è soltanto una “pezza”, diciamo, ma finora mi pare quella che funziona meglio.
Soluzione eccellente, che terrò presente.
Ho questo problema: trasformare un “Corso di merceologia alimentare” per corsisti R.E.C., fatto con i frames, in qualcosa di più moderno, ad esempio sulla base di un layout a tre colonne con le classiche sezioni header, navigation, extra, content, e footer. Ho studiato la “Guida Layout dei siti con CSS” di Cesare La Manna su HTM.it, ma ho avuto la spiacevole sorpresa che di tutte le soluzioni presentate non ne funziona nessuna; gli chiederò a breve come si spiega la cosa (eppure, ho copiato ed incollato, e sono stato molto attento a linkare o incorporare bene il CSS).
Ti chiedo: puoi segnalarmi qualche articolo sul Web per capire il punto di partenza? Potresti dirmi tu qualcosa?
Tempo un mese, e potrei metter su un sito tecnologicamente più moderno … e “fatto a mano”!
Poi, potremmo collaborare, ad esempio, su come fare un Web diverso.
Cordiali saluti.
Zeferino Siani, alias Ciceron80.
Ciao Zeferino!
Guarda, se vuoi cominciare da qualcosa di base, forse potresti prendere in considerazione l’eventualità di affidarti a un template già fatto, come se ne trovano molti in giro; per citare una soluzione italiana, ti consiglio di farti un giro su Layout Gala di Alessandro Fulciniti, che dovrebbe fare al caso tuo.
Per quel che concerne un discorso più ampio riguardo ai CSS, ti posso rimandare a CSS Basics (in inglese), oppure ai tutorials, preziosissimi, sui CSS redatti da W3schools.
Spero di esserti stato d’aiuto, e grazie per il commento!
Egregio Andrea,
ho incontrato di nuovo questo vecchio commento e questo ottimo tuo articolo.
Ti riscrivo perchè debbo fare una precisazione.
“Guida Layout dei siti con CSS” di Alessandro Fulciniti (e non di Cesare Lamanna) è un lavoro eccellente, che io inizialmente non avevo capito. Poi, studiandolo meglio, sono riuscito a fare il sito che volevo, e “fatto a mano”, e cioè utilizzando in pratica solo HTML. Sul sito ho ringraziato pubblicamente l’autore.
Appena avro finito un articolo (Riflessione sulla mente umana) che mi sta impegnando da qualche settimana - occorre un background di biologia molecolare - passerò allo studio di Javascript. Probabilmente, avremo modo di collaborare.
Cordiali saluti.
Zeferino Siani - (Cicerone80)