Visualizzazione risultati 1 fino 3 di 3

Discussione: [CSS] Divisione immagine per un menu

  1. #1
    Guest

    Predefinito [CSS] Divisione immagine per un menu

    Devo fare il menu per un sito ed esso è composto da un'immagine di una pergamena (per ora ci ho messo la prima carina che ho trovato in rete) al cui interno sono inserite le voci del menù.
    Se provate ad andare qui: http://drako1989.altervista.org/xhtml/index.html potete notare come ho fatto: ho diviso l'immagine in 3 parti (superiore, centrale, inferiore) (ovviamente la divisione è stata fatta volontariamente a membro di segugio, così da poter capire dove l'immagine veniva appunto divisa) e, si nota anche guardando il codice html, ho messo l'immagine superiore e inferiore esterne alla lista del menu e il body l'ho messo come sfondo dell'intero div menù.
    Gli svantaggi sono notevoli, cioè si nota il body (la parte centrale della pergamena) anche sotto la parte superiore e quella inferiore.
    Però ha un vantaggio molto grande, cioè mi permette di dare un margine sinistro alla lista, senza applicare lo stesso anche all'immagine.
    C'è un modo per risolvere gli svantaggi e continuare ad avere quel vantaggio??
    Un'ultima cosa: è possibile iniziare la lista nella parte superiore della pargamena?? devo per forza di cose utilizzare il position??
    Grazie mille,
    Luca

  2. #2
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,253

    Predefinito

    piazzare li degli <img> e sperare che vadano d'accordo con del css è un po' ingenuo
    Se metti tutto assieme nel css, riesci ad ottenere un comportamento uniforme, e sopratutto degradi non con immagini in mezzo ma decentemente.

    quindi, via gli <img> e metti tutto nel css. Purtroppo bisogna "dare un senso" ai tag che metti, quindi ho aggiunto un titolo "Menu", che ha come sfondo la cima della pergamena e il cui testo è nascosto via display: none.

    Puoi dare un'occhiata qua alla versione riveduta e corretta (sia html che css sono stati cambiati)

    Per quanto riguarda i pezzi che si sovrappongono, beh, togli la trasparenza alla gif e via

    uh, e viene fuori uguale su IE6 e FF

    questo post è scritto in disordine, riordina i paragrafi se necessario
    Ultima modifica di dreadnaut : 08-11-2006 alle ore 13.05.49

  3. #3
    Guest

    Predefinito

    Grazie mille dread, seguo il tuo consiglio ;)

    EDIT: Ehm.. dread, a dire il vero mi sembra un pochino complicato in quel modo (o meglio, ho tentato di farlo mischiando un po' il tuo metodo al mio)
    Come è venuto ora, è quasi perfettamente come lo voglio (se riuscissi a ridurre di pochissimo lo spazio tra gli span e le liste ul sarebbe proprio perfetto), ma c'è un problema: con firefox viene benissimo, con ie viene malissimo :\
    Come posso modificarlo per farlo vedere così anche su ie??

    Grazie mille ancora scusami il disturbo!!
    Ultima modifica di drako1989 : 12-11-2006 alle ore 02.55.22

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •