Source: https://blog.merlinox.com/css-invertire-il-posizionamento-verticale-dei-div/
Timestamp: 2019-08-23 14:35:19+00:00

Document:
﻿ CSS: Invertire il posizionamento verticale dei div - Merlinox's Blog
CSS: Invertire il posizionamento verticale dei div
Scritto il 29/10/2008 da Merlinox in Web Mania
Secondo alcune teorie SEO, assolutamente testate, pare che la posizione dei contenuti all’interno del HTML sia piuttosto rilevante. Cambiando però punto di vista secondo le teorie dell’usabilità sarebbe buona cosa che il menù di navigazione apparisse prima di tutto. Tali teorie sono riportate anche nel documento di accessibilità della legge Stanca.
Ma sono due cose in contrasto, come fare? Dal punto di vista del codice putroppo non ci sono soluzioni, chi è sopra è sopra, chi è sotto e sotto! Dal punto di vista visuale però possiamo fare qualcosa.
Ho lanciato la provocazione tecnica anche agli amici del forum di HTML.it. Inizialmente il titolo non è proprio piaciuto, forse ho esagerato. L’argomento però si anche se purtroppo la discussione non è stata così fruttuosa. Alla fine una soluzione insieme l’abbiamo trovata, purtroppo però obbligatorio l’uso di Javascript.
L’esempio lo trovate nella pagina Vertical Switch Div. La soluzione si basa su questo CSS:
E su questo script javascript richiamato dopo la lettura dei due DIV:
function myDiv1Top(){
var margine = 10;
d1.style.top = d2.offsetHeight + margine + "px";
Per il funzionamento completo fate riferimento alla pagina linkata sopra e al suo codice. Dopo aver letto i due DIV, viene richiamata la funzione javascript myDiv1Top, la quale prende l’altezza (d2.offsetHeight) del primo DIV da visualizzare (myDiv2) la somma a un margine e setta l’attributo TOP al secondo div da visualizzare (myDiv1).
Se avete esigente diverse grafiche o più DIV dovete chiaramente giocare con margini iniziali e sommatorie multiple delle altezze. Non mi sembra una grande soluzione, però sinceramente non ne ho trovate altre. Se ne conoscete sarò ben lieto di pubblicarle e riportarle su HTML.it.
Pubblicato il 29/10/2008 in Web Mania (CSS, HTML, javascript, SEO, web design)
← CSS: posizionamento elementi Songza / Il Coccodrillo Come Fa →
13 pensieri su “CSS: Invertire il posizionamento verticale dei div”
yuri 29/10/2008 alle 09:41
io di recente ho fatto caso che con il menu di navigazione in alto, google ha fatto dei sitelink ad un blog, io non li ho…questo in ottica seo può essere utile a chi vuole staticizzare wordpress
è un bel tick 😉
Merlinox Autore articolo 29/10/2008 alle 09:47
@yuri: penso che i site link vengano assegnati a manella da revisionatori di google. In ogni caso è più importante la struttura semantica/organica delle pagine, piuttosto della posizione del menù. Ma nel mondo SEO nessuna certezza esiste.
Lauryn 03/11/2008 alle 19:32
io recentemente ho invece invertito l’ordine di tre colonne verticali. molto più semplice da fare e senza l’uso di javascript, ma il concetto è lo stesso: prima l’usabilità e poi il seo 🙂
Pingback: Seo e accessibilità: invertiamo la posizione dei div | Italian webdesign
Merlinox Autore articolo 04/11/2008 alle 16:54
@lauryn: be con le colonne verticali si possono fare dei giochi simpatici. anche con 3, basta raggrupparle: avevo pure scritto qualcosa a riguardo. anzi ti dirò di più, questo è il link 3 colonne ottimizzate, mentre questo stesso blog è basato su quel gioco lì!
Seo in Abruzzo 04/11/2008 alle 19:49
I sitelinks vengono gestiti in automatico dall’algoritmo che può levarli e metterli a suo piacimento.
I quality raters entrano (al momento) nel solo processo di revisione dei siti.
Perchè mischiare del JS con del sano CSS, quando si può ottenere lo stesso strutturando correttamente un sito?
Merlinox Autore articolo 05/11/2008 alle 08:40
@SEO in …: I know: thanks. Però via GWT possiamo rimuovere quelli che riteniamo non idonei.
Inserire il JS con CSS perchè a quanto pare la soluzione al problema che ho post non l’ha ancora data nessuno, nemmeno quelli del forum HTML! Se tu ce l’hai ben venga.
Ma che non sia una soluzione a una problematica SEO ma a quel preciso problema HTML
Seo in Abruzzo 07/11/2008 alle 07:30
@Merlinox,
perdonami, quando si dice che i contenuti hanno importanza, tanto per usabilità che per SEO, non significa che se lato HTML fai comparire prima il tuo menù, Google e affini ti penalizzano. Anzi.
Oggi i browser sono sufficientemente intelligenti da fare lo scan dei documenti e capire di quello di cui parli indipendentemente dalla posizione dello scritto nel tuo documento. Quindi il problema che ti stai ponendo è assolutamente inutile.
Rifai il layout della pagina e metti prima il menu e poi il contenuto. Se questo ti è impossibile per non sò quale ragione (e per carità potresti averne), allora la tua soluzione può essere una valida alternativa. Ma ricorda, è solo una alternativa “grafica”.
I diversamente abili che usano uno screen reader per supplire alle loro mancanze, la tua pagina con il tuo script gli verrà sempre letto prima il contenuto e poi il menù, quindi accessibile solo visivamente.
Merlinox Autore articolo 07/11/2008 alle 08:39
@Seo: sono d’accordo con te ma ormai è (per me) più un problema da webdesigner che altro. Temo che la conclusione sia “per invertire verticalmente due elementi HTML serve JS!”.
Daniele 31/05/2011 alle 22:28
Merlinox Autore articolo 31/05/2011 alle 23:39
E l’accatiemmelle come lo fai? Dai posta una pagina di esempio che vediamo come funziona. Grazie.
Daniele 31/05/2011 alle 23:51
Dato che non è possibile postare html linko la pagina test:
http://www.asaquattrocento.com/_test/vertical_invert.html
Merlinox Autore articolo 01/06/2011 alle 00:52
Figata!!! Non avevo veramente idea si potesse fare una cosa simile. Ma la cosa strana è che se metti 200% lui prende l’altezza doppia di content… GRAZIE!!!

References: articolo 29
 articolo 04
 articolo 05
 articolo 07
 articolo 31
 articolo 01