Tema: Codigo repetitivo, se puede hacer algo
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/02/2011, 22:11
Avatar de fedefrankk
fedefrankk
 
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 17 años, 6 meses
Puntos: 7
Pregunta Codigo repetitivo, se puede hacer algo
Hola a todos, estoy aprendiendo a modelar o maquetar con CSS y estoy haciendo una portada, por cada boton tengo que hacer como 7 lineas, para iinsertarlo, y despues otras tantas para hacer que pase el maus sobre el boton y cambie de estado, queria saber si se puede simplificar lo que estoy haciendo.. dejo codigo.

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body { text-align:center;
  4. background:#000;
  5.  
  6. }
  7.  
  8.  
  9. .cabecera{
  10.     width:900px;/*ANCHO*/
  11.     height:170px;/*ALTO*/
  12.     border:solid;
  13.     position: absolute;
  14.         /*nos posicionamos en el centro del navegador*/
  15.         /*top:50%;*/
  16.         left:50%;
  17.         
  18.         /*indicamos que el margen izquierdo, es la mitad de la anchura*/
  19.         margin-left:-450px;
  20.                 
  21.         padding:5px;
  22. }
  23. .imag_01{ /*IMAGEN NUMERO 1*/
  24.  
  25.     position:absolute;
  26.     width:309px;
  27.     height:36px;
  28.     background-image:url(Imag_cabe_byton/byton_r1_c1.jpg);}
  29.     
  30.  
  31.  
  32.     
  33. .imag_02{ /* BOTON INICIO*/
  34.     position:absolute;
  35.     width:67px;
  36.     height:36px;
  37.     background-image:url(Imag_cabe_byton/byton_r1_c2.jpg);
  38.     left:309px;
  39.         
  40. }    
  41.  
  42.     .imag_03{ /* BOTON RESELLER*/
  43.     position:absolute;
  44.     width:68px;
  45.     height:36px;
  46.     background-image:url(Imag_cabe_byton/byton_r1_c3.jpg);
  47.     left:377px;}
  48.         
  49.  
  50.     .imag_04{/* BOTON PRODUCTOS */
  51.     position:absolute;
  52.     width:87px;
  53.     height:36px;
  54.     background-image:url(Imag_cabe_byton/byton_r1_c4.jpg);
  55.     left:446px;}
  56.     
  57. .imag_05{/* BOTON SERVICIOS */
  58.     position:absolute;
  59.     width:87px;
  60.     height:36px;
  61.     background-image:url(Imag_cabe_byton/byton_r1_c5.jpg);
  62.     background-repeat:no-repeat;
  63.     cursor:pointer;
  64.     left:533px;}
  65.     
  66.     .imag_05:hover{/* BOTON SERVICIOS */
  67.     position:absolute;
  68.     width:87px;
  69.     height:36px;
  70.     /*background-image:url(Imag_cabe_byton/byton_r1_c5.jpg);*/
  71.     background-image:url(Imag_cabe_byton/byton_r1_c7.jpg);
  72.     background-repeat:no-repeat;
  73.     cursor:pointer;
  74.     left:533px;
  75.     /*height: 100px; width: 200px; border: solid #f00;}*/
  76. }
  77. .imag_05 a {display: block; width: 87px; height: 36px;}