El archivo Html es el siguiente:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />--> <title>Sin título 1</title> <link rel="stylesheet" type="text/css" href="rockalodon.css" /> </head> <body> <div id="buttons"> <div id="nada"> <a></a></div> <div id="inicio"> <a href="inicio"></a></div> <div id="noticias"> <a href="noticias"></a></div> <div id="conciertos"> <a href="conciertos"></a></div> <div id="discos"> <a href="discos"></a></div> <div id="bandas"> <a href="bandas"></a></div> <div id="ensayos"> <a href="ensayos"></a></div> <div id="foro"> <a href="foro"></a></div> </div> </body> </html>
el archivo css es el siguiente:
Código :
#buttons {width:750px; height:24px; overflow:hidden; margin-left:0px; }
#buttons a {height:24px; overflow:hidden; float:left; background-image: url('http://www.rockalodon.com/img/menu.gif'); background-repeat: no-repeat; z-index: 9999}
#buttons #nada a {width:204px; background-position: 0 0; }
#buttons #inicio a {width:64px; background-position: -204px 0; }
#buttons #noticias a {width:79px; background-position: -268px 0; }
#buttons #conciertos a {width:112px; background-position: -347px 0; }
#buttons #discos a {width:69px; background-position: -459px 0; }
#buttons #bandas a {width:73px; background-position: -528px 0; }
#buttons #ensayos a {width:82px; background-position: -601px 0; }
#buttons #foro a {width:67px; background-position: -683px 0; }
#buttons #inicio a:focus {background-position: -204px -24; }
#buttons #noticias a:focus {background-position: -268px -24; }
#buttons #conciertos a:focus {background-position: -347px -24; }
#buttons #discos a:focus {background-position: -459px -24; }
#buttons #bandas a:focus {background-position: -528px -24; }
#buttons #ensayos a:focus {background-position: -601px -24; }
#buttons #foro a:focus {background-position: -683px -24; }
#buttons #inicio a:hover {background-position: -204px -24; }
#buttons #noticias a:hover {background-position: -268px -24; }
#buttons #conciertos a:hover {background-position: -347px -24; }
#buttons #discos a:hover {background-position: -459px -24; }
#buttons #bandas a:hover {background-position: -528px -24; }
#buttons #ensayos a:hover {background-position: -601px -24; }
#buttons #foro a:hover {background-position: -683px -24; }
#buttons #inicio a:active {background-position: -204px -24; }
#buttons #noticias a:active {background-position: -268px -24; }
#buttons #conciertos a:active {background-position: -347px -24; }
#buttons #discos a:active {background-position: -459px -24; }
#buttons #bandas a:active {background-position: -528px -24; }
#buttons #ensayos a:active {background-position: -601px -24; }
#buttons #foro a:active {background-position: -683px -24; }
Ahora bien, el codigo lo que hace basicamente es un efecto en la botonera (o menu) del sitio, pueden verlo en el siguiente enlace:
http://www.rockalodon.com
Pero el problema es que cuando tiene el encabezado en el archivo html:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
simplemente no funciona el menú, pero lo necesito porque sin el hay otras funcionalidades de css que perdería, quiero el menu pero para eso debo quitar el encabezado, pero adicionalmente no quiero pereder otras funcionalidades, ademas he visto que si es posible mantener ese menu con el encabezado, y funciona, se los muestro a continuacion:
Archivo html:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sin título 1</title> <link rel="stylesheet" type="text/css" href="ejemplo.css" /> </head> <body> <div id="nav_all"> <div id="nav_news"> <a href="#"></a></div> <div id="nav_discography"> <a href="#"></a></div> <div id="nav_history"> <a href="#"></a></div> <div id="nav_tourdates"> <a href="#"></a></div> <div id="nav_pics"> <a href="#"></a></div> <div id="nav_shirts"> <a href="#"></a></div> <div id="nav_guestbook"> <a href="#"></a></div> <div id="nav_contact"> <a href="#"></a></div> </div> </body> </html>
Archivo css:
Código :
#nav_all {width:510px; height:28px; overflow:hidden; margin-left:235px; padding-top:1px;}
#nav_all a {height:28px; overflow:hidden; float:left; background-image: url(http://www.crematory.de/pics/nav/nav.jpg); background-repeat: no-repeat; z-index: 9999;}
#nav_all #nav_news a {width:44px; background-position: 0 0; }
#nav_all #nav_discography a {width:94px; background-position: -44px 0; }
#nav_all #nav_history a {width:62px; background-position: -138px 0; }
#nav_all #nav_tourdates a {width:44px; background-position: -200px 0; }
#nav_all #nav_pics a {width:36px; background-position: -244px 0; }
#nav_all #nav_shirts a {width:84px; background-position: -280px 0; }
#nav_all #nav_guestbook a {width:81px; background-position: -364px 0; }
#nav_all #nav_contact a {width:65px; background-position: -445px 0; }
#nav_all #nav_news a:focus {background-position: 0 -60px;}
#nav_all #nav_discography a:focus {background-position: -44px -60px;}
#nav_all #nav_history a:focus {background-position: -138px -60px;}
#nav_all #nav_tourdates a:focus {background-position: -200px -60px;}
#nav_all #nav_pics a:focus {background-position: -244px -60px;}
#nav_all #nav_shirts a:focus {background-position: -280px -60px;}
#nav_all #nav_guestbook a:focus {background-position: -364px -60px;}
#nav_all #nav_contact a:focus {background-position: -445px -60px;}
#nav_all #nav_news a:hover {background-position: 0 -60px;}
#nav_all #nav_discography a:hover {background-position: -44px -60px;}
#nav_all #nav_history a:hover {background-position: -138px -60px;}
#nav_all #nav_tourdates a:hover {background-position: -200px -60px;}
#nav_all #nav_pics a:hover {background-position: -244px -60px;}
#nav_all #nav_shirts a:hover {background-position: -280px -60px;}
#nav_all #nav_guestbook a:hover {background-position: -364px -60px;}
#nav_all #nav_contact a:hover {background-position: -445px -60px;}
#nav_all #nav_news a:active {background-position: 0 -60px;}
#nav_all #nav_discography a:active {background-position: -44px -60px;}
#nav_all #nav_history a:active {background-position: -138px -60px;}
#nav_all #nav_tourdates a:active {background-position: -200px -60px;}
#nav_all #nav_pics a:active {background-position: -244px -60px;}
#nav_all #nav_shirts a:active {background-position: -280px -60px;}
#nav_all #nav_guestbook a:active {background-position: -364px -60px;}
#nav_all #nav_contact a:active {background-position: -445px -60px;}
pueden verlo en el siguiente enlace:
http://www.crematory.de
La cuestion es... ¿Que estoy Haciendo Mal?
