IDs de div y tipos de página

Seguir

El diseño por estilos CSS permite al diseñador orientar su trabajo hacia las distintas partes que componen una página en particular. Gracias a la estructura ID, el diseño se puede llevar a cabo según la clasificación de las plantillas o por sección/subsección.

A continuación puede verse la estructura básica de elementos div que hay en cada página de plantilla.

div_structure.gif

El esqueleto o estructura del diseño está compuesto por el estandar HTML y los elementos del body además de los div #body, #canvas y #page.

Selección de Sección/Subsección:

La existencia de los div section y subsection permite seleccionar elementos dependiendo de donde se encuentre el usuario en la web(por ejemplo dentro de una subsección y no en la página de inicio). Heredan el nombre de la sección por lo que si el usuario está en una sección llamada “Comida” el div automáticamente se llamaría #section_comida. La misma regla puede aplicarse a cualquier subsección o contenido incluido en esa sección.

En la navegación en la sección, los elementos de la lista también tienen clases únicas que permiten su selección. Así, por ejemplo, el elemento de navegación correspondiente a la sección de “Comida” tendría el siguiente id: .menu_section_comida. Los elementos de navegación también tienen clases adicionales como inicio (.section_menu_start), final (.section_menu_end) y seleccionado (.selected).

Estas dos características son muy útiles cuando se hace una codificación de color o se aplica un estilo de encabezado diferente según la sección/subsección o cuando se quiere destacar determinados elementos de la navegación.

 

Selección de tipo de página:

Cada plantilla tiene un ID de tipo de página asociado a él. Puede usar estos IDs para seleccionar elementos de la plantilla según el tipo de página que es y no por dónde se encuentran.

Estos son los tipos de página que se usan:

  • #pagetype_homepage
  • #pagetype_section
  • #pagetype_subsection
  • #pagetype_tags
  • #pagetype_article
  • #pagetype_event
  • #pagetype_location
  • #pagetype_page (Páginas que usan plantilla)
  • #pagetype_locationsearch
  • #pagetype_locationmap
  • #pagetype_eventsearch
  • #pagetype_eventmap
  • #pagetype_directorylist (se eliminará en v2.15)
  • #pagetype_directorymap (se eliminará en v2.15)
  • #pagetype_eventsubmit
  • #pagetype_contact
  • #pagetype_notfound
¿Tiene más preguntas? Enviar una solicitud

Comentarios

Tecnología de Zendesk