2010 4 marzo 2010
Dal momento che il pulsante di opzione e il testo sono in linea, in modo che il testo si allinea alla parte inferiore del pulsante di opzione, il testo la volontà sembra essere leggermente sotto il pulsante di opzione.
Se si desidera che questi per allineare verso l'alto, dovrete posizionare la radio e il testo in contenitori separati come divs o si estende (a seconda dei casi) e si occuperà dell'allineamento. Sarebbe più facile da usare celle di una tabella anche del riassunto di disegno lo consente.
Questo non lo stesso aspetto in tutti i browser, come ogni browser visualizza le radio in modo leggermente diverso, quindi ci sta andando sempre essere problemi di taglia, non importa quello che fai.
no comments | posted in Quirks Browser , HTML
2010 8 Gennaio 2010
HTML5 è ancora una bozza. Mentre scrivo, lavorare su HTML 5, che ha avuto inizio nel 2004, è tuttora oggetto di forma da uno sforzo congiunto tra il W3C HTML WG e il WHATWG . La parola è che la next gen HTML avranno miglioramenti e caratteristiche, che sarebbe la nuova struttura e la semantica, controlli dei moduli, API, multimedia ecc tag.
In inglese semplice ... cosa significa per noi sviluppatori dell'interfaccia utente ...
- Ci saranno inoltre alcune cioè strutturale tag. <article>, <section>, <header>, <aside> e <nav>, che dovrebbe sostituire la maggior parte dei <div> s utilizzato su una pagina web, rendendo le pagine un po 'più semantico, ma ancora più importante, più facile leggere.
Hey! Provate a immaginare lo sforzo risparmiato nella ricerca di quella mancante tag DIV vicino.
ad esempio
<body>
<header> ... </ header>
<nav> ... </ nav>
<article>
<section>
...
</ Sezione>
</ Article>
<aside> ... </ parte>
<footer> ... </ footer>
</ Body> Invece di
<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> - Con l'avvento di contenuti audio e video come YouTube, l'uso di multimedia inserito sulla pagina web è increaded di volte. Tenendo conto di questo, ora il piano è quello di aggiungere il supporto nativo per l'incorporamento di video e audio nel browser stesso, e quindi consentire agli utenti di riprodurre, mettere in pausa, stop, cercare, e regolare il volume usando il builtin DOM API per gli script per controllare la riproduzione.
ad esempio
<video poster="poster.jpg">
<Sorgente src = tipo "video.3gp" = "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> - Meglio definiti i ruoli semantici per gli elementi esistenti per es. <strong> e <em> potrebbe ora in realtà hanno significati diversi cioè si comporteranno in modo diverso.
Ci sono molti cambiamenti più / upgrade alla versione più recente ... Manterremo l'aggiornamento questo post come vengo attraversato tutte quelle interessanti utili .... Tieni d'occhio questo spazio
Questo documento non può fornire informazioni accurate come la specifica HTML 5 è ancora attivamente in fase di sviluppo. In caso di dubbio, controllare sempre la specifica HTML 5 qui .
1 commento | tags: HTML5 | posted in HTML
2009 18 ottobre 2009
- La dichiarazione di tipo di documento deve essere presente all'inizio di un documento che utilizza la sintassi HTML. Si può facoltativamente essere utilizzata entro la sintassi XHTML, ma non è richiesto. Il documento XHTML non è necessario includere il DOCTYPE XHTML perché i documenti che vengono consegnati correttamente utilizzando un tipo MIME XML e vengono trattati come XML dai browser, sono sempre resi in nessun quirks mode.
- In XHTML, i nomi dei tag sono case sensitive e di solito sono definiti per essere scritti in minuscolo. In HTML, però, i nomi dei tag sono case insensitive e possono essere scritti in lettere maiuscole o misto, anche se la convenzione più comune è quello di attaccare con lettere minuscole. Il caso dei tag iniziali e finali non devono essere lo stesso, ma essere coerente rende il codice più pulito sguardo.
VANTAGGI DI UTILIZZO HTML
- Compatibile con i browser esistenti
- Gli autori hanno già familiarità con la sintassi
- La sintassi indulgente e clemente significa che non ci sarà nessun utente ostile " Schermo giallo della morte ", se un errore scivola accidentalmente attraverso
- Sintassi abbreviata conveniente, ad esempio, gli autori possono omettere alcuni tag ei valori degli attributi
VANTAGGI DI UTILIZZO XHTML
- Strict sintassi XML incoraggia gli autori a scrivere markup ben formato, che alcuni autori possono trovare più facile da mantenere
- Si integra direttamente con altri vocabolari XML, come ad esempio SVG e MathML
- Consente l'uso di XML Processing, che alcuni autori usano come parte della loro modifica e / o processi di pubblicazione
non ci sono commenti | Tag: XHTML | posted in HTML , Web Developer
2009 24 marzo 2009
Questa scuola vecchi, ma come al solito è il mio supplemento di memoria ...
Così è disabilitato = "true" e disabili = "false" lo stesso? Sì
... Non credo, bene! thats il senso che è ... ecco qualche veloce spiegazione ...
"Disabile" è un attributo di qualsiasi elemento del modulo / campo e quindi può accettare qualsiasi valore per sua stessa natura.
Finché questo attributo è presente, l'elemento sarà disabilitata indipendentemente dal suo valore. per es.
<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">
Tutto ciò renderà il campo di questa forma "Disabilitato".
Semplicemente non fornendo l'attributo "DISABLED" mantiene la Field "abili" ... come di seguito
<input type="text" value="This non è disabled" />
Ricordate "Qualsiasi valore (o nessun valore a tutti) l'attributo disabled, il browser renderlo disabilitato". Per mantenere le cose chiare nella nostra mente W3C raccomanda che usiamo disabled = "disabled" in queste situazioni.
Questa è la differenza anche se quando si usa questo attributo in javascript ...
document.form.element.disabled = true; / / l'elemento sarà disabilitata
document.form.element.disabled = false; / / l'elemento verrà abilitato
Gli argomenti di cui sopra sono vere anche per questi attributi e di elementi:
- controllato (pulsante di opzione e checkbox)
- selezionato (opzione)
- nowrap (td)
1 commento | tags: elementi dei moduli | posted in HTML , JavasScript
2008 17 Dic 2008
Se siete persone css, si dovrebbe conoscere il dolore ottenere i vostri layout di lavoro cross-browser. IE8 è ancora un altro bastone tra le ruote per gli sviluppatori noi. Anywaz! se si preme su questo problema, come ho fatto ieri, in cui il vostro perfettamente funzionante CSS in IE7 (e precedenti) e Firefox ha improvvisamente iniziato a tirare i capricci in IE8, provate questo ... E 'bene sembrava risolvere i miei problemi, per il momento ....
Utilizzando dichiarazione Meta, possiamo specificare il motore di rendering vorremmo utilizzare IE8. Quindi, per forza di rendere IE8 come IE7 ... Inserire il seguente meta tag nella testa del documento: -
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Per impostazione predefinita Meta IE potrebbe essere: -
<meta http-equiv="X-UA-Compatible" content="IE=8" />
che renderebbe IE8 il rendering della pagina utilizzando la nuova modalità standard.
Se necessario, questa sintassi potrebbe essere utilizzato per accogliere per altri browser come di seguito:
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
PIU 'A proposito di DOCTYPE:
Se siete ancora familiarità con il tipo di animale chiamato "Doctype" ... ecco alcune lettura veloce
Cosa sono i DOCTYPE? Quali sono i difetti dei browser e Modalità rigorosa?
Impostazione del DOCTYPE in XSL
Per una più profonda conoscenza circa DOCTYPE, provare a visitare questi link ...
A List Apart: Fix Your Site Con il DOCTYPE destra!
A List Apart: Beyond DOCTYPE: Web Standards, le compatibilità in avanti e IE8
Nota: Anche se molti di noi HTML / CSS persone sono state trascurando l'importanza della decleration DOCTYPE nei nostri documenti, Impostazione del DOCTYPE destra, è di solito la risposta ai problemi del browser più trasversali.
1 commento | tags: Doctype , ossia le questioni , i IE8 , i Meta Tag , i Tips & Tricks | posted in Quirks browser e HTML
2008 4 OTTOBRE 2008
Come al solito, uno dei tanti alcuni strani problemi con IE e questo si deve ranghi nella TOP 10 di stranezze di IE.
PROBLEMA ECONOMICO (Questo era il mio problema, forse hai misbehaviors simili):
Ho molte persone DIV nella pagina con la classe "sectionhead", che non è altro che il titolo di una sezione della pagina. Così ho un certo stile, cercando in questo modo
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}
Il div è una barra grigio chiaro con un testo nero. Cosa succede in IE è alcune di queste intestazioni di sezione sono visualizzati ok, ma alcuni sono invisibili, FINO, scorrere la pagina o cliccare qualcosa sulla pagina, ecc Qualche tendono a scomparire quando si fa clic sul tasto 'alt' quando pagina verso il basso o scorrere con la barra di scorrimento. A volte sembrano riapparire quando si ricarica (f5) la pagina. Ho insomma un DIV estremamente semplice con un po 'stile semplice si comporta BAD.
Che cosa potrebbe causare un tale comportamento irregolare? Bene! Francamente, NO IDEA!
SOLUZIONE POSSIBILE:
Anche in questo caso non chiedetemi perché, ma in molti casi questo problema tende a svanire quando si aggiunge position: relative alla mis comportarsi stile di elementi, come questo
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}
Strano, ma cosa dire? Dio mi benedica da IE!
E FARE SHARE CON NOI, SE avuto problemi simili.
non ci sono commenti | tags: bug di IE , le correzioni di IE e Hacks di IE , i Problemi IE | posted in Quirks Browser , i CSS e HTML
2008 3 ottobre 2008
Non che ci sono solo pochi LIGHTBOX che si può trovare quando si google. Il problema con la maggior parte delle lightboxes che ho trovato era che tutti sembravano di utilizzare una o le altre strutture pesanti di peso JavaScript come jQuery, Prototype, MooTools e simili. Sono tutti freschi e swanky cercando. Ma se la vostra esigenza è "MA VOGLIO A SCRIPT LIGHTBOX semplice e leggero Per il mio sito", eccola qui;
Alcune caratteristiche interessanti di questa raccolta
- Molto leggero
uno. 4kb di script quando confezionate (8 kb scompattato)
b. 2 kb di CSS
c. Poche righe di codice HTML per il contenitore lightbox - Semplice da capire e da attuare
- Può avere Lightbox multipli sulla stessa pagina.
- Il contenitore lightbox viene utilizzato lo stesso per mostrare, contenuti diversi (che è incluso come parte divisioni nascosti nella pagina), a seconda del link / opzione che viene cliccato.
- Centra automaticamente, prendendo in considerazione tutti i fattori, quali, l'altezza e la larghezza Window (risoluzione dello schermo), l'importo pagina di scorrimento e l'altezza dei contenuti del lightbox
- Testato in IE 7 e FF
Visualizza Demo |
Scarica Fonte Zip Lightbox (Scaricato 1808 volte)
Utilizzando il lightbox [file nel file zip] jo.js e jo_pack.js [versione imballato]: - un semplice insieme di oggetti JavaScript [JO], che contiene elementi, finestra e gli script di posizionamento dei documenti. È possibile aprire JO.JS se si vuole sporcarsi le mani con un po 'Javascripting avanzata, creazione di funzioni astratte, estendendo le proprietà degli elementi e così via. Se non è troppo Javascripting, Lascia stare.
lightbox.js, lightbox_pack.js [versione packed]: - contiene luce gli script del gestore della scatola. Se siete di progettazione delle pagine, anche responsabile di attuare il lightbox nella pagina, è necessario comprendere la LightBoxManager. LightBoxManager showLightBox contiene sostanzialmente solo due funzioni e closeLightBox.
lightbox.css: - Se conosci il CSS, è possibile giocare con lightbox.css per personalizzare il look-n-feel lightbox.css
index.html: Esempio di implementazione della raccolta con due contenuti diversi
lb_underlay_bkg.png: - Questa è la luce / simi un'immagine trasparente che viene utilizzato lo sfondo per il sottofondo lightbox [Underlay è lo strato al di sotto del lighbox, che impedisce all'utente di fare clic qualsiasi altra entità sulla pagina, mentre il lightbox è aperta]. È possibile utilizzare qualsiasi immagine o una tinta unita per questo scopo, a seconda del design della pagina e il requisito.
icon_lb_close.gif: - L'immagine per maniglia lightbox stretta in alto a destra della finestra di luce. Possibile utilizzare qualsiasi immagine come da disegno
Visualizza Demo |
Scarica Fonte Zip Lightbox (Scaricato 1808 volte)
Vi preghiamo di farci avere i vostri commenti ...
no comments | tags: Lightbox , finestra di dialogo modale | Posted in CSS , Downloads , HTML , JavasScript , UI Components
2008 4 settembre 2008
Questo post potrebbe essere un buon esempio per la frase "nonna Insegnare a succhiare le uova" ... perchè questo è solo BASIC Stuff CSS. Ma per chi, come me la dimentico, questa potrebbe essere una benedizione sotto mentite spoglie. Ho sempre pensato (potrei perdere il mio lavoro per aver detto questo), era solo possibile mantenere una parte del contenuto della pagina HTML STATICO (significato, la sua posizione rimane AS Scroll Window), utilizzando alcuni script intelligenti, facendo tutte quelle scientifiche calcoli per trovare la posizione dinamica, intrappolando gli eventi Window.scroll e impostando timeout, ecc
Mai pensato che potrebbe così semplice .... Qui, nel CSS / HTML sottostante, ho quattro blocchi statici, uno fisso a ciascuno extrimities della pagina, Top, Right, basso e da sinistra ... inutile dire ... è possibile scegliere uno o più se ha bisogno di essere ...
CSS
. Static {display: block; z-index: 10; color: # FFFFFF; overflow-x: hidden; overflow-y: hidden; posizione: ixed;
}
Il contenuto # {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}
# T {wrap-top: 0px; background: # 33CC66; width: 100%, altezza: 55 pixel;}
# Wrap-l {top: 80px; background: # ff9966; height: 300px; width: 150px; border: 2px solid # e6e6e6;}
# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%, altezza: 55 pixel;}
# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6, a destra: 0;}
HTML
id="contents"> <div Voi principali contenuti della pagina </ div>
<div id="wrap-b" class="static">
Contenuto Statico sul fondo pagina
</ Div>
<div id="wrap-t" class="static">
Contenuto Statico in primo piano pagina
</ Div>
<div id="wrap-l" class="static">
Contenuto Statico nella pagina a sinistra
</ Div>
<div id="wrap-r" class="static">
Contenuto Statico a destra Pagina
</ Div>
Visualizza un campione wroking qui
non ci sono commenti | Tag: posizionamento CSS | posted in CSS , HTML
2008 2 Settembre 2008
Molte volte sentiamo il bisogno di scrivere specfic hack del browser (anche se non è una buona pratica, che gli sviluppatori dell'interfaccia utente devono ricorrere a questi mali fino a quando le grandi guerre browser tratta di una tregua). In precedenza, avevo accennato in questo articolo Per il vostro IE solo , come scrivere un frammento di codice CSS che sarebbe visibile per i browser IE <IE7 solo.
Ieri ho avuto un caso, dove volevo scrivere qualche FireFox specifica frammenti CSS. Bene! Non so se c'è un codice CSS per questo, ma c'è un HTML. C'è un fermo, però, questo pezzo di convalida HTML doesnot passaggio HTML. Ma, anywaz! Se sei bloccato male o in quanto tali, non hanno riguardo-per la convalida (a volte dobbiamo essere crudeli), è possibile utilizzare il seguente per dichiarare un collegamento a un foglio di stile FF solo o anche solo il codice CSS all'interno di questo blocco. Il codice è
<comment> Metti il tuo FireFox solo HTML / CSS / Scripts qui </ comment>
ad esempio
<comment>
<style>
/ * Stili per FF solo * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Comment>
I "felice per il momento ...
non ci sono commenti | tags: FF Bugs , Hacks FF , FF Issues | postato i difetti dei browser , i CSS e HTML , JavasScript
2008 15 marzo 2008
In diverse occasioni, mentre si fa layout di pagina con le divisioni popup / lightbox / Consigli ecc ci imbattiamo in situazioni in cui alcuni oggetti a SELECT capita di essere in queste divisioni POPUP, dal design e si vede attraverso .... YUK!
Bene! si potrebbe facilmente risolvere questo problema modificando le Z-INDEX valori in modo appropriato per FF e IE7. Ma il buon vecchio (gioco di parole) IE6 non si comporta come previsto .... Lo spettacolo BOX Selezionare tramite, anche dopo aver applicato alcuni drasticamente elevati valori di Z-INDEX al Division PopUp ... Bummer!!
Non ci sono soluzioni per questo problema, ma ci sono, credo, più che un modo che pochi al mondo del lavoro attorno a questo problema, ma Im qui per dirvi la soluzione più semplice che uso, che funziona bene per me, nella maggior parte dei casi ....
"Nascondere la casella ROUGE Selezionare quando si DIMOSTRARE IL POPUP"
Semplicemente nel frammento di script in cui si mostra il popup, aggiungere un pezzo di script per impostare la visibilità del Box SELECT per "Hidden"
document.getElementById ('my_select') style.visibilty = "hidden".;
E ricordatevi di impostare nuovamente la chiusura di vostra divisione PopUp
. document.getElementById ('my_select') style.visibilty = "visible";
dove "my_select" è l'ID del Box irritazione SELEZIONA
Spero che questo aiuti ...
PS. Ci sono altre opzioni come ofcourse dinamicamente positionining un IFRAME (stesse dimensioni di PopUp) sotto il DIV Popup ... Questo funziona bene anche, ma con l'aggiunta di carichi di elementi DOM, script e mal di testa. Ho usato questa soluzione anche, e se hai bisogno di aiuto con questa opzione, non fatemelo sapere. Sarà lieto di aiutarvi!
no comments | tags: bug di IE , le correzioni di IE e Hacks di IE , i Problemi IE e IE6 | posted in Quirks Browser , i CSS e HTML , JavasScript
