2010 4 mars, 2010

Justera knappen med text

Eftersom radioknappen och texten är inline, så att texten kommer att anpassa sig till botten av radion knappen, kommer texten verkar vara något under alternativknappen.
Om du vill få dessa att anpassa sig till toppen, du måste placera radion och texten i separata behållare som Divar eller sträcker sig över (i förekommande fall) och de tar hand om inriktningen. Det skulle vara lättare att använda tabellceller också, din design kort tillåter det.

Detta kommer inte ser likadana ut i alla webbläsare, eftersom varje webbläsare visar radioapparater något annorlunda, så det finns alltid kommer att vara storlek frågor oavsett vad du gör.

inga kommentarer | Inlagd i Browser Quirks , HTML

2010 8 januari 2010

Vad kommer HTML5 medföra?

HTML5 är fortfarande ett utkast. När jag skriver, Arbete på HTML 5, som inleddes år 2004, fortfarande ges form av en gemensam ansträngning mellan W3C HTML WG och WHATWG . Ordet är att nästa generations HTML kommer att ha förbättringar och funktioner, vilket skulle ny struktur och semantik, formulärkontroller, API, multimedia taggar osv.

På enkel engelska ... Vad skulle det betyda för oss UI utvecklare ...

  • Det kommer dessutom av vissa strukturstöd taggar dvs. <article>, <sektion>, <header>, <aside> och <nav>, som skulle ersätta de flesta av <div> s används på en webbsida, vilket gör sidorna lite mer semantisk, men ännu viktigare, lättare att läsa.
    Hey! Tänk arbetet sparas i slutsatsen att en saknad nära DIV tagg.
    t.ex. 
  <body>
   <header> ... </ rubrik>
   <nav> ... </ nav>
   <article>
     <sektion>
       ...
     </ Sektion>
   </ Artikel>
   <aside> ... </ åt sidan>
   <footer> ... </ sidfot>
 </ Body>

Istället för 

  <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>
  • Med tillkomsten av ljud-och videoinnehåll som YouTube, användning av inbäddade multimedia på webbsidan har increaded med gånger. Med hänsyn till detta, nu är planen att lägga inbyggt stöd för att bädda in video och ljud i webbläsaren själva, och därför möjligt för användare att spela upp, pausa, stoppa, söka, och justera volymen med inbyggda DOM API: er för skript för att styra uppspelningen.

t.ex. 

  <video poster="poster.jpg">
     <Source src = "video.3gp" type = "video/3gpp"
     media = "handhållen">
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <Audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Ljud>
  • Bättre definierade semantiska roller för befintliga element för t. ex. <strong> och <em> kan nu faktiskt ha olika betydelser dvs de kommer att bete sig annorlunda.

Det finns många fler ändringar / uppgraderingar till nyare version ... Kommer att hålla uppdatera denna post som jag kommer tvärs några intressanta användbara sådana .... Titta på detta utrymme

Detta dokument får inte ge korrekt information som HTML 5 specifikationen är fortfarande aktivt i utvecklingen. Om du är osäker, kontrollera alltid HTML 5 specifikationen här .

1 kommentar | tags: | Inlagd i HTML-

2009 18 oktober 2009

HTML & XHTML

  • Dokumenttypsdeklarationen måste vara närvarande vid början av ett dokument som använder HTML-syntax. Det kan eventuellt användas inom XHTML-syntax, men det är inte nödvändigt. Den XHTML-dokument behöver inte inkludera DOCTYPE eftersom XHTML-dokument som levereras korrekt använder ett XML MIME-typ och behandlas som XML av webbläsare, alltid återges i något quirks mode.
  • I XHTML, taggnamn är skiftlägeskänsliga och definieras vanligen skrivas med gemener. I HTML är dock taggnamn är fallet okänsliga och kan skrivas i versaler eller gemener, men den vanligaste konventionen är att hålla med gemener. Fallet med start och slut-taggar behöver inte vara samma, men att vara konsekvent gör det renare kod utseende.

Fördelar med att använda HTML-

  • Bakåtkompatibel med befintliga webbläsare
  • Författarna är redan bekanta med syntaxen
  • Den milda och förlåtande syntax innebär att det inte blir någon användaren hostile " Yellow Screen of Death "om ett misstag glider genom
  • Bekväm stenografi syntax kan t.ex. författare utelämna vissa taggar och attributvärden

Fördelar med att använda XHTML

  • Strikt XML-syntax uppmuntrar författare att skriva välformulerade markup, som vissa författare kan finna enklare att underhålla
  • Integrerar direkt med andra XML-vokabulär, till exempel SVG och MathML
  • Tillåter användning av XML Processing, som vissa författare använder som en del av sin redigering och / eller processer publicering

Inga kommentarer | etiketter: | Inlagd i HTML , Web Developer

2009 24 mars 2009

Är avaktiverat = "true" och inaktiverade = "false" samma?

Detta sådana gamla skolan, men som vanligt är det mitt minne komplement ...
Så är avaktiverat = "true" och inaktiverade = "false" same? Ja
... Tro inte, bra! Thats hur det är ... här är några snabba förklaring ...
"Inaktiverad" är ett attribut av någon form inslag / område och därmed kan acceptera något värde genom sin natur.

Så länge detta attribut finns, kommer elementet inaktiveras oberoende av dess värde. för t.ex..
<input type="text" value="This är disabled" disabled>
<input type="text" value="This är disabled" disabled="disabled">
<input type="text" value="This är disabled" disabled="true">
<input type="text" value="This är disabled" disabled="false">

Alla ovanstående kommer att göra detta formulär fältet "funktionshindrad".

Helt enkelt inte ge attributet "Disabled" håller Field "nedsatt arbetsförmåga" ... som nedan

<input type="text" value="This inte disabled" />

Kom ihåg "Varje värde (eller inget värde alls) av de funktionshindrade attribut kommer webbläsaren att göra den funktionshindrad". För att hålla saker och ting klart för oss W3C rekommenderar att vi använder inaktiverat = "funktionshinder" i dessa situationer.

Det är skillnad men när vi använder detta attribut i JavaScript ...

document.form.element.disabled = true; / / elementet inaktiveras
document.form.element.disabled = false; / / elementet aktiveras

De ovan anförda argumenten gäller även för dessa attribut och element:

  • kontrolleras (radio knappen och rutan)
  • vald (tillval)
  • nowrap (TD)

1 kommentar | tags: | Inlagd i HTML , JavasScript

2008 17 december 2008

Vilseledande beter IE8: CSS-layout brott (Inriktning en webbläsarversion med metataggar i IE8)

Om du är css person skulle du känna till smärtan i att få dina layouter arbetar olika webbläsare. IE8 är ännu en käpp i hjulet för oss utvecklare. Anywaz! Om du träffar på denna fråga, som jag gjorde igår, där din perfekt fungerande CSS i IE7 (och tidigare) och Firefox har plötsligt började kasta vredesutbrott i IE8, prova det här ... Det fint verkade fixa mina problem för tillfället ....

Med Meta deklaration kan vi ange renderingsmotorn vi vill IE8 att använda. Så för att tvinga IE8 att göra så IE7 ... Infoga följande metatagg i huvudet på dokumentet: -

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

Som standard IE Meta skulle vara: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
vilket skulle göra IE8 göra sidan med hjälp av nya standards mode.

Om så krävs kan detta syntax kunna användas för att rymma för andra webbläsare enligt nedan:

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

MER om DOCTYPE:

Om du ännu inte känner till den typ av djur som kallas "Doctype" ... här är några snabba läs
Vad är DOCTYPE? Vilka är webbläsare Quirks och strikt läge?
Ställa in DOCTYPE i XSL

För en mer djupgående förståelse DOCTYPE, prova att besöka dessa länkar ...
A List Apart: Fixa din webbplats med rätt DOCTYPE!
A List Apart: Beyond DOCTYPE: webbstandarder, Forward kompatibilitet och IE8

Obs: Även om många av oss HTML / CSS människor har försumma vikten av DOCTYPE decleration i våra dokument, Inställning rätt DOCTYPE, är oftast svaret på de flesta cross webbläsaren frågor.

1 kommentar | tags: , och och och | Inlagd i Webbläsare Quirks och HTML

2008 4 oktober, 2008

Försvinner HTML / DIV element i Internet Explorer [IE]

Som vanligt, en av de många konstiga problem med IE och detta måste rankas i topp 10 i IE Quirks.

Problemformuleringen (Detta var mitt problem, kanske du har liknande misbehaviors):
Jag har många DIV finns i sidan med klassen "sectionhead", som bara är titeln på ett avsnitt på sidan. Så jag har lite stil ser ut så här

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

Div är en ljusgrå bar med lite svart text. Vad händer i IE är en del av dessa avsnitt huvuden visas ok, men en del är osynliga, tills du bläddra sidan eller klicka något på sidan etc. Någon gång de tenderar att försvinna när du klickar på "Alt-tangenten när du sida ned eller bläddra med rullningslisten. De verkar ibland igen när du laddar (F5) sidan. Jag kort helt enkelt DIV med några enkla stil fungerar BAD.
Vad som kan orsaka en sådan oberäkneligt beteende? Tja! Ärligt talat, ingen aning!!

MÖJLIG LÖSNING:
Återigen frågar mig inte varför, men i många fall detta problem tenderar att försvinna när du lägger position: i förhållande till MIS beter elementen stil, så här

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

Konstigt men vad man ska säga? Gud välsigne mig från IE!

OCH Delar MED OSS, om du hade liknande problem.

inga kommentarer | tags: och och och | Inlagd i webbläsare Quirks och CSS och HTML

2008 3 Oktober 2008

Enkel, Lätt, Cross Browser album för din webbsida

Inte för att det finns bara ett fåtal album är att du kan hitta när du google. Problemet med de flesta av de ljusbord som jag fann var att de alla verkade använda det ena eller andra tunga vikt ramar JavaScript som jQuery, Prototype MooTools och liknande. De är alla svala och flott söker. Men om ditt krav är "men jag vill ha en enkel och lätt Lightbox script för min sida", så här är det;

Några trevliga funktioner i ljusbord

  1. Mycket lätt
    en. 4KB av manus när packade (8 kb packas upp)
    b. 2 kb av CSS
    c. Få rader HTML för ljusbord behållaren
  2. Enkel att förstå och tillämpa
  3. Kan ha flera Ljusbord på samma sida.
  4. Samma ljusbord behållaren används för att visa, olika innehåll (som separat ingår som dolda divisioner i sidan), beroende på länken / alternativ som klickas.
  5. Automatiskt centreras, med hänsyn till alla faktorer såsom Fönster höjd och bredd (skärmupplösning), sidan bläddra belopp och höjden på innehållet i ljusbord
  6. Testad i IE 7 & FF

Visa Demo |
Ladda ner Lightbox Källa Zip (Nedladdat 1808 gånger)

Använda Lightbox [filerna i zip-filen]

jo.js och jo_pack.js [packat version]: - en enkel uppsättning JavaScript-objekt [JO], som innehåller element, fönster och dokumentera skript positionering. Du kan öppna JO.JS om du vill få händerna smutsiga med några avancerade Javascripting, skapa abstrakta funktioner, sträckande element egenskaper och liknande. Om du inte för mycket i Javascripting, låta bli.

lightbox.js, lightbox_pack.js [packad version] - innehåller ljus skript låda manager. Om du är sidkonstruktör ansvarar också med att genomföra ljusbord på sidan, måste du förstå LightBoxManager. LightBoxManager innehåller i princip bara två funktioner showLightBox och closeLightBox.

lightbox.css: - Om du vet CSS, kan du spela runt med lightbox.css för att anpassa utseendet-n-känner lightbox.css

index.html: Exempel genomförandet av ljusbord med två olika innehåll

lb_underlay_bkg.png: - Detta är lätt / lik genomskinlig bild som används bakgrunden till ljusbord underlaget [underlaget är lagret under lighbox, som hindrar användaren från att klicka någon annan enhet på sidan, medan ljusbord är öppen]. Man kan använda vilken bild eller en fast färg för detta ändamål, beroende på den sida konstruktion och kravet.

icon_lb_close.gif: - Bilden av nära ljusbord handtag högst upp till höger i ljuslåda. Kan använda valfri bild som per design

Visa Demo |
Ladda ner Lightbox Källa Zip (Nedladdat 1808 gånger)

Låt oss ha dina kommentarer och feedback ...

inga kommentarer | etiketter: , | Inlagd i CSS , Downloads , HTML , JavasScript , UI-komponenter

2008 4 sep 2008

Fasta (Det är fortfarande statiskt på fönstret scroll) Page block med CSS Endast

Detta inlägg kan vara ett bra exempel på frasen "Teaching mormor att suga ägg" ... Orsak här är bara grundläggande CSS Stuff. Men för dem, liksom omedvetna jag, kan det här vara en välsignelse i förklädnad. Jag har alltid trott (jag kan förlora mitt jobb för att säga detta), var det bara möjligt att hålla någon del av HTML-sidans innehåll statiska (mening, är dess position som IS på Fönster Scroll), med hjälp av några smarta manus, gör alla de vetenskapliga beräkningar för att hitta dynamiskt läge, fånga Window.scroll händelser och sätta timeout etc.

Trodde aldrig att det kunde så enkelt som det .... Här i CSS / HTML-koden nedan, jag har fyra statiska block, en fast till varje extrimities av sidan, upp, höger, botten och vänster ... onödigt att säga ... kan du välja en eller flera om så behövs ...

CSS
Statiska {display: block; z-index: 10; color: # FFFFFF; overflow-x: hidden; overflow-y: hidden; position: ixed;
}
# Innehållet {margin: 100px 150px 0px 160px; kant: 1px solid # e6e6e6}

# Wrap-t {top: 0px; Bakgrund: # 33CC66, bredd: 100%, höjd: 55 bildpunkter;}

# Wrap-l {top: 80px; Bakgrund: # FF9966, höjd: 300px; width: 150px; kant: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; Bakgrund: # 3333CC, bredd: 100%, höjd: 55 bildpunkter;}

# Wrap-r {top: 80px; Bakgrund: # 6666FF, höjd: 300px; width: 140px; kant: 2px solid # e6e6e6, höger: 0;}

HTML
<div id="contents"> Du startsidan innehållet </ div>
<div id="wrap-b" class="static">
Statiskt innehåll på sidan längst ner
</ Div>
<div id="wrap-t" class="static">
Statiskt innehåll på sidan Överst
</ Div>

<div id="wrap-l" class="static">
Statiskt innehåll på sidan till vänster
</ Div>
<div id="wrap-r" class="static">
Statiskt innehåll på sidan till höger
</ Div>

Visa en wroking prov här

Inga kommentarer | etiketter: | Inlagd i CSS , HTML

2008 2 sep 2008

CSS hack: Javascript, CSS, HTML för endast Firefox

Många gånger har vi känner behov av att skriva webbläsaren specfic hacka (även om det inte är en god praxis, vi UI utvecklare måste ta till sådana onda tills den stora Webbläsare Wars kommer till ett stillestånd). Tidigare hade jag nämnde i artikeln För din IE endast , hur man skriver en CSS utdrag som skulle vara synlig för IE-webbläsare <IE7 bara.

Igår hade jag ett fall, där jag ville skriva något FireFox specifika CSS snippets. Tja! Jag är inte säker på om det finns en CSS-koden för den här men det finns en HTML. Det finns en hake, detta stycke HTML-doesnot pass HTML validering. Men, anywaz! Om du har fastnat dåligt eller som sådant, har ingen fråga för validering (någon gång måste vi vara grym), kan du använda följande för att förklara en länk till en FF enbart stilmall eller bara koda CSS inom detta block. Koden är

<comment> Sätt din FireFox bara HTML / CSS / Scripts här </ kommentar>

t.ex.
<comment>
<style>
/ * Stilar för FF enbart * /
fieldset {border: 1px solid # DDDDDD;}
</ Style>
</ Kommentar>

I "glad för tillfället ...

inga kommentarer | tags: , , | Inlagd i webbläsare Quirks och CSS och HTML , JavasScript

2008 15 mars 2008

Irriterande Välj Boxes synliga genom Popup sektionerna

Vid flera tillfällen medan du gör sidlayouter med popup divisioner / lightboxar / tips etc vi kommer i situationer där någon form Markera objekt råkar vara under dessa POPUP sektionerna, genom design och det märks genom att .... FY!

Tja! du kan enkelt fixa detta genom att justera dina Z-index värden på lämpligt sätt för FF och IE7. Men Good Old (pun intended) IE6 inte beter sig som avsett .... SELECT BOX lyser igenom även när du har några drastiskt höga z-index värden enligt PopUp Division ... Bummer!!

Det finns INGA korrigeringar för detta problem, men det finns, tror jag, mer än ett fåtal sätt att arbeta-runt detta problem, men Im här för att berätta den enklaste lösningen som jag använder, som fungerar bra för mig, i de flesta fall ....

"Dölj ROUGE SELECT BOX när du visar POPUP"

Bara i skriptet textsnutt där du visar din popup, lägg till en bit skript för att ställa in synlighet för SELECT Box till "Hidden"

document.getElementById ('my_select) style.visibilty = "dold".

Och kom ihåg att sätta på den igen slutet av din popup Division

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

där "my_select" är ID för den irritation SELECT Box

Hoppas att detta hjälper ...

PS. Det finns såklart andra alternativ som dynamiskt positionining en IFRAME (samma storlek som du PopUp) under Popup DIV ... Detta fungerar bra också, men med ett tillägg av massor av DOM element, manus och huvudvärk. Jag har använt denna lösning också, och om du behöver någon hjälp med det här alternativet, låt mig veta. Kommer vara glad att hjälpa till!

inga kommentarer | tags: och och och och | Inlagd i webbläsare Quirks och CSS och HTML , JavasScript

NDK hem | Att uttrycka IT | uttrycka Palate | uttrycka Penmenship | uttrycka Awe | uttrycka mig