2010 04 de marzo de 2010
Unha vez que o botón de radio eo texto son en liña, de xeito que o texto será aliñar-se para a parte inferior do botón de radio, o texto aparecerá a ser lixeiramente por baixo do botón de radio.
Se queres estes para aliñar ao principio, vai ter que poñer a radio eo texto en recipientes separados, como divs ou spans (segundo corresponda) e eles van coidar do aliñamento. Sería máis doado de usar células da táboa, tamén, do seu proxecto de deseño permite.
Isto non vai ser o mesmo en todos os navegadores, como todo navegador exhibe radios de forma lixeiramente diferente, polo que hai sempre vai haber problemas de tamaño, non importa o que fai.
sen comentarios | posta en Quirks navegador , HTML
2010 08 de xaneiro de 2010
HTML5 aínda é un borrador. Mentres escribo, traballos HTML 5, que comezou en 2004, aínda está a ser dado forma por un esforzo conxunto entre o W3C HTML WG eo WHATWG . A palabra é que a próxima xeración HTML terá melloras e recursos, o que faría nova estrutura e semántica, controis de formulario, APIs, etc etiquetas multimedia.
En Inglés sinxelo ... o que significaría para nós desenvolvedores de interface de usuario ...
- Haberá ademais de algunhas marcas viz estrutural. <article>, <section>, <header>, <aside>, <nav> e, que substituiría a maioría dos <div> s usado nunha páxina web, facendo as súas páxinas un pouco máis semántico, pero máis importante, máis fácil para ler.
Hey! Basta imaxinar o esforzo salvo na constatación de que unha etiqueta DIV falta preto.
por exemplo
<body>
<header> ... </ header>
<nav> ... <nav />
<article>
<section>
...
</ Section>
</ Article>
<aside> ... </ banda>
<rodapé> ... </ footer>
</ Body> No canto de
<body>
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div class="article">
<div class="section">
...
</ Div>
</ Div>
<div id="aside"> ... </ div>
<div id="footer"> ... </ div>
</ Body> - Coa chegada do contido de audio e vídeo como YouTube, o uso de multimedia incorporados no sitio web ten increaded ás veces. Tendo isto en conta, agora o plan é engadir soporte nativo para a incorporación de vídeo e audio no propio navegador, polo tanto, permitir aos usuarios tocar, pausar, parar, buscar, e axustar o volume usando o builtin DOM APIs para scripts para controlar a reprodución.
por exemplo
<video poster="poster.jpg">
<Fonte src = "video.3gp" type = "video/3gpp"
media = "handheld">
<source src="video.mp4" type="video/mp4">
</ Video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
<Audio /> - Mellor definición de papeis semánticos para os elementos existentes para, por exemplo. <strong> e <em> agora pode realmente ter significados distintos ou sexa, vai ser comportarse de forma diferente.
Hai moitos cambios máis / upgrades para a última versión ... continuará a actualizar este post como eu veño transversalmente os máis interesantes útiles .... Assist a este espazo
Este documento non pode fornecer información precisa como a especificación da HTML 5 aínda é activamente no desenvolvemento. En caso de dúbida, asegúrese sempre a especificación de HTML 5 aquí .
1 comentario | Tags: HTML5 | Publicado en HTML
2009 18 de outubro de 2009
- A Declaración de Tipo de Documento que estar presente no inicio dun documento que usa a sintaxe HTML. Pode incluso ser usado dentro do sintaxe XHTML, pero non é necesaria. O documento XHTML Non é preciso incluír o DOCTYPE porque os documentos XHTML que son entregados correctamente usando un tamaño do ficheiro XML e son procesados como XML navegadores, son sempre procesados en ningún modo quirks.
- En XHTML, os nomes de marca son sensibles e xeralmente son definidas para ser escrito en letras minúsculas. HTML, con todo, nomes de marca son maiúsculas e minúsculas e poden ser escritas en todos os casos en maiúsculas ou mixto, aínda que o convenio máis común é para estar con letras minúsculas. O caso das marcas de inicio e de fin non ten que ser o mesmo, pero sendo consistente fai o limpador aparencia de código.
Beneficios da utilización de HTML
- Compatible cos navegadores existentes
- Os autores xa está familiarizado coa sintaxe
- A sintaxe tolerante e perdoar significa que non haberá ningún usuario hostil " pantalla amarela da Morte "un erro escorregar acidentalmente a través de
- Sintaxe abreviada cómodo, por exemplo, autores pode omitir algunhas marcas e valores de atributos
Beneficios da utilización de XHTML
- Sintaxe XML Strict anima os autores a escribir marcado ben formada, que algúns autores poden considerar máis doado de manter
- Integra-se directamente con outros vocabularios XML, como SVG e mathml
- Permite o uso de XML Processing, que algúns autores utilizan como parte da súa edición e / ou procesos de publicación
sen comentarios | Tags: XHTML | Publicado en HTML , Web Developer
2009 24 mar 2009
Esta escola máis antiga, pero como de costume, é o meu suplemento de memoria ...
Entón é disabled = "true" e disabled = "false" mesmo? Si
Non creo ..., ben! iso é do xeito que está ... aquí está a explicación rápida ...
"Deficiente" é un atributo de calquera elemento de formulario / campo e, polo tanto, pode aceptar calquera valor pola súa propia natureza.
Mentres este atributo está presente, o elemento pode ser desactivado, independentemente do seu valor. para, por exemplo.
<input type="text" value="This é disabled" disabled>
<input type="text" value="This é disabled" disabled="disabled">
<input type="text" value="This é disabled" disabled="true">
<input type="text" value="This é disabled" disabled="false">
Todos os elementos anteriormente fará que o campo deste xeito "desactivado".
Simplemente non dando o atributo "desactivado" mantén o campo "habilitados" ... como a continuación
<input type="text" value="This non é disabled" />
Teña en conta que de "valor (ou ningún valor) do atributo disabled, o navegador pode facelo desactivado". Para manter as cousas claras na nosa mente W3C recomenda que usan disabled = "disabled" nestas situacións.
Esta é a diferenza que, cando usamos este atributo en javascript ...
document.form.element.disabled = true / / o elemento desactivado
document.form.element.disabled = false; / / o elemento activado
Os argumentos anteriores son válidas tamén para estes atributos e elementos:
- Comprobarase (botón de radio e caixa)
- seleccionado (opción)
- nowrap (TD)
1 comentario | Tags: elementos de formulario | Publicado en HTML , JavasScript
2008 17 dez 2008
Se é unha persoa CSS, vostede sabe a dor na obtención dos seus esquemas de traballo cross-browser. IE8 é unha chave inglesa nos traballos para os desenvolvedores de nós. Anywaz! se bater enriba desta cuestión, como eu fixen onte, onde o seu CSS funcionando perfectamente no IE7 (e anterior) e Firefox ten de súpeto comezou a birra no IE8, proba este ... É ben parecía resolver os meus problemas para o momento ....
Usando declaración Meta, pode especificar o motor de renderización que quere usar o IE8. Entón, para forzar o IE8 para renderizar como IE7 ... Insira o Tag Meta seguinte na cabeza do seu documento: -
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Por defecto Meta IE sería: -
<meta http-equiv="X-UA-Compatible" content="IE=8" />
o que sería o IE8 renderizar a páxina usando o modo estándar novo.
En caso necesario, esta sintaxe podería ser usado para acomodar a outros navegadores como a continuación:
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
Máis sobre doctypes:
Se aínda non familiarizado co tipo de animal chamado "Doctype" ... está aquí algunha lectura rápida
Cales son DOCTYPES? Cales son peculiaridades navegador e xeito estrito?
Definir o DOCTYPE no XSL
Para un máis profundo entendemento sobre DOCTYPES, tente visitar estes enlaces ...
A List Apart: Fixe o seu sitio co DOCTYPE dereito!
A List Apart: Beyond DOCTYPE: Web Standards, compatibilidade e IE8
Nota: Aínda que moitos de nós HTML / CSS persoas teñen negligenciado a importancia de decleration DOCTYPE nos nosos documentos, establecer o DOCTYPE correcto, adoita ser a resposta a problemas co navegador máis transversais.
1 comentario | Tags: Doctype , cuestións de IE e do IE8 e Meta Tags e Consellos & Truques | Publicado en Quirks navegador e HTML
2008 04 de outubro de 2008
Como de costume, un dos moitos algúns problemas estraños co IE e iso hai que fileiras en TOP 10 de Quirks IE.
Declaración do problema (Este era o meu problema, quizais lle teña malos comportamentos semellantes):
Eu teño moitos DIV está na páxina coa clase "sectionhead", que non é máis títulos das sección na páxina. Entón, eu teño un estilo parecido con isto
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}
O span é unha barra gris claro con algún texto negro. O que ocorre en IE e algúns deses títulos de sección se amosan ben, pero algúns son invisibles, ata que, rolar a páxina ou facer clic en algo na páxina, etc Ás veces eles tenden a desaparecer cando fai clic en 'alt' tecla cando principal down ou cambiar-se a barra de desprazamento. Eles parecen ás veces reaparecer cando actualizar (F5) a páxina. Eu DIV un curto perfectamente simple, cun estilo sinxelo comporta BAD.
O que podería causar tal comportamento errático? Ben! Francamente, non sei!
Solución posible:
Unha vez máis non me pregunte por que, pero en moitos casos, este problema tende a desaparecer cando engadir position: relative a mis comportándose elementos de estilo, como este
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}
Estraño, pero o que dicir? Deus bendiga-me de IE!
E comparten con EUA, se tivo problemas semellantes.
sen comentarios | Tags: erros do IE e correccións de IE e do IE Hacks e Problemas IE | Publicado en Quirks navegador e CSS e HTML
2008 03 de outubro de 2008
Non é que hai só uns LIGHTBOX que podes atopar cando google. O problema coa maioría das mesas de luz que eu atope foi a de que todos parecían usar un ou os outros cadros de peso pesado javascript como jQuery, Prototype, MooTools e os gustos. Son todo fresco e ostentoso procurar. Pero a súa esixencia é "pero quero un script LIGHTBOX sinxelo e leve para o meu sitio", entón aquí está;
Algunhas características interesantes desta mesa de luz
- Moi claro
unha. 4kb de scripts cando embalados (8 kb descomprimido)
b. 2 KB de CSS
c. Poucas liñas de código HTML para o recipiente lightbox - Sinxelo de entender e aplicar
- Pode ter Lightboxes múltiples na mesma páxina.
- O recipiente de área de luz aínda se usa para amosar, contido diferente (o cal é separado incluído como divisións escondidos na páxina), dependendo da conexión / opción que é premendo.
- Automaticamente céntrase en conta que, tendo en conta todos os factores, tales como, alto e ancho da ventá (resolución de pantalla), a cantidade de desprazamento e páxina a altura o contido da colección
- Probado no IE 7 e FF
Vexa o Demo |
Descargar Zip Orixe Luz (Trasladado 1810 veces)
Usando a colección [arquivos no arquivo zip] jo.js e jo_pack.js [versión] embalado: - un conxunto sinxelo de Javascript obxectos [DO], que contén ventá elemento, e scripts de posicionamento de documentos. Pode abrir JO.JS se quere ensuciar as mans con algún Javascripting avanzada, a creación de funcións abstractas, estendéndose as propiedades do elemento e tal. Se non demasiado, en Javascripting, deixe-o só.
lightbox.js, lightbox_pack.js [versión completa]: - conter os scripts manager caixa de luz. Se vostede é deseñador da páxina, tamén responsábel coa implementación do lightbox na páxina, cómpre entender o LightBoxManager. LightBoxManager contén basicamente só dúas funcións showLightBox e closeLightBox.
lightbox.css: - Se coñece CSS, pode xogar con lightbox.css para personalizar o look-n-se sentir lightbox.css
index.html: aplicación de exemplo da mesa de luz con dous contidos diferentes
lb_underlay_bkg.png: - Este é luz / Simi imaxe transparente que é utilizado o fondo para o underlay colección [underlay é a capa por baixo do lighbox, que impide que o usuario fai clic en calquera outra entidade na páxina, mentres que a colección está aberta]. Pode empregar calquera imaxe ou mesmo unha cor sólida para este fin, dependendo do deseño da páxina eo requisito.
icon_lb_close.gif: - A imaxe de manexar lightbox preto na esquina superior dereita da caixa de luz. Pode empregar calquera imaxe como por o proxecto
Vexa o Demo |
Descargar Zip Orixe Luz (Trasladado 1810 veces)
Por favor, imos ter os seus comentarios e feedback ...
no comments | tags: Lightbox , cadro de diálogo modalidade | Posta en CSS , descargas , HTML , JavasScript , compoñentes da interface de usuario
2008 04 setembro de 2008
Este post pode ser un bo exemplo para a frase "a avoa de Ensino para Sugar ovos" ... Porque este é só BASIC Cousas CSS. Pero para aqueles, como a me esquecera, que pode ser unha bendición disfrazada. Eu sempre pensei (eu podería perder meu traballo por dicir iso), só era posible para manter algunha parte do contido da páxina HTML estático (ou sexa, a súa posición permanece como está na Scroll Window), utilizando algúns scripts intelixentes, facendo todas aquelas científica cálculos para atopar posición dinámica, prendendo eventos Window.scroll e establecer timeouts, etc
Nunca pensei que podería tan sinxelo coma isto .... Aquí no seguinte CSS / HTML, eu teño catro bloques estáticos, un fixado cada extrimities da páxina, TOP, inferior, dereita e esquerda ... innecesario dicir ... pode escoller calquera ou máis se ten que ser ...
CSS
. Static {display: block; z-index: 10; color: # ffffff; overflow X: hidden; overflow-y: hidden; posición: ixed;
}
Contido # {Margin: 100px 150px 160px 0px; Modelo: 1px solid # e6e6e6}
# Wrap-t {top: 0px; background: # 33CC66; width: 100%; height: 55px;}
# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; Modelo: 2px solid # e6e6e6;}
# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%; height: 55px;}
# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; Modelo: 2px solid # e6e6e6; dereita: 0;}
HTML
id = "contents"> <span Vostede principais contidos da páxina </ div>
<div id="wrap-b" class="static">
Estático no fondo Páxina
</ Div>
<div id="wrap-t" class="static">
Estático na páxina Inicio
</ Div>
<div id="wrap-l" class="static">
Estático na páxina esquerda
</ Div>
<div id="wrap-r" class="static">
Estático en dereito Páxina
</ Div>
Ver un exemplo wroking aquí
sen comentarios | Tags: Posicionamento CSS | Posta en CSS , HTML
2008 02 de setembro de 2008
Moitas veces sentimos a necesidade de escribir hacks navegador específica (aínda que non sexa unha boa práctica, nós desenvolvedores de interface de usuario ter que recorrer a eses males, ata as grandes guerras Navegadores trata dunha tregua). Anteriormente, eu había mencionado neste artigo pola súa IES Só , como escribir un fragmento de CSS que sería visible para os navegadores IE <IE7 só.
Onte, eu tiven un caso, onde eu quería escribir algunha Firefox específico CSS fragmentos. Ben! Eu non estou seguro se existe un código CSS para iso, pero hai un HTML. Pero hai un problema, porén, este anaco de HTML doesnot validación de HTML pase. Pero, anywaz! Se está preso ou mal, como tal, non teñen relación para validación (ás veces hai que ser cruel), vostede podería usar o seguinte para declarar unha ligazón a unha folla de estilo FF só ou mesmo só o código CSS dentro deste bloque. O código é
<comment> Poña o seu Firefox só HTML / CSS / Scripts aquí </ comment>
por exemplo
<comment>
<style>
/ * Estilos para FF só * /
fieldset {Modelo: 1px solid # dddddd;}
</ Style>
</ Comment>
I "m feliz para o momento ...
sen comentarios | Tags: Erros FF , FF Hacks , Cuestións FF | Publicado en Quirks navegador e CSS e HTML , JavasScript
2008 15 de marzo de 2008
En varias ocasións, ao facer esquemas de páxinas con divisións emerxente / lightboxes / consellos etc nos atopamos con situacións nas que algúns obxectos de formulario Select pasa a ser baixo estas divisións emerxente, polo proxecto e mostra a través de .... Yuk!
Ben! pode facilmente corrixir isto axustando os seus Z-index valores axeitadamente para FF e IE7. Pero Good Old (xogo de palabras intencionado) IE6 non comportarse conforme o esperado .... O show BOX SELECT a través de, mesmo despois de aplicar algúns drasticamente altos Z-index valores para a súa División de xanelas emerxentes ... Bummer!
Non existen solucións a este problema, pero hai, creo eu, máis dun xeito que poucos a traballar en torno a este problema, pero estou aquí para dicir-lle a solución máis simple que eu uso, que funciona ben para min, na maior parte do casos ....
"Ocultar o Rouge caixa SELECT cando amosa a Emerxente"
Simplemente no seu tramo de guión onde amosar o seu pop-up, engade unha peza de script para definir a visibilidade da caixa de verificación para "hidden"
document.getElementById ('my_select') style.visibilty = "hidden".;
E lembre de configurar-lo de volta o próximo da súa División de xanelas emerxentes
document.getElementById ('my_select') style.visibilty = "visible".;
onde "my_select" é o ID do cadro de irritación seleccionar
Espero que isto axude ...
PS. Existen outras opcións como ofcourse dinámica positionining un IFRAME (mesmo tamaño que emerxente), baixo a DIV Emerxente ... Isto funciona moi ben, pero con un engadido de carga de elementos DOM, scripts e dor de cabeza. Eu teño usado esa solución tamén, e se precisa de axuda con esta opción, deixe-me saber. Será un pracer axudar!
sen comentarios | Tags: erros do IE e correccións de IE e do IE Hacks e Problemas IE e IE6 | Publicado en Quirks navegador e CSS e HTML , JavasScript
