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 )
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 */ 
}
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.