Puedo modificar un id y convertirlo en class?

00israel · #1 (**permalink**) 04/02/2012, 03:57

Vamos a ver me he dado cuenta tarde, pero en medio de un proyecto he visto que me va a funcionar mejor una id que ademas ya he personalizado dentro de un contenedor concreto (este es el mayor problema), como un class mejor que como id.

Es decir que esa id que cree deberia haberla creado como class no como id. Puedo reconvertirla?

00israel · #2 (**permalink**) 04/02/2012, 04:32

mejor explicado:

quisiera que esto que ahora me funciona como id, me funcione como un class.

Código:

#contenedor-contacto #botones {
	width: 201px;
	position: absolute;
	left: 390px;
	top: 567px;
}
#contenedor-contacto #botones #boton-diseno {
	height: 25px;
	width: 201px;
	margin-bottom: 3px;
}
#contenedor-contacto #botones #boton-diseno #boton-diseno-img{
	float: left;
	height: 18px;
	width: 18px;
}
#contenedor-contacto #botones #boton-diseno #boton-diseno-texto {
	background-image: url(../links/botones/boton-grafico.gif);
	background-repeat: no-repeat;
	float: left;
	height: 22px;
	width: 127px;
	margin-left: 7px;
}
#contenedor-contacto #botones #boton-web {
	height: 25px;
	width: 201px;
	margin-bottom: 3px;
}
#contenedor-contacto #botones #boton-web #icono-web {
	height: 18px;
	width: 18px;
	float: left;
}
#contenedor-contacto #botones #boton-web #texto-web {
	background-image: url(../links/botones/boton-web.gif);
	background-repeat: no-repeat;
	float: left;
	height: 22px;
	width: 103px;
	margin-left: 7px;
}
#contenedor-contacto #botones #boton-fotografia {
	height: 25px;
	width: 201px;
	margin-bottom: 3px;
}
#contenedor-contacto #botones #boton-fotografia #icono-foto {
	float: left;
	height: 18px;
	width: 18px;
}
#contenedor-contacto #botones #boton-fotografia #texto-foto {
	background-image: url(../links/botones/boton-foto.gif);
	background-repeat: no-repeat;
	float: left;
	height: 22px;
	width: 87px;
	margin-left: 7px;
}
#contenedor-contacto #botones #boton-contacto {
	height: 25px;
	width: 201px;
}
#contenedor-contacto #botones #boton-contacto #icono-contacto {
	float: left;
	height: 18px;
	width: 18px;
}
#contenedor-contacto #botones #boton-contacto #texto-contacto {
	background-image: url(../links/botones/boton-contacto.gif);
	background-repeat: no-repeat;
	float: left;
	height: 21px;
	width: 79px;
	margin-left: 7px;
}

El tema es que no me he dado cuenta que esta parte la voy a repetir varias veces a lo largo de la pagina, entonces no quiero estar creandome id´s distintas, porque sino tendre un codigo eterno. Quisiera que esto me funcione como un class.

Y entiendo que el primer problema es que esta todo muy anidado.

Me siento un poco bloqueado... me dais un poco de luz?

emprear · #3 (**permalink**) 04/02/2012, 04:39

Reemplazá todos tus #algo x .algo y en tu html todos tus id="algo " x class="algo"
Y deberías revisar no tener ningun javascript que este usando los id para identificar los elemento
Saludos

00israel · #4 (**permalink**) 04/02/2012, 04:58

pero por ejemplo aqui:

Código:

#contenedor-contacto #botones #boton-web

podría ponerlo así?:

Código:

.contenedor-contacto .botones .boton-web

00israel · #5 (**permalink**) 04/02/2012, 05:09

vale vale, asi no me funciona, en cambio asi sí...

cambiando esto:

Código:

#contenedor-contacto #botones #boton-web

por esto:

Código:

.boton-web

00israel · #6 (**permalink**) 04/02/2012, 05:09

seria correcto así?

gracias por tu ayuda, perdona mi olvido.

emprear · #7 (**permalink**) 04/02/2012, 05:12

Si, es válido, al igual que si hubieses puesto
#boton-web
sin reemplazar el id x class

en realidad el comportamiento del uso de selectores es el mismo, la diferencia es que los id NO se pueden repetir
no podrias tener dos
<div id="boton-web"></div>
Habría que ver todo el documento, incluso quizás hasta te convenga combinar id y class

Saludos

00israel · #8 (**permalink**) 04/02/2012, 05:21

gracias nuevamente. Seguiré tu consejo.

00israel · #9 (**permalink**) 04/02/2012, 05:45

Cita:

Iniciado por emprear

Si, es válido, al igual que si hubieses puesto
#boton-web
sin reemplazar el id x class

Persona que vuelva otra vez, pero daba vueltas esto. Osea yo no tengo porque estar poniendo el codigo de la hoja de estilo: "#contenedor-contacto #botones #boton-web"

bastaria con que pusiera?: "#boton-web"

Entonces si lo puedo poner asi y evitarme esos textos tan largos, porque llevo tiempo haciendolo asi, me lo enseñaron asi. Que tonteria no?

pero vamos si se puede asi, me das toda la alegria del dia.

cristian_cena · #10 (**permalink**) 04/02/2012, 07:23

00israel.

Mira, hay veces que seguirás sacando provecho de usar selectores descendentes, por ejemplo:

Código CSS:

Ver originalCopiarul#menu li a{ /* ...estilos... */ }

Te sugiero que leas sobre selectores css, pues las posibilidades de uso de tal o cual selector se adaptará mejor o peor según el contexto donde lo apliques. Mientras mas selectores domines más cómodo te sentirás con tu código.

Saludos.

00israel · #11 (**permalink**) 04/02/2012, 10:10

gracias cristian_cena