Codigo repetitivo, se puede hacer algo

fedefrankk · #1 (**permalink**) 10/02/2011, 22:11

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@charset "utf-8";
/* CSS Document */
body { text-align:center;
background:#000;
 
}
 
 
.cabecera{
    width:900px;/*ANCHO*/
    height:170px;/*ALTO*/
    border:solid;
    position: absolute;
        /*nos posicionamos en el centro del navegador*/
        /*top:50%;*/
        left:50%;
        
        /*indicamos que el margen izquierdo, es la mitad de la anchura*/
        margin-left:-450px;
                
        padding:5px;
}
.imag_01{ /*IMAGEN NUMERO 1*/
 
    position:absolute;
    width:309px;
    height:36px;
    background-image:url(Imag_cabe_byton/byton_r1_c1.jpg);}
    
 
 
    
.imag_02{ /* BOTON INICIO*/
    position:absolute;
    width:67px;
    height:36px;
    background-image:url(Imag_cabe_byton/byton_r1_c2.jpg);
    left:309px;
        
}    
 
    .imag_03{ /* BOTON RESELLER*/
    position:absolute;
    width:68px;
    height:36px;
    background-image:url(Imag_cabe_byton/byton_r1_c3.jpg);
    left:377px;}
        
 
    .imag_04{/* BOTON PRODUCTOS */
    position:absolute;
    width:87px;
    height:36px;
    background-image:url(Imag_cabe_byton/byton_r1_c4.jpg);
    left:446px;}
    
.imag_05{/* BOTON SERVICIOS */
    position:absolute;
    width:87px;
    height:36px;
    background-image:url(Imag_cabe_byton/byton_r1_c5.jpg);
    background-repeat:no-repeat;
    cursor:pointer;
    left:533px;}
    
    .imag_05:hover{/* BOTON SERVICIOS */
    position:absolute;
    width:87px;
    height:36px;
    /*background-image:url(Imag_cabe_byton/byton_r1_c5.jpg);*/
    background-image:url(Imag_cabe_byton/byton_r1_c7.jpg);
    background-repeat:no-repeat;
    cursor:pointer;
    left:533px;
    /*height: 100px; width: 200px; border: solid #f00;}*/
}
.imag_05 a {display: block; width: 87px; height: 36px;}

sanxuan · #2 (**permalink**) 10/02/2011, 22:35

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);
}

fedefrankk · #3 (**permalink**) 11/02/2011, 00:18

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

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
<body>
<div class="cabecera" id="n1"> <!--DIV CONTENEDOR DE LA CABECERA. 
  <div class="imag_01" id="n2"></div>
  <div class="imag_02" id="n3"></div>
  <div class="imag_03" id="n4"></div>  
  <div class="imag_04" id="n5"></div>
   <div class="imag_05" id="n6"><a href="../../WEB BYTON/02_productos.html"</a></div>
   </div> <!--FIN CONTENEDOR DE CABECERA 
</body>
</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

jomaruro · #4 (**permalink**) 11/02/2011, 03:11

Hola:

Y que tal probar con:

Código CSS:

Ver originalposition:relative;
margin: 0 auto;

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

Saludos.

fedefrankk · #5 (**permalink**) 11/02/2011, 11:53

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

Muchas Gracias
Saludos
fede