Foros del Web » Creando para Internet » CSS »

¿divitis?

Estas en el tema de ¿divitis? en el foro de CSS en Foros del Web. Hola a todos nuevamente, Hace ya algún tiempo que estoy practicando con CSS fundamentalmente para erradicar las tablas de mi vida :), pero me he ...
  #1 (permalink)  
Antiguo 17/02/2006, 08:34
 
Fecha de Ingreso: febrero-2006
Mensajes: 150
Antigüedad: 11 años, 9 meses
Puntos: 6
¿divitis?

Hola a todos nuevamente,

Hace ya algún tiempo que estoy practicando con CSS fundamentalmente para erradicar las tablas de mi vida :), pero me he encontrado con este mismo foro con el término DIVITIS, donde explican en breve que se ha "degenerado" el uso de las DIVs al ya no ser solamente contenedores vacíos, sino espacios de diseño, entonces me surgieron varias dudad de que es lo "políticamente correcto", un ejemplo:

Supongamos que tengo que hacer un encabezado en una página con HTML+CSS con un pequeño logo, ¿qué es lo políticamente correcto?.

1.- DIV+estilo+imágen
html
----
<div id="encabezado_logo"><img src="/imagenes/logo.png" alt="Logo" width="180" height="80" longdesc="Logo de prueba" /></div>

css
----
#encabezado_logo {
width: 180px;
height: 80px;
margin: 0px;
padding: 0px;
}


2.- DIV+estilo
html
----
<div id="encabezado_logo"></div>

css
----
#encabezado_logo {
background-image: url(/imagenes/logo.png);
width: 180px;
height: 80px;
margin: 0px;
padding: 0px;
}



Si lo más correcto fuera el 1º caso, por ej. el proyecto Camaleón sería un claro ejemplo de divitis?



Saludos!
  #2 (permalink)  
Antiguo 17/02/2006, 11:33
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
si le vas a poner una imagen, lo correcto sería

<img id="encabezado_logo" [...]

directamente, sin usar el div.

La "divitis" se refiere a esto mismo, usar div para contener solamente 1 elemento, al que se le puede dar estilos de la misma forma que al div.

Lo mismo la "tipografía semántica", se trata siempre de usar los elementos para lo que son, primero estructurando (para eso es el html) y después de tener la estructura recién aplicar el estilo.

Date cuenta que en el segundo caso que ponés si falta el estilo no se ve la imagen....

Y en el caso de camaleoncss (supongo que al igual que en csszengarden) la idea es poner div y span "de más" para que todos los diseños sean lo suficientemente flexibles, manteniendo para todos el mismo código html.


Saludos.
  #3 (permalink)  
Antiguo 17/02/2006, 15:39
 
Fecha de Ingreso: febrero-2006
Mensajes: 150
Antigüedad: 11 años, 9 meses
Puntos: 6
Ok, cada día comprendo más :), gracias!...
¿de qué sirve no tener errores en CSS ni en HTML si no aplicamos bien las cosas?.


Saludos!
  #4 (permalink)  
Antiguo 17/02/2006, 23:38
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
exacto, de nada sirve que valide si luego no es usable, no es accesible o no se ve sin imágenes o sin las hojas de estilo.

Creo que es una regla fundamental: primero estructura, diseño después.
Hay que tener en cuenta que 'div' es solo 1 de los tantos elementos que generan cajas....

Saludos man0l0
  #5 (permalink)  
Antiguo 18/02/2006, 11:01
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 14 años, 6 meses
Puntos: 3
Yo he estudiado casos de estilos en CSS Zen Garden, y la verdad, según creo, si deseas tener una web muy reutilizable para aplicar diferentes estilos (es decir, dejar que los usuarios puedan elegir skins o como lo quieras llamar, o cambiar fácilmente de un estilo a otro porque te cansas), creo que es mejor usar los divs. Así puedes, dependiendo del estilo elegido, usar una imagen en un <div>, o un texto formateado. Y gracias a las etiqueta <span> rodeando el texto de un <div>, puedes optar por:

- no poner imagen al selector del <div>, para que aparezca el texto formateado,
- o bien, poner una imagen en el selector del <div>, y poner al <span> del texto la regla display:none, para deshabilitar el texto y que sólo aparezca la imagen.

Esto es muy útil por ejemplo si los títulos de las secciones de una web quieres que sean de texto con un estilo determinado (fuente, color, fondo de texto, separación, sangrado, etc), o bien imágenes gif, jpg o png con el texto del título incluido ya en la propia imagen.

P.ej:

Caso 1: (títulos de secciones de texto formateado)

Código HTML:
#tituloSeccion1 {
    ....
}
.tituloSecciones {
   font-family:...;
   color:....;
   background-color:...;
   stretch:....;
} 

...

<div id="tituloSeccion1">
   <h3 class="tituloSecciones"><span>Sección1</span></h3>
</div> 
Caso 2: (títulos de secciones mediante imágenes que contengan el texto)

Código HTML:
#tituloSeccion1 {
    background: url(/imagenes/imgTituloSeccion1.gif);
}
.tituloSecciones span{
   display: none; /* Hace desaparecer el texto rodeado por span en el fichero HTML fuente*/
}

...

<div id="tituloSeccion1">
   <h3 class="tituloSecciones"><span>Sección1</span></h3>
</div> 

Como veis, el fichero estructural HTML no cambia, pero su apariencia sí, sin tener que hacer arreglos en el HTML
  #6 (permalink)  
Antiguo 18/02/2006, 11:18
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
retomando el 1º post... en ese caso DEPENDE. Si la imagen es un elemento decorativo, osea, puro adorno, se debería usar el método 2, ya que el diseño se define con css. Si la imagen aporta información, como por ejemplo un logo de una empresa (da información corporativa) se debería definir en el html.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 18/02/2006, 13:19
 
Fecha de Ingreso: febrero-2006
Mensajes: 150
Antigüedad: 11 años, 9 meses
Puntos: 6
Gracias a todos nuevamente por sus comentarios y ayudas.


Saludos.
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 09:47.