Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2003
    Messaggi
    208

    Problema menu orizzontale con immagini

    Ciao a tutti sto cercando di fare un menu orizzontale con pulsanti che aumentano in altezza quando sono attivi, il problema è che anche tutti gli altri pulsanti si spostano.
    Potete vedere l'esempio che ho realizzato qui
    www.alessianoe.it
    L'effetto dovrebbe essere questo:
    Effetto movimento
    la struttura del mio menu è questa:
    Codice PHP:
    <div id="menu">
                    <
    ul>[*]
                        [
    url="Default.aspx"][/url]
                        [*]
                         [
    url="Biografia.aspx"][/url]
                        [*]
                         [
    url="Gallery.aspx"][/url]
                        [*]
                         [
    url="Contatti.aspx"][/url]
                        [*]
                         [
    url="Link.aspx"][/url]
                        [/list]
                </
    div
    Mentre del codice css è questo:
    Codice PHP:
    #menu
    {
        
    positionabsolute;
        
    bottom0px;
        
    right190px;
    }
    #menu li
    {
        list-
    style-typenone;
        
    floatleft;
        
    margin-right:20px;
    }
    a{displayblock;}
    a.home
    {
        
    background-imageurl(../img/menu/home.png);
        
    height34px;
        
    width150px;    
    }
    a.home:hover
    {
        
    background-imageurl(../img/menu/home_h.png);
        
    height46px;
        
    width150px;
        
    cursorpointer;

    Qualche consiglio su cosa sbagli?

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non c'e` nulla di sbagliato. Semplicemente se aumenti le dimensioni di un elemento il browser si adatta e risistema gli altri oggetti.

    Quello che puoifare e` lasciare il posto per l'aumento di dimensioni, ad esempio:
    codice:
    a.home {
        background-image: url(../img/menu/home.png);
        height: 34px;
        margin 6px 0;
        width: 150px;    
    }
    a.home:hover
    {
        background-image: url(../img/menu/home_h.png);
        height: 46px;
        margin: 0;
        width: 150px;
        cursor: pointer;
    }
    ma la cosa piu` robusta (nei confronti dei problemi cross-browser) e` lasciare uguale la dimensione e giocare con gli sfondi (ad esempio l'immagine di bg dello stato :link potrebbe avere due fasce trasparenti in alto e in basso).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2003
    Messaggi
    208
    Grazie mille, ho risolto impostanto sul div #menu, l'altezza massima che il pulsante poteva avere ovvero 46px.
    Grazie ancora.

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 © 2026 vBulletin Solutions, Inc. All rights reserved.