Recentemente ho scaricato dal sito lo script Una semplice interfaccia per creare wizard.
Questo è il CSS (non fate caso ai commenti, è una cosa per la scuola)
Vorrei adattare i pulsanti degli step, evidenziati nell'immagine allegata, alle possibili risoluzioni di un monitor. Per favore, rispondete velocemente, ho pochissimo tempo per consegnare il tutto e se non lo finisco prenderò un brutto voto e addio gita.codice:.wiz-container { /* Contenitore interfaccia */ width: 100%; /* Larghezza */ height: 100%; /* Altezza */ left: 5%; /* Sinistra */ right: 5%; /* Destra */ top: 50px; /* Sopra */ margin: 1px; /* Margine */ background: #F8F8F8; /* Colore di sfondo */ overflow: hidden; /* Superare i limiti di altezza */ border: #E0E0E0 solid 1px; /* Bordo */ padding: 0; /* Spaziatura (12px 0px 2px 5px;) */ color: #0464BB; /* Colore del testo */ text-align: left; /* Allineamento del testo */ -moz-border-radius: 8px; /* Curvatura degli angoli Firefox */ -webkit-border-radius: 8px; /* Curvatura degli angoli Chrome */ z-index: 100; /* Piano in cui è disposto */ } .wiz-container ul { /* Lista contenitori fasi */ list-style: none; /* Stile lista */ padding: 3px ; /* Spaziatura */ display: block; /* Tipo di stile elemento */ background: #F8F8F8; /* Colore di sfondo */ height: 72px; /* Altezza */ margin-left: 3px; /* Margine sinistro */ margin-right: 3px; /* Margine destro */ border-bottom: 1px solid #E0E0E0; /* Margine inferiore */ } .wiz-container ul li{ /* Titolo fasi */ float: left; /* Posizionamento */ border-bottom-width: 0 !important; /* Larghezza bordo inferiore */ margin: 0; /* Margine */ margin-right: 2px; /* Margine destro */ padding: 0; /* Spaziatura */ } .wiz-container ul li a { /* Link titolo fasi */ display: block; /* Stile display */ text-decoration: none; /* Decorazione del testo */ padding-left: 3px; /* Spaziatura sinistra */ height: 71px; /* Altezza */ width: 147px; /* Larghezza */ color: #0464BB; /* Colore del testo */ } .wiz-container ul li a:hover { /* Link già cliccati titolo fasi */ color: #0464BB; /* Colore del testo */ } .wiz-anc-default{ /* Fase di default */ background-color: #EBEBEB; /* Colore di sfondo */ border: #E0E0E0 solid 1px; /* Bordo */ -moz-border-radius-bottomright: 25px; /* Curvatura bordo inferiore destro Firefox */ -moz-border-radius-topright: 25px; /* Curvatura bordo superiore destro Firefox */ -moz-border-radius-bottomleft: 2px; /* Curvatura bordo inferiore sinistro Firefox */ -moz-border-radius-topleft: 2px; /* Curvatura bordo superiore sinistro Firefox */ -webkit-border-top-left-radius: 2px; /* Curvatura bordo superiore sinistro Chrome */ -webkit-border-bottom-left-radius: 2px; /* Curvatura bordo inferiore sinistro Chrome */ -webkit-border-top-right-radius: 20px; /* Curvatura bordo superiore destro Chrome */ -webkit-border-bottom-right-radius: 20px; /* Curvatura bordo inferiore destro Chrome */ } .wiz-anc-current{ /* Fase selezionata */ color: #FFF !important; /* Colore del testo */ background-color: #EA8511; /* Colore di sfondo */ border: #EA8511 solid 1px; /* Bordo */ -moz-border-radius-bottomright: 25px; /* Curvatura bordo inferiore destro Firefox */ -moz-border-radius-topright: 25px; /* Curvatura bordo superiore destro Firefox */ -moz-border-radius-bottomleft: 2px; /* Curvatura bordo inferiore sinistro Firefox */ -moz-border-radius-topleft: 2px; /* Curvatura bordo superiore sinistro Firefox */ -webkit-border-top-left-radius: 2px; /* Curvatura bordo superiore sinistro Chrome */ -webkit-border-bottom-left-radius: 2px; /* Curvatura bordo inferiore sinistro Chrome */ -webkit-border-top-right-radius: 20px; /* Curvatura bordo superiore destro Chrome */ -webkit-border-bottom-right-radius: 20px; /* Curvatura bordo inferiore destro Chrome */ } .wiz-anc-done{ /* Fase finale */ color: #FFF !important; /* Colore del testo */ background-color: #0464BB; /* Colore di sfondo */ border: #0464BB solid 1px; /* Bordo */ -moz-border-radius-bottomright: 25px; /* Curvatura bordo inferiore detro Firefox */ -moz-border-radius-topright: 25px; /* Curvatura bordo superiore detro Firefox */ -moz-border-radius-bottomleft: 2px; /* Curvatura bordo inferiore sinistro Firefox */ -moz-border-radius-topleft: 2px; /* Curvatura bordo superiore sinistro Firefox */ -webkit-border-top-left-radius: 2px; /* Curvatura bordo superiore sinistro Chrome */ -webkit-border-bottom-left-radius: 2px; /* Curvatura bordo inferiore sinistro Chrome */ -webkit-border-top-right-radius: 20px; /* Curvatura bordo superiore destro Chrome */ -webkit-border-bottom-right-radius: 20px; /* Curvatura bordo inferiore destro Chrome */ } .wiz-body{ /* Contenuto fase */ display: block; /* Stile display */ background: transparent; /* Colore di sfondo */ border-bottom: 0px solid #E0E0E0; /* Bordo inferiore */ width: auto; /* Larghezza */ } .wiz-body div.wiz-content { /* Contenitore principale contenuto */ display: block; /* Stile display */ top: 0px; /* Sopra */ left: 0px; /* Sinistra */ text-decoration: none; /* Decorazione */ padding: 3px; /* Spaziatura */ margin : 3px; /* Margine */ border-bottom: 0px solid #E0E0E0; /* Bordo inferiore */ height: 100%; /* Altezza */ width: 100%; /* Larghezza */ overflow: auto; /* Posizionamento assoluto */ } .wiz-nav { /* Navigazione */ display: block; /* Stile display */ left: 0px; /* Sinistra */ bottom: 0px; /* Sotto */ text-decoration: none; /* Decorazione testo */ padding: 2px 5px 2px 5px; /* Spaziatura */ background: #F8F8F8 ; /* Colore di sfondo */ height: 30px; /* Altezza */ width: 99%; /* Larghezza */ margin : 0px 0px 0px 0px; /* Margine */ border: 0px solid #E0E0E0; /* Bordo */ border-top: 1px solid #E0E0E0; /* Bordo superiore */ } .wiz-nav #next { /* Fase seguente */ float: right; /* Posizionamento */ } .wiz-nav #back{ /* Fase precedente */ float: left; /* Posizionamento */ } /* STILE PULSANTI INTERFACCIA */ .btn{ /* Pulsanti */ width: 100px; /* Larghezza */ -moz-border-radius: 8px; /* Curvatura bordo Firefox */ -webkit-border-radius: 8px; /* Curvatura bordo Chrome */ background: #5A5655; /* Colore di sfondo */ color: #FFFFFF; /* Colore del testo */ margin: 0px 10px 0px 10px; /* Margine */ padding: 5px 5px 5px 5px; /* Spaziatura */ text-align: center; /* Allineamento del testo */ border: 1px solid #5A5655; /* Bordo */ text-decoration: none; /* Decorazione del testo */ } .btn:hover{ /* Pulsanti cliccati */ background: #EA8511; /* Colore di sfondo */ color: #FFFFFF; /* Colore del testo */ border: 1px solid #EA8511; /* Bordo */ text-decoration: none; /* Decorazione del testo */ }

)
