CSS: Invertire il posizionamento verticale dei div

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:

#myDiv1{
    position: absolute;
    top: 100px;
}
#myDiv2{
    position: absolute;
    top: 0;
}

E su questo script javascript richiamato dopo la lettura dei due DIV:

function myDiv1Top(){
    var d1 = document.getElementById("myDiv1");
    var d2 = document.getElementById("myDiv2");
    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.

 

Loading Facebook Comments ...

13 pensieri su “CSS: Invertire il posizionamento verticale dei div

  1. yuri

    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

    p.s.
    è un bel tick 😉

    Rispondi
  2. Merlinox Autore articolo

    @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.

    Rispondi
  3. Lauryn

    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 🙂

    Rispondi
  4. Pingback: Seo e accessibilità: invertiamo la posizione dei div | Italian webdesign

  5. Merlinox Autore articolo

    @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ì!

    Rispondi
  6. Seo in Abruzzo

    @Merlinox
    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.

    @all
    Perchè mischiare del JS con del sano CSS, quando si può ottenere lo stesso strutturando correttamente un sito?

    Rispondi
  7. Merlinox Autore articolo

    @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

    Rispondi
  8. Seo in Abruzzo

    @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.

    Rispondi
  9. Merlinox Autore articolo

    @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!”.

    Rispondi
  10. Daniele

    body {
    height:100%;
    overflow:hidden;
    }
    #wrapper{
    position:relative;
    }
    .two {
    position:absolute;
    top:100%;
    background:#EEF;
    }

    .one {
    background:#EFE;
    }

    Rispondi
    1. Merlinox Autore articolo

      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!!!

      Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *