Foros del Web » Creando para Internet » CSS »

Codigo repetitivo, se puede hacer algo

Estas en el tema de Codigo repetitivo, se puede hacer algo en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 10/02/2011, 22:11
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 783
Antigüedad: 10 años, 4 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;}
  #2 (permalink)  
Antiguo 10/02/2011, 22:35
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Codigo repetitivo, se puede hacer algo

No veo el HTML por ningún lado, así que me toca adivinar.
Supongo que cabecera es un div que incluye al resto de los div de clase imag_loquesea.
En principio aconsejarte que uses margin:0 para centrar la cabecera. Salvo que tengas razones para necesitar la posición absoluta, bastaría con la relativa.

Las únicas propiedades que se repiten son las que yo incluiría en otra clase
.imag_comun {
position:absolute;
height:36px;
}

Estas dos propiedades son las que podrás borrar de todas clases que las usen.
En el HTML incluirias esta clase junto a la que ya tienen las etiquetas (class="imag_comun imag_03" por ejemplo).

Además en .imag_05:hover no necesitas incluir de nuevo todas las propiedades de .imag_05. Basta con incluir las que vayan a cambiar.
.imag_05:hover{
background-image:url(Imag_cabe_byton/byton_r1_c7.jpg);
}
  #3 (permalink)  
Antiguo 11/02/2011, 00:18
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 783
Antigüedad: 10 años, 4 meses
Puntos: 7
Pregunta Respuesta: Codigo repetitivo, se puede hacer algo

Hola, Muchas gracias por tu tiempo y repuesta, se me paso lo del html, acá lo dejo

Código HTML:
Ver original
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <title>Untitled Document</title>
  3. <link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
  4. <div class="cabecera" id="n1"> <!--DIV CONTENEDOR DE LA CABECERA.
  5.  <div class="imag_01" id="n2"></div>
  6.  <div class="imag_02" id="n3"></div>
  7.  <div class="imag_03" id="n4"></div>  
  8.  <div class="imag_04" id="n5"></div>
  9.   <div class="imag_05" id="n6"><a href="../../WEB BYTON/02_productos.html"</a></div>
  10.   </div> <!--FIN CONTENEDOR DE CABECERA
  11. </body>
  12. </html>

Esto que me decis que use margin:0, y no la absoluta, el tema que dentro del div contenedor tiene que estar centrao en cualquier monitor, y dentro de ese div va la cabecera, botones, animaciones etc. .

Por ende estoy por buenos caminos?...

saludos a todos
fede
  #4 (permalink)  
Antiguo 11/02/2011, 03:11
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Codigo repetitivo, se puede hacer algo

Hola:

Y que tal probar con:

Código CSS:
Ver original
  1. position:relative;
  2. margin: 0 auto;

Te recomiendo que le eches un vistazo a la guía de migración que Mikmoro aportó a este foro.

Saludos.

  #5 (permalink)  
Antiguo 11/02/2011, 11:53
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 783
Antigüedad: 10 años, 4 meses
Puntos: 7
Pregunta Respuesta: Codigo repetitivo, se puede hacer algo

Hola, gracias por responder, ahora miro la guia que me decis.

Muchas Gracias
Saludos
fede

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:14.