• M
    User Newbie •

    Centrare un blocco di pulsanti con un div

    Ciao a tutti,
    ho bisogno di aiuto. Ho creato dei pulsanti e li ho ben posizionati sulla mia pagina, li ho posizionati ad una posizione specifica pensando che andasse bene su ogni risoluzione ma poi cambiando risoluzione ovviamente cambiava la posizione di tutti i pulsanti.

    Da tenere prensente che i pulsanti sono distanziati tra loro; ho eliminato la posizione iniziale, per cui ora partono da 0 e sono tutti a sinistra e ho creato un div generico che racchiudesse il blocco pulsanti.

    Vorrei riuscire a centrare questo blocco nella pagina e vorrei che cambiando risoluzione fossero sempre centrati, quali sono le proprietà da dare al div pulsanti?

    vi riporto il css:

    #pulsanti { ecco questo dovrebbe essere il blocco che mi regola tutti i pulsanti
    z-index: 10;
    display: block;
    left: 50%;
    right: 50%;
    position: fixed;
    }

    #uno {
    position: fixed;
    top: -90px;
    left: 0px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    position: fixed;
    left: 0px;
    top: -60px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    #due {
    position: fixed;
    left: 60px;
    top: -95px;
    -o-transition: all .5s ease-in-out;
    display: block;
    z-index: 10;
    }

    position: fixed;
    left: 60px;
    top:-60px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    #tre {
    position: fixed;
    left: 110px;
    top: -95px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    position: fixed;
    left: 110px;
    top:-60px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    #quattro {
    position: fixed;
    left: 163px;
    top: -95px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    position: fixed;
    left: 163px;
    top:-60px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;

    }

    #cinque {
    position: fixed;
    left: 210px;
    top: -95px;
    z-index: 10;
    -o-transition: all .5s ease-in-out;
    }

    position: fixed;
    left: 210px;
    top: -60px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    #sei{
    position: fixed;
    left: 250px;
    top: -95px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    position: fixed;
    left: 250px;
    top:-60px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    #sette {
    position: fixed;
    left: 303px;
    top: -90px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    position: fixed;
    left: 303px;
    top:-60px;
    -o-transition: all .5s ease-in-out;
    z-index: 10;
    }

    Grazie infinite

    0
  • A
    User Attivo •

    Senza andare nel dettaglio del tuo codice, e` sostanzialmente errato l'uso che fai delle posizioni.

    Comunque, tenta cosi`:
    ai tuoi pulsanti cambia la posizione da fixed a absolute, cambia la posizione del contenitore come relative. Che accade?

    0
  • M
    User Newbie •

    Ciao Andrea,
    sostanzialmente non cambia nulla purtroppo. Ti spiego ho preferito l'attributo fixed perché il mio intento era quello di scrollare verticalmente la pagina e avere sempre in alto i pulsanti. Posso dunque capire che avendoli messi in una determinata posizione possano andar bene per una risoluzione ma poi per le altre cambino facendo sembrare che si spostino verso dx.
    Con questi css che ho riportato sopra rimangono fermi tutti a destra, altrimenti se metto dei valori me li centra nella mia risoluzione.
    Scusami non so se sono stata molto chiara :bho:

    Grazie di cuore per avermi aiutato comunque, buona giornata!

    0
  • A
    User Attivo •

    No... non si capisce per niente!

    Comunque, per fare in modo che un menu` rimanga in alto con tutti i pulsanti basta che il contenutore sia centrato con larghezza fizza e margine auto e posizione fixed.
    Poi dentro puoi metterci tutti i bottoni con floattanti!

    0
Effettua l'accesso per rispondere