Foros del Web » Creando para Internet » CSS »

clases y subclases

Estas en el tema de clases y subclases en el foro de CSS en Foros del Web. estimados: en una oportunidad, no recuerdo donde, vi un mini tutorial en donde se hacía uso de clases y sub clases... por ejemplo había un ...
  #1 (permalink)  
Antiguo 16/04/2007, 13:50
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
clases y subclases

estimados:
en una oportunidad, no recuerdo donde, vi un mini tutorial en donde se hacía uso de clases y sub clases...

por ejemplo había un div que llevaba un CLASS y dentro de él, distintos divs con su correspondiente CLASS

hoy me veo en un aprieto y creo que esa es la solución...
el problema creoq ue está en mi forma de referenciar las subclases..

pasa que, por ejemplo .bloque_de .titulo se me pisa con .masnoticias .titulomn (por eso tuve que poner titulomn)

me podrían guiar o recomendar un tutorial al respecto? muchas gracias

les muestro el código:

HTML:
Código:
<div id="columna3">
	<div class="bloque_de">
		<div class="titulo">Noticias destacadas</div>
		<div class="contenido">
			<div class="noticiasdestacadas">
				<div class="iconond"></div>
				<div class="titulond"><a href="/noticias/multimedia/creative-apesta.html">Creative apesta</a></div>
				<div class="fechand">13-04-2007</div>

				<div class="copetend">No tiene drivers como la gente y menos para XP x64... <br />resumiento: una poronga zarandeada en el culo!</div>
			</div>
			<div class="noticiasdestacadas">
				<div class="iconond"></div>
				<div class="titulond"><a href="/noticias/memorias/nuevas-corsair.html1">Nuevas Corsair1</a></div>
				<div class="fechand">15-03-2007</div>
				<div class="copetend">En momentos salen a la venta y... agarrate la concha!1</div>

			</div>
		</div>
	</div>				<div class="bloque_de">
		<div class="titulo">M&aacute;s noticias</div>
		<div class="contenido">
			<div class="masnoticias">
				<div class="iconomn"></div>

				<div class="titulomn"><a href="/noticias/perifericos/xbits-suckea-mal.html">Xbits suckea mal</a></div>
			</div>
			<div class="masnoticias">
				<div class="iconomn"></div>
				<div class="titulomn"><a href="/noticias/procesadores/qweqweqwe.html">qweqweqwe</a></div>
			</div>
		</div>
	</div>
CSS:
Código:
#columna3
{
	width: 237px;
	float: right;
	margin: 0 10px 10px;
}
.bloque_de
{
	width: 237px;
}
.bloque_de .titulo
{
	height: 24px;
	background: url(imagenes/cosito_de.jpg) no-repeat;
	font-size: 12px;
	font-weight: bold;
	color: White;
	padding: 13px 0 0 20px;
}
.bloque_de .contenido
{
	background: #EEEEEE;
	margin: 0 7px 0 7px;
}
.bloque_de .contenido p
{
	margin: 0;
	padding: 5px;
}
.masnoticias
{
	margin: 0 0 10px;
}
.masnoticias .iconomn
{
	float: left;
}
.masnoticias .titulomn
{
	margin: 0 0 0 20px;
	font-weight: bold;
}
.masnoticias .titulomn a
{
	text-decoration: none;
	color: #000000;
}
.noticiasdestacadas
{
	margin: 0 0 10px;
}
.noticiasdestacadas .iconond
{
	float: left;
}
.noticiasdestacadas .titulond
{
	margin: 0 0 0 20px;
	font-weight: bold;
}
.noticiasdestacadas .titulond a
{
	text-decoration: none;
	color: #000000;
}
.noticiasdestacadas .fechand
{
	margin: 3px 0 0 0;
	color: #FF4000;
	float: left;
	width: 75px;
}
.noticiasdestacadas .copetend
{
	margin: 3px 0 0 0;
}
  #2 (permalink)  
Antiguo 16/04/2007, 19:30
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 8 meses
Puntos: 63
Re: clases y subclases

Hola

Tu código es bastante organizado, por lo que este consejo no te costará mucho aplicarlo.

Usas demasiadas clases. elimina todas las que puedas.

Siempre que puedas, define propiedades para la etiqueta. Si con eso no logras lo que quieres, define propiedades para el objeto mediante su id.

Las clases son para aplicar estilos a varios objetos diferentes.

Si tratas de hacer eso, limpiarás el código y será más fácil programarlo y revisarlo.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 16/04/2007, 21:12
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
Re: clases y subclases

hola, gracias por el aporte.. pero podrías darme un ejemplo de cómo lo harías vos??

gracias >)
  #4 (permalink)  
Antiguo 17/04/2007, 00:43
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 8 meses
Puntos: 63
Re: clases y subclases

Hola

Pues por ejemplo:
Código:
<h1>Noticias destacadas</h1>
en vez de
Código:
<div class="titulo">Noticias destacadas</div>
Eliminaría iconond ya que solo es un espacio y le aplicaría margin o padding al título que está al lado.

redefiniría cosas como esta:
Código:
margin: 0 7px 0 7px;
así
Código:
margin: 0 7px;
Los elementos dentro de noticiasdescatacas, en vez de un div por línea, los maquetaría como una lista.

Dado que tienes varias noticias, puedes tener un lista dentro de otra o mantener diferentes divs y dentro una lista por noticia. Si usas la primera opción, asignas las propiedades mediante los elementos, si lo haces con la segunda forma, el uso de clases para los bloques noticiasdestacadas y su contenido está bien. Aunque bastaría con que asignes un clase al bloque, a los elementos internos te puedes referir usando la jerarquí, es decir, por ejemplo así:
Código:
.noticiasdestacadas ul li a {text-decoration: none; font-weight: 700;}
Etc, etc

;)

Por cierto que tienes algunos errores, por ejemplo en masnoticias solo asignas 3 medidas y no 4 o 2 que es la forma correcta.

Cada vez que un vínculo, defines las mismas propiedades, es mejor que en vez de una clase, definas las propiedades para el elemento a. Ya puestos, debería shacerlo para a:link, a:visited, a:hover, a:active.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #5 (permalink)  
Antiguo 18/04/2007, 15:38
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
Re: clases y subclases

recién hoy pude leer esto...

entonces me estás diciendo que mi concepto de clases y subclases es erroneo?
voy a ver si puedo verlo en detalle más adelante.

si llegás a ver algo más que pueda leer al respeto o querés explayarte.... te lo voy a agradecer
  #6 (permalink)  
Antiguo 18/04/2007, 20:08
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 8 meses
Puntos: 63
Re: clases y subclases

Hola

Bueno, no quiero decir que lo estés haciendo mal, pero si que puedes mejorarlo.

;)

Sobre material para leer, bueno, en las faq del foro ya mencionan algunas cosas, aunque la mejore recomendación que te puedo dar, es que revises con calma la documentación de las css en el w3c. Muchas veces ellos no ponen buena documentación, pero en el caso de las css 1, 2 y 2.1 está bastante bien explicada y los pocos ejemplos que ponen son buenos.

Otro sitio útil es w3schools.

Y la mejor forma de asentar el conocimiento de allí, es que teniendo un diseño ya listo, como el que tienes por ejemplo, lo depures poco a poco según lees cosas.

Obviamente si tuvieras cualquier otra pregunta, pásate por aquí y haremos lo posible para responderla lo mejor posible.

Felicidad
__________________
¡ hey, hou, hou, hey !
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 22:34.