clases y subclases

[nachopro]

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

[PatomaS]

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

[nachopro]

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

gracias >)

[PatomaS]

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

[nachopro]

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

[PatomaS]

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