Salve a tutti avrei un problema con la realizzazione di un semplice menu orizzontale con questa tecnica. Ho seguito una vostra guida link.
Vi posto il codice che sono riuscito a ricavare:
La "base" marrone del menù mi esce, la posizione in cui dovrebbero esserci le parole come Home, About Us anche...il problema è che non escono le parole! Credo che il problema sia quel "sprinter.png", mi spiego meglio. Sicuramente non ho ben capito che immagine utilizzare sotto il nome "sprinter.png"..in quanto nella cartella del sito salvo sotto quel nome un immagine a occhio e mi esce sulle 4 posizioni dove invece dovrebbero esserci le parole..cosa salvo sotto il nome "spriter.png"? Ultima cosa: come faccio a levare quella stella sulla destra dove dentro c'è scritto "beta"? Spero di essermi spiegato.. Grazie in anticipo a tutticodice:<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: Verdana; font-size: 14px; background: black; } #top-header { width: 100%; height: 40px; background-color: #6D2516; border-bottom: 2px solid #A1402C; } #badge { width: 100px; height: 100px; float: right; margin-right: 25%; margin-top: -25px; background: url("sprites.png") no-repeat 0 -200px; } #menu { margin: 0 auto; width: 800px; list-style: none; } #menu li { float: left; line-height: 40px; } #menu li a { background: url('sprites.png') no-repeat 0 0; height: 40px; display: block; overflow: hidden; line-height: 9999em; margin-right: 30px; outline: none; } #menu li a.Oniro { width: 50px; background-position: 0 0; } #menu li a.Oniro:hover { background-position: -61px 0; } #menu li a.Oniro.active { background-position: -122px 0; } #menu li a.Raccontacelo { width: 55px; background-position: 0 -40px; } #menu li a.Raccontacelo:hover { background-position: -67px -40px; } #menu li a.Raccontacelo.active { background-position: -132px -40px; } #menu li a.Statistiche { width: 78px; background-position: 0 -80px; } #menu li a.Statistiche:hover { background-position: -88px -80px; } #menu li a.Statistiche.active { background-position: -177px -80px; } #menu li a.Moderazione { width: 85px; background-position: 0 -120px; } #menu li a.Moderazione:hover { background-position: -95px -120px; } #menu li a.Moderazione.active { background-position: -190px -120px; } </style> </head> <body> <div id="top-header"> <ul id="menu">[*]Oniro[*]Raccontacelo[*]Statistiche[*]Moderazione[/list]<div id="badge"></div> </div </body> </html>
Rispondi quotando
...nella guida c'è descritto tutto.