Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Effetto "fixed" per menu su tema responsive

    Ciao a tutti. Sul mio sito son riuscito a fare in modo che la barra del menù di navigazione (quella nera sotto l'immagine di testa contenente le voci "Info - Preferiti - Contatti") a un certo punto dello scrolling acquistasse la proprietà "position:fixed;" e apparisse in testa al sito sempre visibile. E' bastato un piccolo script, nulla di complicato. E fin qui tutto bene.


    Essendo il mio sito responsive, salvo rare eccezioni ha le misure espresse in percentuale. Perciò, una volta che il menù scappa dalla sua posizione originaria e si va a piazzare fisso in alto, mi vedo costretto a ridefinirne la larghezza in questo modo:


    codice:
    .topfixed{position:fixed;top:0;width:90%;max-width:1160px;z-index:1;}

    dove 90% è la larghezza del container giallo (il restante 10% è costituito dai bordi rossi) e 1160px è la larghezza massima in pixels che raggiunge il sito. Se non specifico il max-width, a risoluzioni schermo più elevate la banda nera sborda dal contenuto giallo. Così invece torna tutto a posto a tutte le risoluzioni. Più o meno.


    Dico più o meno perché la cosa funziona perfettamente su IE, su Firefox e su Chrome. Opera invece mostra un divario di un pixels e non riesco a capire perché:


    Esempio (cliccate poi sulla foto per visualizzarla alle giuste dimensioni)


    Nulla di devastante, come potete vedere, ma se esistesse un modo più efficace di far combaciare la banda nera con il content a tutte le risoluzioni sarebbe perfetto. vi viene in mente qualcosa?


    Grazie in anticipo.

  2. #2
    Per il momento, dopo una breve ricerca, sono riuscito a mettere una pezza aggiungendo al CSS questo codice:

    codice:
    doesnotexist:-o-prefocus, .topfixed{border-right:1px solid #000;}

    che sostanzialmente dice al browser Opera (e soltanto a lui) di aggiungere un bordo nero di un pixel alla destra del menù, così da allungarlo quel tanto che basta per coprire il pixel mancante.

    Non sarà la soluzione più elegante, ma per ora meglio di niente. Ovviamente qualsiasi soluzione più efficace e magari valida a prescindere dal browser sarà più che ben accetta.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.