2008 15. März 2008

Reizt Auswahlboxen sichtbar durch die Pop-up-Divisionen

Bei verschiedenen Gelegenheiten, während Sie Seitenlayouts mit Popup-Divisionen / Leuchtkästen / Tipps etc wir über Situationen, in denen einige Formular SELECT Objekte geschieht unter diesen Divisionen POPUP sein, durch Design und es zeigt, durch zu kommen .... YUK!

Na ja! Sie könnte leicht beheben, indem eine entsprechende Einstellung Ihrer Z-Index-Werte angemessen für FF und IE7. Aber Good Old (Wortspiel beabsichtigt) IE6 verhält sich nicht wie vorgesehen .... Die SELECT-BOX Show durch, auch nachdem Sie einige drastisch hohe Z-Index-Werte gelten für Ihren PopUp-Division ... Bummer!!

Es gibt keine Updates für dieses Problem, aber es gibt, glaube ich, mehr als ein paar Weg zur Arbeit-um dieses Problem, aber im hier, und sagen Sie die einfachste Lösung, die ich benutze, der gut arbeitet für mich, in den meisten der Fälle ....

"Hide the ROUGE SELECT-BOX Wenn Sie den Listenpfeil SHOW"

Einfach in Ihrem Skript-Schnipsel, wo Sie Ihren Popup zeigen, fügen Sie ein Stück Skript, um die Sichtbarkeit der SELECT-Box auf "Unsichtbar" eingestellt

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

Und denken Sie daran, um sie wieder beim Schließen von PopUp-Division

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

wo "my_select" ist die ID der Reizung SELECT-Box

Hope this helps ...

PS. Es gibt ofcourse andere Optionen wie ein IFRAME dynamisch positionining (gleiche Größe wie Sie PopUp) unter dem Popup-DIV ... Das funktioniert gut, auch, aber mit einem Zusatz von Lasten von DOM-Elementen, Skripte und Kopfschmerzen. Ich habe diese Lösung auch verwendet und wenn Sie Hilfe brauchen mit dieser Option, lass es mich wissen. Gerne helfen!


2008 14. März 2008

Best Practices für ein UI-Entwickler

Für Alter, ich denke, alle Best Practices zu festigen, habe ich gelesen, hin und wieder. Endlich! Ich wollte runter, um es zu Pen gesetzt. Ich erkannte, dass es wird Mammutaufgabe Schaffung dieses Mammut-Dokument sein, also beschloss ich, eine ganze Kategorie, um es zu weihen, so konnte ich halten beim Erstellen über die besten Praktiken, wie und wann ich ihnen begegnen ...

Na ja! Der Inhalt hier wird ein Zusammenschluss von meiner persönlichen UI-Entwicklung Best Practices mit den von den Standard-Entwickler wie Yahoo, Google usw. geschrieben sein

Watch this space und halten Sie die durchsucht werden Best Practices Kategorie


2008 11. März 2008

Was sind CSS-Resets?

Ein CSS-Reset / CSS sind eine Reihe von Element Stile zu einer bestimmten Baseline, die Konsistenz schafft über verschiedene Browser eingestellt.

Wir alle waren der durch die Alpträume des Schreibens Cross-Browser CSS zu. Also, wenn wir schriftlich unsere CSS beginnen, ist es eine Praxis zu setzen es zuerst zu entfernen / zurücksetzen keine Cross-Browser-Inkonsistenzen. CSS-Resets, sind einfach paar Zeilen CSS, dass Sie Ihre CSS beginnen mit, was Ihnen eine saubere Basis zu beginnen, Ihre auf.

Die CSS setzt, dass ich in der Regel dazu neigen, verwenden sieht wie folgt aus

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-weight: normal;
}


Setzen Sie den Browser Schriftgröße
Beachten Sie auch die Reset-Browser, die Schriftgröße in der folgenden Zeile angewendet wurde ...

html {font-size: 76%;}

Die obige CSS setzt den Browser Schriftgröße auf 10 Pixel, und dies macht es möglich, mit relativen Schriftgrößen (das ist jede wichtige aus einer WAI Konformität prespective) arbeiten
Für z. B. in der folgenden Definition, ist font-size in einer Spannweite bis 10 Pixel, und dass in der paragarph ist auf 14 Pixel gesetzt ...

span {font-size: 1em;}
p {font-size: 1.4em;}


NDK Hause | Ausdruck ihrer IT | Ausdruck Gaumen | Penmenship Ausdruck | Ausdruck Awe | mich auszudrücken