Foros del Web » Creando para Internet » CSS »

Cambiando mi manera de maquetar

Estas en el tema de Cambiando mi manera de maquetar en el foro de CSS en Foros del Web. Hola a todos, cómo van?? Hace tiempo, desde que aprendí CSS(no es que sepa mucho, pero ya no me cuelgo jeje) mi estilo de maquetación ...
  #1 (permalink)  
Antiguo 18/07/2008, 10:35
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Cambiando mi manera de maquetar

Hola a todos, cómo van??

Hace tiempo, desde que aprendí CSS(no es que sepa mucho, pero ya no me cuelgo jeje) mi estilo de maquetación la venía trabajando: div's y clases.

Antes si me pidían una página con los siguientes requerimientos:

- Maquetada a 2 columnas
- La columna de la izquierda, los links van de color verde y deben llevar un estilo de viñeta en cada link (list-style-image)
- La columna de la derecha debe llevar los párrafos de color gris.

Lo hubiera hecho así:

Código HTML:
<div id="izquierdo">
<ul class="estiloimagen">
<li><a href="" class="linksverdes" title="">Link 1</a></li>
<li><a href="" class="linksverdes" title="">Link 2</a></li>
<li><a href="" class="linksverdes" title="">Link 3</a></li>
</ul>
</div>
<div id="derecho">
<h1>Titulo</h1>
<p class="textogris">Texto texto texto texto</p>
<p class="textogris">Texto texto texto texto</p>
<p class="textogris">Texto texto texto texto</p>
</div> 
Se fijan que mi maquetación anterior llevaría una clase para <ul> (estiloimagen), una clase para los links (linksverdes) y una clase para los párrafos <p> (textgris)??? De esa manera lo hubiera hecho anteriormente.

Ahora, no sé, por que me ha dado por maquetar de otra manera, de la manera como lo estoy haciendo, lo montaría así:

Código HTML:
<div id="izquierdo">
<ul>
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul>
</div>
<div id="derecho">
<h1>Titulo</h1>
<p>Texto texto texto texto</p>
<p>Texto texto texto texto</p>
<p>Texto texto texto texto</p>
</div> 
Los CSS de este nuevo quedaría así:
Código:
#izquierdo
{
float:left;
width:48%;
}

#izquierdo ul
{
list-style-image:(url:'direccion');
}

#izquierdo a, a:links, a:hover, a:.......
 {
color:#060;
 }

#derecho
{
float:right;
width:48%;
}

#derecho p
 {
 color:#ccc;
 }
Entienden la diferencia?? En la primera maquetación me basé en clases para llevar a cabo los efectos, en la segunda quité las clases e hice una especie de "herencia"...

Después de todo esto, viene mi pregunta: Cuál es mejor?? Desventajas y ventajas de cada una?? He mejorado sintácticamente con la segunda, me estoy devolviendo??

Espero me hayan entendido...

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #2 (permalink)  
Antiguo 18/07/2008, 11:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiando mi manera de maquetar

Para mi es mucho mejor la segunda manera (aunque ya sabes que tu y yo no solemos estar muy de acuerdo )

Para mi es mucho más limpia y aprovecha el propio etiquetado del html y el concepto de anidamiento.

Si vas a hacerlo así, ten en cuenta este pequeño error, que es muy habitual:
Cita:
#izquierdo a, a:links, a:hover, a:.......
{
color:#060;
}
que debería ser:

Cita:
#izquierdo a, #izquierdo a:links, #izquierdo a:hover, #izquierdo a:.......
{
color:#060;
}
Mikel.
  #3 (permalink)  
Antiguo 18/07/2008, 11:16
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Respuesta: Cambiando mi manera de maquetar

Ahora lo haces correctamente, ¿porque hacer clases innecesarias?

Cuando vayas a usar ese estilo en otras partes del documento entonces si, dales una clase y aplica el estilo correspondiente.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #4 (permalink)  
Antiguo 18/07/2008, 11:19
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Respuesta: Cambiando mi manera de maquetar

Veo veo... 2 puntos para la segunda jejeje

Gracias a los dos..

Mikmoro tú como siempre en contra mía!! Naaaa mentiras... Ok tomaré en cuenta tu recomendación man!! Me explicas cuá es el error? Es un error sintáctico?? semántico??

Saludos

Pdt: Veeeee mirá, no tengo nada sobre mi firma.... jeje Chauuu Mikel
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #5 (permalink)  
Antiguo 18/07/2008, 11:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiando mi manera de maquetar

Cita:
Iniciado por Carxl Ver Mensaje
Me explicas cuá es el error? Es un error sintáctico?? semántico??
Fíjate en la diferencia de los dos bloques que he puesto. En el primero:

#izquierdo a, a:links, a:hover, a:.......
{color:#060;}

el estilo afectará a los "a" dentro de #izquierdo, pero también a todos los a:link, todos los a:hover, etc.

Es decir, si vas a referenciar una etiqueta por su "padre" o ancestro, deberás hacerlo cada vez, no basta con ponerlo al principio para todo el selector, porque la coma divide por completo selectores diferentes.

Así, #caja h1, h2 { afectaría a los h1 de caja, y a todos los h2, mientras que #caja h1, #caja h2 { solo a los h1 y h2 de caja.

¿Se entiende?

Mikel.
  #6 (permalink)  
Antiguo 18/07/2008, 11:28
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Respuesta: Cambiando mi manera de maquetar

Ahhhhhhhhhhhhhhh si sí man, tienes toda la razón

Sabes que no había caido en cuenta de ese error?? Gracias

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
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 02:30.