2010 4 mars 2010
Depuis le bouton radio et le texte sont en ligne, de sorte que le texte sera s'aligner sur le bas du bouton radio, le texte de la volonté semble être légèrement en dessous du bouton radio.
Si vous voulez que d'aligner vers le haut, vous aurez à mettre la radio et le texte dans des récipients séparés comme divs ou d'une durée (le cas échéant) et ils prendront soin de l'alignement. Il serait plus facile d'utiliser des cellules de table aussi, de votre cahier des charges le permet.
Ce ne sera pas le même aspect dans tous les navigateurs, comme chaque navigateur affiche les radios un peu différemment, de sorte qu'il va toujours y avoir des problèmes de taille, peu importe ce que vous faites.
aucun commentaire | posté dans Quirks navigateur , HTML
2010 8 janvier 2010
HTML5 est encore un projet. Au moment où j'écris, le travail sur HTML 5, qui a débuté en 2004, est toujours en cours étant donné la forme d'un effort conjoint entre le Groupe de travail HTML du W3C et le WHATWG . Le mot est que la prochaine génération HTML aura des améliorations et des fonctionnalités, ce qui serait la nouvelle structure et la sémantique, les contrôles de formulaire, API, multimédia, etc balises.
Dans un anglais simple ... ce que cela signifierait pour les développeurs d'interface utilisateur nous ...
- Il y aura plus de certains savoir structurelle balises. <article>, <section>, <header>, <aside>, et <nav>, qui se substituerait à la majorité des <div> utilisée sur une page web, ce qui rend vos pages un peu plus sémantique, mais plus important encore, plus facile à lire.
Hey! Imaginez l'effort économisé dans la recherche que l'on balise manquante DIV proche.
par exemple,
<body>
<header> ... </ header>
<nav> ... </ nav>
<article>
<section>
...
</ Section>
</ Article>
<aside> ... </ côté>
<footer> ... </ footer>
</ Body> Au lieu 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> - Avec l'avènement de contenus audio et vidéo comme YouTube, l'utilisation du multimédia embarqués sur la page Web a increaded par pli. Prenant cela en compte, maintenant le plan est d'ajouter un support natif pour l'intégration de vidéo et audio dans le navigateur lui-même, par conséquent, permettre aux utilisateurs de jouer, pause, stop, chercher et régler le volume en utilisant la commande interne API DOM pour les scripts pour contrôler la lecture.
par exemple,
<video poster="poster.jpg">
<Source src = "video.3gp" type = "video/3gpp"
media = "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> - Mieux définir les rôles-sémantiques des éléments existants pour, par exemple. <strong> et <em> pourrait maintenant effectivement avoir des significations différentes à-dire qu'ils se comportent différemment.
Il ya de nombreux changements et mises à jour plus à la nouvelle version ... Est-ce que maintenir à jour ce post comme je l'ai tombez sur des ceux intéressantes et utiles .... Surveillez cet espace
Ce document ne peut fournir des informations aussi précises que la spécification HTML 5 est encore activement dans le développement. En cas de doute, vérifiez toujours la spécification HTML 5 ici .
1 commentaire | tags: HTML5 | posté dans HTML
2009 18 octobre 2009
- La déclaration de type de document doit être présent au début d'un document qui utilise la syntaxe HTML. Elle peut éventuellement être utilisé dans la syntaxe XHTML, mais il n'est pas nécessaire. Le document XHTML n'a pas besoin d'inclure le DOCTYPE parce que les documents XHTML qui sont livrés correctement en utilisant un type MIME XML et sont traités comme du XML par les navigateurs, sont toujours rendus en aucun mode quirks.
- En XHTML, les noms de balises sont sensibles à la casse et sont généralement définis pour être écrites en minuscules. En HTML, cependant, les noms de balises sont insensibles à la casse et peut être écrit en majuscules ou en tous les cas mixtes, bien que la convention la plus courante consiste à coller avec les minuscules. Le cas des balises de début et de fin ne doit pas être le même, mais en étant compatible ne rendre le plus propre regard du code.
AVANTAGES DE L'UTILISATION HTML
- Rétro-compatible avec les navigateurs existants
- Les auteurs sont déjà familiarisés avec la syntaxe
- La syntaxe indulgents et pardonner signifie qu'il n'y aura aucun utilisateur hostile " écran jaune de la mort "si une erreur se glisse accidentellement par
- Syntaxe abrégée pratique, par exemple les auteurs peuvent omettre certaines balises et les valeurs d'attributs
AVANTAGES DE L'UTILISATION XHTML
- Strict syntaxe XML encourage les auteurs à écrire un balisage bien formé, que certains auteurs peuvent trouver plus facile à entretenir
- Intégration directe avec d'autres vocabulaires XML, tels que SVG et MathML
- Permet l'utilisation de Traitement de données XML, que certains auteurs utilisent dans le cadre de leur montage et / ou les processus de publication
aucun commentaire | tags: XHTML | posté dans HTML , Web Developer
2009 24 mars 2009
Cette école anciennes, mais comme d'habitude il est de mon supplément de mémoire ...
Est donc désactivé = "true" et désactivé = "false" même? Oui
... Ne croyez pas, eh bien! thats la manière dont il est ... voici quelques explication rapide ...
«Invalide» est un attribut d'élément de formulaire tout / sur le terrain et ne peut donc accepter n'importe quelle valeur de par sa nature.
Tant que cet attribut est présent, l'élément sera désactivé indépendamment de sa valeur. par exemple pour.
<input type="text" value="Voici disabled" disabled>
<input type="text" value="Voici disabled" disabled="disabled">
<input type="text" value="Voici disabled" disabled="true">
<input type="text" value="Voici disabled" disabled="false">
Tout ce qui précède fera sur le terrain cette forme "Disabled".
Il suffit de ne pas fournir l'attribut "DISABLED" maintient le champ "CPEI" ... comme ci-dessous
<input type="text" value="Ceci n'est pas disabled" />
Rappelez-vous "Toute valeur (ou pas de valeur du tout) de l'attribut disabled, le navigateur va rendre invalide». Pour garder les choses claires dans notre esprit W3C recommande que nous utilisons disabled = "disabled" dans ces situations.
Cette différence est bien quand on utilise cet attribut en javascript ...
document.form.element.disabled = true; / / l'élément sera désactivé
document.form.element.disabled = false; / / l'élément est activé
Les arguments ci-dessus sont également vrai pour ces attributs et d'éléments:
- vérifié (bouton radio et case à cocher)
- sélectionné (option)
- nowrap (td)
1 commentaire | tags: les éléments de formulaire | Posté dans HTML , javascript,
2008 17 décembre 2008
Si vous êtes une personne css, vous savez la douleur à obtenir vos mises en page de travail multi-navigateur. IE8 est encore un autre bâton dans les roues pour les développeurs nous. Anywaz! si vous frappez sur cette question, comme je l'ai fait hier, où votre parfait état de fonctionnement CSS dans IE7 (et précédentes) et Firefox a soudainement commencé à jeter des crises de colère dans IE8, essayez ceci ... Il semblait bien pour corriger mes problèmes pour le moment ....
Utilisation de la déclaration Meta, nous pouvons spécifier le moteur de rendu, nous aimerions utiliser IE8. Donc, pour forcer IE8 à rendre aussi IE7 ... Insérez la balise META suivante dans la tête de votre document: -
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Par défaut Meta IE serait: -
<meta http-equiv="X-UA-Compatible" content="IE=8" />
ce qui rendrait IE8 afficher la page en utilisant le nouveau mode de normes.
Si nécessaire, cette syntaxe peut être utilisé pour accueillir d'autres navigateurs comme ci-dessous:
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
PLUS A propos de DOCTYPEs:
SI vous êtes encore peu familier avec le genre de l'animal appelé "Doctype" ... voici quelques lecture rapide
Quels sont DOCTYPEs? Quels sont Quirks Navigateur & Mode Strict?
Réglage de la DOCTYPE en XSL
Pour une compréhension plus approfondie sur DOCTYPEs, essayez de visiter ces liens ...
A List Apart: Fixer votre site avec le DOCTYPE droit!
A List Apart: Au-delà de DOCTYPE: Web Standards, la compatibilité ascendante, et IE8
Remarque: Bien que beaucoup d'entre nous HTML / CSS personnes ont été négligeant l'importance de Decleration DOCTYPE dans nos documents, Réglage de la DOCTYPE droite, est généralement la réponse aux questions les plus transversales du navigateur.
1 commentaire | tags: Doctype , à savoir les questions , les IE8 , les Meta Tags , des Trucs et Astuces | Posté dans Quirks navigateur , les HTML
2008 4 octobre 2008
Comme d'habitude, l'un des nombreux certains problèmes étranges avec IE et celui-ci doit se classe dans TOP 10 de l'émission Quirks IE.
Énoncé du problème (Ce fut mon problème, peut-être vous avez les dysfonctionnements similaires):
J'ai beaucoup DIV est dans la page avec la classe "sectionhead", qui n'est rien d'autre titre d'une section sur la page. Donc, j'ai un peu de style qui ressemble à ceci
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}
Le div est un bar gris clair avec un texte noir. Qu'est-ce qui se passe dans IE est une de ces têtes de section sont affichés ok, mais certains sont invisibles jusqu'à ce que, vous faites défiler la page ou cliquez sur quelque chose sur la page, etc Parfois, ils ont tendance à disparaître lorsque vous cliquez sur le 'alt' clé lorsque vous page vers le bas ou faites défiler avec la barre de défilement. Ils semblent parfois réapparaître lorsque vous rechargez (f5) la page. Je courte DIV parfaitement simple avec un peu style simple se comporte BAD.
Ce qui pourrait causer un tel comportement erratique? Eh bien! Franchement, aucune idée!
SOLUTION POSSIBLE:
Encore une fois ne me demandez pas pourquoi, mais dans de nombreux cas ce problème tend à disparaître lorsque vous ajoutez position: relative à la mission comporte éléments de style, comme celui-ci
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}
Étrange, mais ce à dire? Dieu Bénis-moi à partir d'IE!
ET FAIRE PARTAGER AVEC NOUS, si vous aviez des problèmes similaires.
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE | Publié dans Quirks navigateur , les CSS , les HTML
2008 3 octobre 2008
Non qu'il n'y ait que quelques-uns LIGHTBOX que vous pouvez trouver lorsque vous google. Le problème avec la plupart des visionneuses que j'ai trouvé était que tout le monde semblait d'utiliser un ou des autres frameworks JavaScript lourds de poids comme jQuery, Prototype, Mootools et les goûts. Ils sont tous frais et chic à la recherche. Mais Si votre exigence est "MAIS JE VEUX UN SCRIPT LIGHTBOX simple et léger pour MON SITE", puis ici il est;
Quelques fonctionnalités intéressantes de cet album
- Très léger
une. 4kb de scripts replié (8 kb déballé)
b. 2 kb du CSS
c. Quelques lignes de code HTML pour le conteneur lightbox - Simple à comprendre et à mettre en œuvre
- Peut avoir plusieurs albums sur la même page.
- Le conteneur lightbox même est utilisée pour montrer, un contenu différent (ce qui est inclus séparément en tant que divisions cachés dans la page), en fonction sur le lien / option qui est cliqué.
- Centre automatiquement lui-même, en prenant en considération tous les facteurs tels que, la hauteur et la largeur de fenêtre (résolution de l'écran), le montant de défilement des pages et la hauteur du contenu de la visionneuse
- Testé dans IE 7 et FF
Voir la démo |
Télécharger Zip Source Visionneuse (Téléchargé 1806 fois)
Utilisation de l'album [Fichiers dans le fichier zip] jo.js, les jo_pack.js [version emballés]: - un ensemble simple d'objets JavaScript [JO], qui contient l'élément, la fenêtre et scripts de positionnement de documents. Vous pouvez ouvrir JO.JS si vous souhaitez vous salir les mains avec une certaine avancée JavaScripting, la création de fonctions abstraites, qui s'étend des propriétés des éléments et autres. Si vous n'êtes pas trop JavaScripting, Laissez-le tranquille.
lightbox.js, lightbox_pack.js [version compactée]: - contenir la lumière scripts administrateur de la boîte. Si vous êtes concepteur de la page, également responsable de la mise en œuvre de la visionneuse sur la page, vous devez comprendre l'LightBoxManager. LightBoxManager contient essentiellement showLightBox seulement deux fonctions et closeLightBox.
lightbox.css: - Si vous connaissez le CSS, vous pouvez jouer avec lightbox.css pour personnaliser l'apparence-n-feel lightbox.css
index.html: exemple d'implémentation de l'album avec deux contenus différents
lb_underlay_bkg.png: - C'est la lumière / Simi image transparente qui est utilisé pour le fond de la sous-album [sous-couche est la couche en dessous de la lighbox, ce qui empêche l'utilisateur de cliquer sur une autre entité sur la page, tandis que la visionneuse est ouvert]. Vous pouvez utiliser n'importe quelle image ou même d'une couleur unie à cet effet, en fonction de la mise en page et l'exigence.
icon_lb_close.gif: - L'image de la poignée Close en haut à droite de la boîte à lumière. Peut utiliser n'importe quelle image comme par dessin ou modèle
Voir la démo |
Télécharger Zip Source Visionneuse (Téléchargé 1806 fois)
S'il vous plaît laissez-nous vos commentaires et suggestions ...
Pas de commentaires | tags: Visionneuse , boîte de dialogue modale | Publié dans CSS , Téléchargements , HTML , javascript, , composants de l'interface
2008 4 septembre 2008
Ce poste peut être un bon exemple pour l'expression «grand-mère d'enseignement dans les orties" ... Parce que c'est juste BASE commandes CSS. Mais pour ceux qui, comme l'inconscient moi, cela pourrait être une bénédiction dans le déguisement. J'ai toujours pensé (je ne pouvais perdre mon travail pour dire cela), il était seulement possible de garder une partie du contenu de page HTML statique (sens, sa position reste tel quel sur Scroll fenêtre), en utilisant des scripts intelligents, Faire toutes les démarches scientifiques calculs pour trouver la position dynamique, le piégeage des événements Window.scroll et la mise en timeouts etc
Je n'aurais jamais pensé qu'il pouvait aussi simple que cela .... Voici ci-dessous dans le CSS / HTML, j'ai quatre blocs statiques, un fixé à chaque extrimities de la page, Haut, Droite, Bas et Gauche ... Inutile de dire ... vous pouvez choisir l'une quelconque ou plus si besoin est ...
CSS
. Statique {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; position: fixe à échéance;
}
# Contenu {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}
# Wrap-t {top: 0px; background: # 33CC66; width: 100%; hauteur: 55 pixels;}
# Wrap-l {top: 80px; background: # FF9966; hauteur: 300px; largeur: 150px; marge: 2px solid # e6e6e6;}
# Wrap-b {bas: 0px; background: # 3333CC; width: 100%; hauteur: 55 pixels;}
# Wrap-r {top: 80px; background: # 6666FF; hauteur: 300px; largeur: 140px; marge: 2px solid # e6e6e6, à droite: 0;}
HTML
id="contents"> <div Vous contenu de la page principale </ div>
<div id="wrap-b" class="static">
Article statique en bas de page
</ Div>
<div id="wrap-t" class="static">
Article statique sur la page Haut
</ Div>
<div id="wrap-l" class="static">
Article statique sur la page à gauche
</ Div>
<div id="wrap-r" class="static">
Article statique sur le droit page
</ Div>
Voir un exemple wroking ici
aucun commentaire | tags: Positionnement CSS | Publié dans CSS , HTML
2008 2 septembre 2008
Plus d'une fois nous nous sentons le besoin d'écrire hacks navigateur specfic (si ce n'est pas une bonne pratique, nous les développeurs d'assurance-chômage ont de recourir à de tels maux jusqu'à ce que les guerres Navigateurs grands vient à une trêve). Plus tôt, je l'ai mentionné dans cet article Pour votre IEs Seulement , comment écrire un extrait de CSS qui serait visible par les navigateurs IE <IE7 seulement.
Hier, j'ai eu un cas, où je voulais écrire quelques extraits de FireFox spécifique CSS. Eh bien! Je ne sais pas si il ya un code CSS pour cela, mais il ya un code HTML. Il ya un hic cependant, ce morceau de code HTML doesnot de validation HTML passe. Mais, anywaz! Si vous êtes bloqué ou mal en tant que telle, n'a pas en ce qui concerne-pour la validation (parfois il faut être cruel), vous pouvez utiliser la suivante pour déclarer un lien vers une feuille de style que FF ou même simplement le code de la CSS au sein de ce bloc. Le code est
<comment> Mettez votre Firefox uniquement HTML / CSS / Scripts ici </ commentaire>
par exemple,
<comment>
<style>
Styles * / for FF seulement * /
fieldset {border: 1px # dddddd solide;}
</ Style>
</ Commentaire>
I "m heureux pour le moment ...
aucun commentaire | tags: FF Bugs , Hacks FF , FF Questions | Publié dans Quirks navigateur , les CSS , les HTML , javascript,
2008 15 mars 2008
À plusieurs reprises, tout en faisant des mises en page avec les divisions Popup / visionneuses ou Conseils etc, nous rencontrons des situations où certains objets de formulaire SELECT se trouve être en vertu de ces divisions POPUP, de par leur conception et il montre à travers .... Berk!
Eh bien! vous pourriez facilement résoudre ce en ajustant vos valeurs de z-index de façon appropriée pour FF et IE7. Mais Good Old (pun intended) IE6 ne se comporte pas comme prévu .... Le spectacle BOX SELECT travers, même après avoir appliqué de façon drastique certaines hautes valeurs de z-index de votre division PopUp ... Bummer!!
Il n'ya pas de solution pour ce problème, mais il ya, je crois, plus que d'une manière quelques-uns à travailler-contourner ce problème, Mais Im ici pour vous dire la solution la plus simple que j'utilise, qui fonctionne très bien pour moi, dans la plupart des cas ....
"Cacher la boîte ROUGE SELECT Lorsque vous affichez la POPUP"
Tout simplement dans votre extrait de script où vous montrez votre popup, ajouter un morceau de script pour définir la visibilité de la boîte de SELECT pour "Caché"
document.getElementById ('my_select') style.visibilty = "hidden".;
Et n'oubliez pas de le remettre sur CLOSE de votre division PopUp
. document.getElementById ('my_select') style.visibilty = "visible";
où "my_select" est l'ID de la boîte de l'irritation SELECT
Hope this helps ...
PS. Il ya d'autres options comme ofcourse dynamiquement positionining un IFRAME (même taille que vous PopUp) en vertu de la DIV Popup ... Cela fonctionne bien aussi, mais avec une addition de charges d'éléments DOM, des scripts et maux de tête. J'ai utilisé cette solution trop, et si vous avez besoin d'aide pour cette option, ne faites le moi savoir. Se fera un plaisir de vous aider!
pas de commentaires | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE , de IE6 | posté dans Quirks navigateur , les CSS , les HTML , javascript,
