2010 4 marts 2010

Justering alternativknappen med tekst

Da radio-knappen og teksten er inline, så teksten vil bringe sig i bunden af ​​radio knappen, vil teksten synes at være lidt under radioknappen.
Hvis du ønsker disse for at tilpasse til toppen, er du nødt til at placere radioen og teksten i separate beholdere som divs eller spænder over (efter behov), og de vil tage sig af justeringen. Det ville være nemmere at bruge tabelceller også af dit design kort tillader det.

Dette vil ikke se det samme i alle browsere, som alle browsere viser radioer lidt anderledes, så der altid kommer til at blive størrelse spørgsmål uanset hvad du gør.

ingen kommentarer | Posted in Browser Quirks , HTML

2010 8 januar 2010

Hvad vil HTML5 medbringe?

HTML5 er stadig et udkast. Som jeg skriver, Arbejdet med HTML 5, som blev påbegyndt i 2004, er stadig får form af en fælles indsats mellem W3C HTML WG og WHATWG . Ordet er, at den næste generation HTML vil have forbedringer og funktioner, hvilket ville nye struktur og semantik, formular-kontroller, API'er, multimedia tags mv.

I simple engelsk ... Hvad ville det betyde for os UI udviklere ...

  • Der vil tilsætning af en vis strukturel tags dvs. <article>, <section>, <header>, <aside>, og <nav>, som ville erstatte hovedparten af <div> s bruges på en webside, der gør dine sider en smule mere semantisk, men endnu vigtigere, lettere at læse.
    Hey! Tænk indsatsen gemt i at finde, at en manglende tæt DIV tag.
    fx 
  <body>
   <header> ... </ header>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Afsnit>
   </ Artiklen>
   <aside> ... </ side>
   <footer> ... </ footer>
 </ Body>

I stedet for 

  <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 fremkomsten af ​​lyd-og videoindhold som YouTube, brug af indlejrede multimedia på websiden er stadigvæk flere af gange. Under hensyntagen til dette, nu er det planen at tilføje understøttelse af indlejring video og lyd ind i selve browseren, og dermed giver brugerne mulighed for at afspille, pause, stop, søge, og justere lydstyrken ved hjælp af indbyggede DOM API'er til scripts til at styre afspilningen.

fx 

  <video poster="poster.jpg">
     <Kilde src = "video.3gp" type = "video/3gpp"
     medier = "håndholdt">
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio>
  • Bedre definerede semantiske roller for eksisterende elementer for f.eks. <strong> og <em> kan nu rent faktisk har forskellige betydninger sige, at de vil opføre sig anderledes.

Der er mange flere ændringer / opgraderinger til nyere version ... Vil holde opdatere denne post som jeg kommer accross eventuelle interessante nyttige dem .... Se dette rum

Dette dokument må ikke give præcise oplysninger som HTML 5 specifikation er stadig aktivt i udvikling. Når du er i tvivl, skal du altid tjekke HTML 5 specifikationen her .

1 kommentar | tags: | Posted in HTML

2009 18 oktober 2009

HTML & XHTML

  • Dokumenttype erklæring skal være til stede ved begyndelsen af ​​et dokument, der bruger HTML-syntaks. Det kan eventuelt anvendes i XHTML syntaks, men det er ikke påkrævet. Den XHTML-dokument behøver ikke at medtage DOCTYPE fordi XHTML dokumenter, der er leveret korrekt ved hjælp af en XML-MIME-type og behandles som XML af browsere, er altid gengives på nogen særheder tilstand.
  • I XHTML er mærkenavne, store og små bogstaver og er normalt defineret til at være skrevet med små bogstaver. I HTML, men tag navne er store og små bogstaver og kan skrives i alle store eller små bogstaver, men den mest almindelige konvention er at holde med små bogstaver. Sagen om start og slut tags behøver ikke at være den samme, men at være konsekvent gør koden udseende renere.

Fordele ved at benytte HTML

  • Bagudkompatibel med eksisterende browsere
  • Forfattere er allerede bekendt med syntaksen
  • Den milde og tilgivende syntaks betyder, at der vil være nogen bruger-fjendtlige " Gul Screen of Death ", hvis en fejl ved et uheld slipper gennem
  • Praktisk stenografi syntaks, kan fx forfattere udelade nogle tags og attributværdier

Fordele ved at benytte XHTML

  • Streng XML syntaks opfordrer forfatterne til at skrive velformede markup, som nogle forfattere kan finde nemmere at vedligeholde
  • Integrerer direkte med andre XML-ordlister, såsom SVG og MathML
  • Tillader brug af XML Processing, som nogle forfattere bruger som en del af deres redigering og / eller publicering processer

ingen kommentarer | tags: | postet i HTML , Web Developer

2009 24 marts, 2009

Er deaktiveret = "true" og deaktiveret = "false" det samme?

Dette dem gamle skole, men som sædvanlig det er min hukommelse supplement ...
Så er deaktiveret = "true" og deaktiveret = "falsk" samme? Ja
... Tro ikke, vel! thats den måde er det ... her er nogle hurtig forklaring ...
"Deaktiveret" er en egenskab af enhver form element / feltet, og dermed kan acceptere nogen værdi af sin natur.

Så længe denne egenskab er til stede, vil elementet deaktiveres uafhængigt af dens værdi. til f.eks.
<input type="text" value="This er disabled" disabled>
<input type="text" value="This er disabled" disabled="disabled">
<input type="text" value="This er disabled" disabled="true">
<input type="text" value="This er disabled" disabled="false">

Alle ovenstående vil gøre denne formular feltet "deaktiveret".

Simpelthen ikke give attributten "Disabled" holder Field "ABLED" ... som nedenfor

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

Husk "Enhver værdi (eller ingen værdi overhovedet) af handicappede attribut, vil browseren gøre det deaktiveret". For at holde tingene klart i vores sind W3C anbefaler, at vi bruger deaktiveret = "handicappede" i disse situationer.

Dette er forskel men når vi bruger denne attribut javascript ...

document.form.element.disabled = true; / / det element vil blive deaktiveret
document.form.element.disabled = false; / / det element vil blive aktiveret

Ovenstående argumenter er også gælder for disse attributter og elementer:

  • kontrolleres (alternativknappen og afkrydsningsfelt)
  • valgt (option)
  • nowrap (td)

1 kommentar | tags: | Posted in HTML , JavasScript

2008 17 december 2008

Vildledende opfører IE8: CSS layout brud (Målretning af en browser version ved at bruge meta-tags i IE8)

Hvis du er css person, ville du vide smerten i at få dine layout arbejder cross-browser. IE8 er endnu en kæp i hjulet for os udviklere. Anywaz! hvis du rammer ved dette problem, ligesom jeg gjorde i går, hvor din perfekt arbejde CSS i IE7 (og tidligere) og Firefox har pludselig begyndte at kaste tantrums i IE8, så prøv denne ... det pænt syntes at løse mine problemer i øjeblikket ....

Ved hjælp af Meta erklæring, kan vi specificere rendering engine vi gerne IE8 til at bruge. Så for at tvinge IE8 at gøre som IE7 ... Indsæt følgende metatag i hovedet af dit dokument: -

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

Som standard IE Meta ville være: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
som vil gøre IE8 gøre siden ved hjælp af nye standarder mode.

Hvis det er nødvendigt, kunne denne syntaks bruges til at rumme for andre browsere som nedenfor:

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

MERE Om DOCTYPES:

Hvis du endnu ikke kender til den slags dyr kaldes "doctype" ... her er nogle hurtig læst
Hvad er DOCTYPES? Hvad er BROWSER Quirks & Streng tilstand?
Indstilling af DOCTYPE i XSL

For en mere dybtgående forståelse DOCTYPES, kan du besøge disse links ...
A List Apart: Fix dit websted med højre DOCTYPE!
A List Apart: Beyond DOCTYPE: webstandarder, Fremad kompatibilitet og IE8

Bemærk: Selvom mange af os, HTML / CSS mennesker er blevet negligerer vigtigheden af ​​DOCTYPE decleration i vores dokumenter, Indstilling af højre DOCTYPE, er normalt svaret på de fleste cross browser spørgsmål.

1 kommentar | tags: , og og og | Posted in Browser Quirks og HTML

2008 4 Oktober 2008

Disappearing HTML / DIV elementer i Internet Explorer [IE]

Som sædvanlig. En af de mange nogle mærkelige problemer med IE, og det må man rangerer i top 10 i IE Quirks

PROBLEM ERKLÆRING (Dette var mit problem, måske du har lignende dårlig opførsel):
Jeg har mange DIV er på siden med klassen "sectionhead", der er intet, men titlen på en sektion på siden. Så jeg har nogle stil ser ud som denne

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

Det div er en lys grå bar med noget sort tekst. Hvad der sker i IE er nogle af disse sektionsoverskrifter vises ok, men nogle er usynlige, indtil du rulle siden eller klik noget på siden osv. Engang de har tendens til at forsvinde, når du klikker på 'alt', når du side ned eller rulle med scroll-bar. De tider synes at igen, når du genindlæse (F5) på siden. Jeg kort ganske enkelt DIV med nogle enkle stil opfører BAD.
Hvad kunne skabe en sådan en uberegnelig adfærd? Nå! Helt ærligt, NO IDEA!

MULIG LØSNING:
Igen spørg mig ikke hvorfor, men i mange tilfælde dette problem tendens til at forsvinde, når du tilføjer position: i forhold til mis opfører elementer stil, som dette

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

Weird, men hvad jeg skal sige? Gud velsigne mig fra IE!

OG deler med USA, hvis du havde lignende problemer.

ingen kommentarer | tags: og og og | Posted in Browser Quirks og CSS og HTML

2008 3 Oktober 2008

Enkel, Let, Cross Browser Lysbord til din webside

Ikke at der kun er et par LightBox s, som du kan finde, når du google. Spørgsmålet med de fleste af de lightboxer, som jeg fandt var, at de alle syntes at bruge den ene eller de andre tunge vægt JAVASCRIPT rammer som jQuery, Prototype, Mootools og lignende. De er alle cool og swanky søger. Men hvis dit krav er "men jeg ønsker en ENKEL OG LET LightBox SCRIPT til min side", så her er det;

Nogle gode funktioner i denne lightbox

  1. Meget lys
    en. 4KB af scripts, når pakket (8 kb udpakket)
    b.. 2 kb af CSS
    ca. Par linjer i HTML til lightbox container
  2. Nem at forstå og implementere
  3. Kan have flere lightboxer på den samme side.
  4. Det samme lightbox container bruges til at vise, forskelligt indhold (der er separat indgår som skjulte afdelinger i siden), afhængigt af linket / option, der er klikket.
  5. Automatisk centrerer sig, idet der tages hensyn til alle faktorer, såsom vinduets højde og bredde (skærmopløsning), side rulle mængde og højden af ​​indholdet af lightbox
  6. Testet i IE 7 og FF

Se demo |
Hent Lysbord Kilde Zip (Downloaded 1806 gange)

Brug af Lysbord [filer i zip-filen]

jo.js og jo_pack.js [pakket version]: - et simpelt sæt af JavaScript-objekter [JO], som indeholder elementer, vindues-og dokument positionering scripts. Du kan åbne JO.JS hvis du ønsker at få dine hænder beskidte med nogle Advanced Javascripting, skaber abstrakte funktioner, der strækker sig element egenskaber og sådan. Hvis du ikke for meget i Javascripting, Lad det alene.

lightbox.js, lightbox_pack.js [pakkede version]: - indeholder Lyserammen leder scripts. Hvis du er sidedesigneren, også er ansvarlig med at gennemføre lightbox på siden, er du nødt til at forstå LightBoxManager. LightBoxManager grundlæggende indeholder kun to funktioner showLightBox og closeLightBox.

lightbox.css: - Hvis du kender CSS, kan du lege med lightbox.css at tilpasse udseendet-n-feel lightbox.css

index.html: Prøve gennemførelse af lightbox med to forskelligt indhold

lb_underlay_bkg.png: - Det er let / simi gennemsigtigt billede, der bruges baggrunden for lightbox underlaget [underlag er laget under lighbox, der forhindrer brugeren i at klikke på en anden enhed på siden, mens lightbox er åben]. Du kan bruge ethvert billede eller en farve til dette formål, afhængigt af sidedesign og krav.

icon_lb_close.gif: - Billedet for tæt lightbox håndtag øverst til højre af lyskassen. Kan bruge et billede pr design

Se demo |
Hent Lysbord Kilde Zip (Downloaded 1806 gange)

Lad os få dine kommentarer og feedback ...

ingen kommentarer | tags: , | Posted in CSS , Downloads , HTML , JavasScript , UI-komponenter

2008 September 4, 2008

Fast (Det forbliver statisk på vindue rulle) Side Blokke bruger CSS Kun

Dette indlæg kan være et godt eksempel for udtrykket "Teaching bedstemor til at suge æg" ... Fordi det er bare BASIC CSS Stuff. Men for dem, som glemmer mig, kan dette være en velsignelse i forklædning. Jeg har altid troet (jeg kunne miste mit job for at sige det), var det kun muligt at holde en del af HTML-sidens indhold statisk (mening, sin stilling stadig er det på Window Scroll), ved hjælp af nogle smarte scripts, gør alle de videnskabelige beregninger for at finde en dynamisk position, fældefangst Window.scroll begivenheder og sætte timeouts osv.

Aldrig troet, det kunne så simpelt som dette .... Her i CSS / HTML nedenfor, jeg har fire statiske blokke, den ene fastgjort til hver extrimities på siden, til TOP, højre og bund og venstre ... overflødigt at sige ... du kan vælge et eller flere hvis der skal være ...

CSS
. Statisk {display: block; z-index: 10, farve: # ffffff; overflow-x: hidden; overløb-y: hidden; position: ixed;
}
# Indhold {margin: 100px 150px 0px 160px; kant: 1px solid # e6e6e6}

# Wrap-t {top: 0px; baggrund: # 33CC66, bredde: 100%; Højde: 55px;}

# Wrap-l {top: 80px; baggrund: # FF9966; højde: 300px; bredde: 150px; kant: 2px solid # e6e6e6;}

# Wrap-b {bund: 0px; baggrund: # 3333CC, bredde: 100%; Højde: 55px;}

# Wrap-r {top: 80px; baggrund: # 6666FF; højde: 300px; bredde: 140px; kant: 2px solid # e6e6e6, højre: 0;}

HTML
<div id="contents"> Du forsiden indhold </ div>
<div id="wrap-b" class="static">
Statisk indhold på side nederst
</ Div>
<div id="wrap-t" class="static">
Statisk indhold på toppen Tilbage
</ Div>

<div id="wrap-l" class="static">
Statisk indhold på side til venstre
</ Div>
<div id="wrap-r" class="static">
Statisk indhold på side til højre
</ Div>

Se en Kløveretning prøve her

ingen kommentarer | tags: | Posted in CSS , HTML

2008 2 sep 2008

CSS hack: Javascript, CSS, HTML for kun Firefox

Mange gange vi føler behov for at skrive browser specfic hacks (selvom det ikke er en god praksis, vi UI udviklere er nødt til at ty til sådanne onder, indtil de store browsere Wars kommer til en våbenhvile). Tidligere havde jeg nævnt i denne artikel for din IES Kun , hvordan man skriver en CSS snippet, der ville være synlig for IE browsere <IE7 kun.

I går havde jeg en sag, hvor jeg ønskede at skrive nogle FireFox specifik CSS snippets. Nå! Jeg er ikke sikker på, hvis der er en CSS kode for dette, men der er en HTML. Der er en fangst dog dette stykke HTML doesnot pass HTML validering. Men, anywaz! Hvis du sidder fast dårligt eller som sådan, har ingen forbindelse til validering (engang vi nødt til at være grusom), kan du bruge følgende til at erklære et link til en FF kun stylesheet eller bare kode CSS inden for denne blok. Koden er

<comment> Sæt din FireFox kun HTML / CSS / Scripts her </ comment>

fx
<comment>
<style>
/ * Styles til FF kun * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Comment>

I "m glad for øjeblikket ...

ingen kommentarer | tags: , , | Posted in Browser Quirks og CSS og HTML , JavasScript

2008 15 marts 2008

Irriterende Vælg Boxes synlige gennem Popup divisioner

Ved flere lejligheder, osv., mens laver sidelayout med popup afdelinger / lightboxer / Tips, vi kommer på tværs af situationer, hvor nogle Form Markere objekter sker for at være under disse POPUP divisioner, ved design, og det skinner igennem .... YUK!

Nå! du kan nemt løse dette ved at justere dine Z-indeksværdier passende til FF og IE7. Men den gode gamle (pun intended) IE6 ikke opfører sig efter hensigten .... SELECT BOX showet igennem, selv når du anvender nogle drastisk høj Z-indeksværdier til din popup Division ... Øv!!

Der er INGEN rettelser til dette problem, men der er, tror jeg, mere end et par måde at arbejde-around dette problem, men Im her for at fortælle dig den enkleste løsning, som jeg bruger, som virker fint for mig, i de fleste af de sager ....

"Skjul ROUGE SELECT felt, når du viser POPUP"

Blot i dit script kodestykke hvor du viser din popup, tilføje et stykke script til at indstille synligheden af ​​SELECT Box til "Hidden"

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

Og husk at sætte det tilbage ved lukning af din popup Division

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

hvor "my_select" er ID'et for den irritation SELECT Box

Håber dette hjælper ...

PS. Der er ofcourse andre muligheder som dynamisk positionining en IFRAME (samme størrelse som du PopUp) under popup DIV ... Dette virker også godt, men med en tilføjelse af masser af DOM-elementer, scripts og hovedpine. Jeg har brugt denne løsning også, og hvis du har brug for hjælp med denne indstilling, lad mig det vide. Vil være glad for at hjælpe!

ingen kommentarer | tags: og og og og | Posted in Browser Quirks og CSS og HTML , JavasScript

NDK hjem | Udtrykke IT | udtrykke Smag | udtrykke Penmenship | udtrykke Awe | udtrykke mig