2010 04 de marzo 2010

Alineación de la radio el botón con el texto

Desde el botón y el texto están en línea, por lo que el texto se alineará a la parte inferior del botón de opción, el texto del que parecen estar ligeramente por debajo del botón de radio.
Si usted quisiera que éstos se alinean con la parte superior, tendrá que poner la radio y el texto en contenedores separados, como divs o vanos (según corresponda) y que se hará cargo de la alineación. Sería más fácil de usar celdas de la tabla también, de su informe de diseño lo permite.

Esto no tendrá el mismo aspecto en todos los navegadores, ya que cada navegador muestra las radios de forma ligeramente diferente, por lo que siempre va a haber problemas de tamaño no importa lo que haces.

no hay comentarios | publicado en Quirks explorador , HTML

2010 08 de enero 2010

¿Qué va a aportar HTML5?

HTML5 es aún un proyecto. Al momento de escribir, trabajo en HTML 5, que comenzó en 2004, todavía está siendo determinada la forma de un esfuerzo conjunto entre el Grupo de Trabajo HTML del W3C y la WHATWG . La palabra es que la próxima generación de HTML tendrá mejoras y características, lo que la nueva estructura y la semántica, los controles de formulario, APIs, etc etiquetas multimedia.

En Inglés sencillo ... ¿qué significaría para los desarrolladores de la interfaz de usuario nos ...

  • Habrá adición de algún saber etiquetas estructural. <article>, <sección>, <header>, <aside> y <nav>, que sustituiría a la mayoría de los <div> s utilizado en una página web, haciendo que sus páginas un poco más de semántica, pero lo más importante, más fácil a leer.
    Hey! Imagínese el trabajo que se ahorra al considerar que falta una etiqueta DIV cerca.
    por ejemplo, 
  <body>
   <header> ... </ encabezado>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Seccion>
   </ Article>
   <aside> ... </ a un lado>
   <footer> ... </ pie de página>
 </ Body>

En lugar de 

  <body>
   <div id="cabecera"> ... </ div>
   <div id="nav"> ... </ div>
   <div class="article">
     <div class="section">
       ...
     </ Div>
   </ Div>
   <div id="aside"> ... </ div>
   <div id="footer"> ... </ div>
 </ Body>
  • Con el advenimiento de contenido de audio y de vídeo como YouTube, el uso de multimedia embebidos en la página web ha increaded por el pliegue. Teniendo esto en cuenta, ahora el plan es agregar soporte nativo para la incorporación de vídeo y audio en el propio navegador, por lo tanto, permiten a los usuarios reproducir, pausar, detener, buscar y ajustar el volumen utilizando la orden interna DOM APIs para las secuencias de comandos para controlar la reproducción.

por ejemplo, 

  <video poster="poster.jpg">
     <Fuente src = "video.3gp" type = "video/3gpp"
     los medios de comunicación = "handheld">
         <source src="video.mp4" type="video/mp4">
 </ Div>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio>
  • Una mejor definición de los roles semánticos de los elementos existentes para, por ejemplo. <strong> y <em> ahora podría en realidad tienen significados distintos es decir, se comportan de manera diferente.

Hay muchos más cambios y actualizaciones a la versión más reciente ... Seguiremos actualizando este post, ya que vengo cruzando los seres útiles interesantes .... Mire este espacio

Este documento no puede proporcionar información precisa como la especificación de HTML 5 está todavía activa en el desarrollo. En caso de duda, siempre revise la especificación de HTML 5 aquí .

1 comentario | tags: | publicado en HTML

2009 18 de octubre 2009

HTML y XHTML

  • La Declaración de tipo de documento tiene que estar presente al principio de un documento que utiliza la sintaxis HTML. Opcionalmente, se puede utilizar dentro de la sintaxis XHTML, pero no es necesario. El documento XHTML no es necesario incluir el DOCTYPE ya que los documentos XHTML que se entregan con un adecuado tipo MIME XML y se procesan como XML por los navegadores, siempre se representan en ningún modo de peculiaridades.
  • En XHTML, los nombres de etiquetas distinguen entre mayúsculas y minúsculas, y generalmente se definen para ser escrito en minúsculas. En HTML, sin embargo, los nombres de etiquetas distinguen entre mayúsculas y minúsculas y puede ser escrito en todos los casos en mayúsculas o mixta, a pesar de la convención más común es seguir con minúsculas. El caso de las etiquetas de inicio y el final no tiene que ser el mismo, pero siendo coherente hace que el limpiador mirada código.

BENEFICIOS DE USAR HTML

  • Compatible con los navegadores existentes
  • Los autores ya están familiarizados con la sintaxis
  • La sintaxis de la indulgencia y el perdón significa que no habrá ningún usuario hostil " de la pantalla amarilla de la muerte "si un error accidental se desliza a través
  • Sintaxis abreviada conveniente, por ejemplo, los autores pueden omitir algunas etiquetas y valores de atributos

BENEFICIOS DE USAR XHTML

  • Estricta sintaxis XML invita a los autores a escribir marcado bien formado, que algunos autores pueden encontrar más fácil de mantener
  • Se integra directamente con otros vocabularios XML, como SVG y MathML
  • Permite el uso de procesamiento de XML, lo que algunos autores utilizan como parte de su edición y / o procesos de publicación

no hay comentarios | Tags: | publicado en HTML , Web Developer

2009 24 de marzo 2009

SE disabled = "true" y desactivado = "false" lo mismo?

Esta escuela las antiguas, pero como siempre es mi suplemento de memoria ...
Así se desactiva = "true" y los discapacitados = "false" lo mismo? Sí
No creo ..., bueno! esa es la forma en que es ... aquí es una explicación rápida ...
"Discapacitado" es un atributo de cualquier elemento de la forma / de campo y por lo tanto, puede aceptar cualquier valor por su propia naturaleza.

Mientras este atributo está presente, el elemento se desactivará independientemente de su valor. por ejemplo.
<input type="text" value="Esto es disabled" disabled>
<input type="text" value="Esto es disabled" disabled="disabled">
<input type="text" value="Esto es disabled" disabled="true">
<input type="text" value="Esto es disabled" disabled="false">

Todo lo anterior hará que el campo de esta forma "DISABLED".

Simplemente no proporcionar el atributo "DISABLED" mantiene el campo "abled" ... como el de abajo

<input type="text" value="Esto no es disabled" />

Recuerde que "Cualquier valor (o ningún valor) del atributo de personas con discapacidad, representará el explorador deshabilitado". Para mantener las cosas en claro en nuestra mente W3C recomienda que usamos disabled = "disabled" en estas situaciones.

Esta es la diferencia, aunque cuando se utiliza este atributo en javascript ...

document.form.element.disabled = true; / / el elemento se desactivará
document.form.element.disabled = false; / / el elemento se activará

Los argumentos anteriores también son aplicables a estos atributos y elementos:

  • seleccionada (botón de la radio y la casilla de verificación)
  • seleccionados (opción)
  • nowrap (td)

1 comentario | tags: | publicado en HTML , JavasScript

2008 17 de diciembre 2008

Descuidar se comporten IE8: CSS roturas de diseño (dirigido a una versión de navegador utilizando Meta Tags en ​​IE8)

Si usted es una persona css, usted sabe que el dolor en conseguir los diseños de trabajo multi-navegador. IE8 es otro palo en la rueda para los desarrolladores de nosotros. Anywaz! si se golpea sobre este tema, como lo hice ayer, donde su perfecto estado de funcionamiento de CSS en Internet Explorer 7 (y anterior) y Firefox de repente ha empezado hacer berrinches en IE8, intente lo siguiente ... Se muy bien parecido para arreglar mis problemas por el momento ....

Uso de la declaración del Meta, se puede especificar el motor de renderizado de Internet Explorer 8 nos gustaría utilizar. Así pues, para obligar a Internet Explorer 8 para hacer que Internet Explorer 7 ... Inserte la siguiente etiqueta META en la cabeza de su documento: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Por defecto IE Meta sería la siguiente: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
lo que haría que IE8 representar la página utilizando el modo de nuevas normas.

Si es necesario, esta sintaxis podría ser utilizado para acomodar para otros navegadores como a continuación:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Más Acerca de DOCTYPEs:

Si usted todavía no están familiarizados con el tipo de animal que se llama "Doctype" ... he aquí algo de lectura rápida
¿Cuáles son DOCTYPEs? ¿Qué son los Caprichos de navegador y de modo estricto?
Ajuste de la DOCTYPE en XSL

Para un análisis más profundo conocimiento acerca DOCTYPEs, intento que visita estos links ...
A List Apart: Fije su sitio con el DOCTYPE ¡Muy bien!
A List Apart: Más allá de DOCTYPE: Estándares Web, compatibilidad hacia adelante, y IE8

Nota: Aunque muchos de nosotros HTML / CSS gente ha estado descuidando la importancia de decleration DOCTYPE en nuestros documentos, Configuración de la DOCTYPE correcto, suele ser la respuesta a las cuestiones de navegación más transversal.

1 comentario | tags: , y , los , los | publicado en Quirks navegador y HTML

2008 04 de octubre 2008

La desaparición de HTML / DIV elementos en Internet Explorer [IE]

Como de costumbre, uno de los muchos problemas extraños con Internet Explorer y esto hay filas en el TOP 10 de las peculiaridades de IE.

PLANTEAMIENTO DEL PROBLEMA (este era mi problema, puede ser que tenga malas conductas similares):
Tengo muchas DIV está en la página con la clase "sectionhead", que no es sino el título de una sección en la página. Así que he un poco de estilo con este aspecto

. Sectionhead {font-size: 18px; fondo: # cfcfcf; padding: 5px;}

El div es una barra de color gris claro con un poco de texto en negro. ¿Qué pasa en el IE es algunos de estos encabezados de sección se muestran bien, pero algunos son invisibles, hasta que, de desplazarse por la página o haga clic en algo en la página, etc A veces se tienden a desaparecer cuando usted haga clic en la tecla 'Alt' cuando la página hacia abajo o desplazarse con la barra de desplazamiento. A veces parece que volverá a aparecer cuando se vuelva a cargar (F5) la página. Me corto un DIV muy simple con un poco de estilo sencillo y se comporta BAD.
¿Qué puede causar este tipo de comportamiento errático? Bueno! Francamente, ni idea!

POSIBLE SOLUCIÓN:
Una vez más no me preguntes por qué, pero en muchos casos, este problema tiende a desaparecer cuando se agrega la posición: en relación con el mal comportamiento estilo de los elementos, así

. Sectionhead {font-size: 18px; fondo: # cfcfcf; padding: 5px; position: relative}

Extraño, pero ¿qué decir? Dios me bendiga por el IE!

Y Comparta con EE.UU., si tenían problemas similares.

no hay comentarios | tags: y , los , los | publicado en Caprichos del navegador , la CSS y HTML

2008 03 de octubre 2008

Simple, la mesa de luz ligero, navegador de la Cruz para su página web

No es que no son sólo unos pocos LIGHTBOX de que usted puede encontrar cuando buscas en google. El problema con la mayor parte de la caja de luz que encontré fue que todos parecían utilizar uno o los otros marcos pesados ​​JAVASCRIPT peso, como jQuery, Prototype, Mootools y los gustos. Todos ellos son fresco y elegante busca. Pero si su requerimiento es "pero quiero un SCRIPT LIGHTBOX simple y ligera para mi sitio", entonces aquí es;

Algunas características interesantes de esta caja de luz

  1. Muy claro
    una. 4kb de secuencias de comandos cuando se envasa (8 kb sin embalaje)
    b. 2 kb de CSS
    c. Pocas líneas de HTML para el contenedor de la colección
  2. Fácil de entender y poner en práctica
  3. Puede tener varias cajas de luz en la misma página.
  4. El contenedor de la colección se utiliza la misma para mostrar, a los diferentes contenidos (que se incluyen por separado en divisiones ocultas en la página), en función de la relación / opción que se hace clic.
  5. Se centra automáticamente, tomando en consideración todos los factores tales como, la altura y la anchura de ventana (resolución de la pantalla), la cantidad de desplazamiento de páginas y la altura de los contenidos de la caja de luz
  6. Probado en IE 7 y FF

Ver demostración |
Descargue la mesa de luz Postal Fuente (Descargado 1794 veces)

Uso de la colección [Archivos en el archivo zip]

jo.js y jo_pack.js [versión]: - lleno de un simple conjunto de objetos JavaScript [JO], que contiene los elementos, ventanas y guiones de documentos de posicionamiento. Puede abrir JO.JS si desea ensuciarse las manos con un poco de Javascripting avanzada, la creación de funciones abstractas, que se extiende propiedades de los elementos y tal. Si no demasiado Javascripting, no lo toque.

lightbox.js, lightbox_pack.js [versión llena de]: - Contiene secuencias de comandos de administrador de la caja de luz. Si usted es diseñador de la página, también es responsable de implementar la mesa de luz en la página, usted necesita entender la LightBoxManager. LightBoxManager contiene básicamente showLightBox sólo dos funciones y closeLightBox.

lightbox.css: - Si conoces CSS, se puede jugar con lightbox.css para personalizar el aspecto-n-feel lightbox.css

index.html: aplicación de muestra de la caja de luz con dos contenidos diferentes

lb_underlay_bkg.png: - Esta es la luz / Simi imagen transparente que se utiliza el fondo para la capa base la colección [calco subyacente es la capa debajo de la lighbox, que evita que el usuario haga clic en cualquier otra entidad en la página, mientras que la colección está abierta]. Se puede utilizar cualquier imagen o incluso un color sólido para este propósito, dependiendo del diseño de la página y la exigencia.

icon_lb_close.gif: - La imagen de la colección de mango cerca de la parte superior derecha de la caja de luz. Puede utilizar cualquier imagen como por el diseño

Ver demostración |
Descargue la mesa de luz Postal Fuente (Descargado 1794 veces)

Por favor, háganos llegar sus comentarios y sugerencias ...

no comments | tags: , | Publicado en CSS , Descargas , HTML , JavasScript , la interfaz de usuario de componentes

2008 04 de septiembre 2008

Fija (que permanece estática en la ventana de desplazamiento) Los bloques de la página utilizando sólo CSS

Este mensaje puede ser un buen ejemplo de la frase "la abuela enseñanza a chupar los huevos" ... Porque esto es algo de CSS solo BASIC. Pero para aquellos, como el inconsciente de mí, esto podría ser una bendición disfrazada. Siempre he pensado (que podría perder mi trabajo por decir esto), sólo era posible para mantener alguna parte del contenido de la página HTML estático (es decir, su posición se mantenga como está en la ventana de desplazamiento), con algunas secuencias de comandos inteligentes, hacer todos los científicos cálculos para encontrar la posición dinámica, atrapando a los acontecimientos y el establecimiento de tiempos de espera Window.scroll etc

Nunca pensé que podría tan simple como esto .... Aquí, en el siguiente CSS / HTML, tengo cuatro bloques estáticos, uno fijado a cada uno extrimities de la página, arriba, derecha, abajo y de izquierda ... no hace falta decir ... usted puede elegir uno o más si es necesario ...

CSS
. Estática {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; posición: ixed;
}
# Contents {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; width: 100%; altura: 55px;}

# Wrap-l {top: 80px; fondo: # FF9966; altura: 300px; ancho: 150px; la frontera: 2px solid # e6e6e6;}

# Wrap-b {parte inferior: 0px; background: # 3333CC; width: 100%; altura: 55px;}

# Wrap-r {top: 80px; fondo: # 6666FF; altura: 300px; ancho: 140px; la frontera: 2px solid # e6e6e6; derecha: 0;}

HTML
id="contents"> <div You contenido de la página principal </ div>
<div id="wrap-b" class="static">
Contenido estático en el fondo de la página
</ Div>
<div id="wrap-t" class="static">
El contenido estático en principio
</ Div>

<div id="wrap-l" class="static">
Contenido estático en la página a la izquierda
</ Div>
<div id="wrap-r" class="static">
Contenido estático sobre el derecho de la página
</ Div>

Vea un ejemplo aquí wroking

no hay comentarios | Etiquetas: | publicado en CSS , HTML

2008 02 de septiembre 2008

CSS hack: Javascript, CSS, HTML para Firefox sólo

Muchas veces nos sentimos la necesidad de escribir específicos sobre hacks de navegador (aunque no es una buena práctica, que los desarrolladores de la interfaz de usuario tienen que recurrir a tales males, hasta las guerras de navegadores grandes llega a una tregua). Anteriormente, había mencionado en este artículo para el IE sólo , cómo escribir un fragmento de código CSS que sería visible para los navegadores Internet Explorer <IE7 sólo.

Ayer tuve un caso, donde yo quería escribir algo de Complemento específico de fragmentos de CSS. Bueno! No estoy seguro si hay un código CSS para esto, pero hay un HTML. Hay una trampa Aunque, este trozo de código HTML de validación de HTML doesnot pase. Pero, anywaz! Si le pegan mal o como tal, no tienen ninguna relación-para la validación (en algún momento tenemos que ser cruel), usted podría utilizar el siguiente para declarar un enlace a una hoja de estilo FF único, ni siquiera sólo el código de la CSS dentro de este bloque. El código es

<comentario> Pon tu Firefox sólo HTML / CSS / Secuencias de comandos aquí </ comentario>

por ejemplo,
<comentario>
<style>
O * Los estilos de FF sólo * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Comentario>

Yo "estoy contento por el momento ...

no hay comentarios | tags: , , | Publicado en Rarezas del navegador , la CSS y HTML , JavasScript

2008 15 de marzo 2008

Irrita los cuadros de selección visibles a través de las divisiones de ventanas emergentes

En varias ocasiones, mientras que hace los diseños de página con las divisiones de popup / Cajas de Luz y consejos, etc nos encontramos con situaciones en las que algunos objetos de formulario SELECT pasa a ser en estas divisiones POPUP, por diseño y se muestra a través de .... ¡Puaj!

Bueno! fácilmente se podría solucionar este problema ajustando sus valores de índice z adecuadamente para FF y IE7. Sin embargo, Good Old (nunca mejor dicho) IE6 no se comporta según lo previsto .... El programa Select Box a través, incluso después de aplicar algunas drásticamente altos valores de índice z de su División ... PopUp Charlatán!!

No hay soluciones para este problema, pero están ahí, creo yo, más que una manera de trabajar unos pocos-en torno a este problema, pero estoy aquí para decirles que la solución más sencilla que yo uso, que funciona bien para mí, en la mayor parte de la los casos ....

"Ocultar la caja de ROUGE SELECT cuando se muestra la POPUP"

Simplemente, en el fragmento de secuencia de comandos donde usted muestra su emergente, agregar un trozo de secuencia de comandos para establecer la visibilidad de la caja de selección de "Oculto"

document.getElementById ('my_select') style.visibilty = "hidden".;

Y recuerde que retroceder en el cierre de la División de PopUp

. document.getElementById ('my_select') style.visibilty = "visible";

donde "my_select" es el ID de la caja de la irritación SELECT

Espero que esto ayude ...

PS. Hay por supuesto, son otras opciones como dinámicamente positionining un IFRAME (mismo tamaño que usted PopUp) en el marco del DIV emergente ... Esto funciona muy bien también, pero con una adición de un montón de elementos DOM, scripts y dolor de cabeza. He utilizado esta solución también, y si usted necesita cualquier ayuda con esta opción, me deja saber. Estará encantado de ayudarle!

sin comentarios | tags: y , los , los , la | publicado en Caprichos del navegador , la CSS y HTML , JavasScript

NDK en casa | Expresando IT | Boca Expresando | Penmenship Expresando | Awe Expresando | expresarme