WordPress does a great job in smoothing the user experience of the blog administration control panel. Ever wonder how they have styled all those buttons with such touchy appearance? Well the originator is the man in blue: button { border-left: 3px double #CCCCCC; border-right: 3px double #999999; border-top: 3px double #CCCCCC; border-bottom: 3px double #999999; …
CSS: Styling WordPress Administration Control Panel Buttons Read More »
If you are determined to make your site comply with the latest provisions in the accessibility code, you may find it’s a pain in the ass to check point by point against the checklist of WAI (Web Accessibility Initiative) and Section 508. Yep, it sure is with so many check points for your web page …
Validate and Check Your Site’s Accessibility against WAI (WCAG) and Section 508 Read More »
Semantics is the study and practice of introducing meaning to markups, enabling computers to better understand human language. In real world, it is much more than just academics and web standards. Google crawlers and ranking calculators are just the sort of computers dealing with large chunks of text data everyday, reading and analyzing millions of …
Semantic HTML Table Checklist – For The Sake of SEO! Read More »
Just for the sake of code separation and software development paradigms, a lot of web designers and front end developers are tempted to break the CSS styling into a group of separated files based on function. Yours might look like: layout.css typography.css colors.css widget.css While this might look professional at the first glance and generally …
As we all know, HTML tables have a way to distinguish between columns and groups of them to do things about them and that is the COL tag and the COLGROUP tag. They pretty much have exactly the same set of available attributes – they are almost identical except for the names they are born …
What is HTTP in all the web site URLs / web page addresses you see everywhere online? HTTP Explained: Just like people communicate with each other following certain protocols, HTTP is the protocol between the client (your computer using web browsers) and the server (web server serving web pages and similar online resources). So what …
HTTP Explained: What Does HTTP Stand For, What is HTTP Meaning and HTTP’s Definition? Read More »
As a result of the failure of IE (IE6 and IE7) browsers to implement the border-spacing CSS property for HTML tables. The mere CSS rules below: border-spacing:2px; border-collapse:separate; /* border-spacing will be ignored should border-collapse:collapse;*/ Have no effect of widening the cells distance on IE. To enable border spacing and cells gap, you will not …
Cross browser compatible HTML table cellspacing and CSS border-spacing property Read More »
What does an alphabet have for us to style? It’s no more than a list of 26 single-letter items! Yep. But wait until you have seen this alphabet of 26 letters author index. Now do you want to know how to achieve that? I coded it quite a while back and it just occurred to …
Styling an Alphabet of 26 Letters in HTML and CSS Read More »
In HTML 4.01, you can directly change the size of table via HTML properties width and height instead of controlling them by CSS styles. Table Size The overall size of a table is determined by the width and height of it. For example, to set table width as 400 pixels and table height as 150 …
HTML Table Size — Control and Change the Size of Table and Table Cells Read More »
Web Content Accessibility Guidelines (WCAG) 2.0 is the Bible of web developers who are responsible for HTML templating and independent content authors who are eager to reach the biggest audience possible. However, if you think that’s just for the sake of that, accessibility, think again. WCAG is way more than just accessibility, it’s also the …
There used to be an HTML way to center align things such as texts, images or other contained elements. For the sake of semantic markup, let’s forget about it from here. CSS is the only correct way to align things such as texts and images center now. To center align a paragraph or an image, …
CSS: Align Center — Center Align Texts or Images in HTML and CSS Read More »
Yeah, well, I know, I just wrote a quick post for those who don’t know how to align text left in HTML. Silly. Now comes a redundant one for those who don’t know how to align text right in HTML and CSS. [Someone from beyond the web page and monitor screen throws me a tomato: …
CSS: Align Right — Make text or image aligned right in HTML page Read More »
Believe it or not, though this is rather basic in CSS, someone just poked on Gtalk to ask how he could align a paragraph left in HTML as he could in Word. Here goes a quick post for the solution: p {text-align:left;} /* a generic styling rule for all p tags to align inner text …
CSS: Align Left — Make text or image aligned left with CSS Read More »
Putting text over image or pictures is a good way to give simple title information to that image or declare copyrights without tampering with the image itself. Real texts on an image with CSS This lovely image gladly demonstrates how I (this text) can be flying over her face. It’s very kind of her but …
CSS: Text over Image – Add Text Caption to Images Read More »
CSS itself is an important part of web page design, but just the bone of it. Without pictures and photos, CSS is not more than just paragraphs of texts. To embed a picture or photos of yours in background, you need a simple CSS rule: background. Say you have a nice picture named mypic.jpg that …
Populating a drop down list control <select> from a php array is easy, the following function would do it with a breeze. Assuming an array of IT companies: $companies = array( ‘Microsoft’ => 1, ‘Google’ => 2, ‘Apple’ => 3 ); Feed it as a parameter to the php function below: function generateSelect($name = ”, …
In pure CSS solutions, a double border can be achieved via either a combination of single borders or a single double border style. 2 single borders The HTML: <div class="wrap-1"> <div class="wrap-2"> </div> </div> The CSS: .wrap-1 { border:1px solid blue; padding:1px; /* how far away 2 borders are drawn, remove this line to make …
If you are going to make part of the page totally transparent, there are essentially 3 CSS ways to achieve element transparency: opacity:0 (needs 2 more hacks for different browsers) visibility:hidden display:none Bob, the man! Let me take the example of Bob sitting in a chair to explain how these styles are different from each …
CSS: Difference between opacity:0, visibility:hidden and display:none Read More »
Let’s face it, the native implementations of file uploading control of HTML form is ugly, throughout most of the browsers, and not consistent at all. Plus, <input type=”file” … /> just doesn’t play by quite a few of the CSS input styling rules such as border and background, making it a even bigger challenge. Now …
CSS: Styling File Upload / Select Input Control <input type="file" … /> Read More »
Consider a PSD wordpress theme design with a blog post title like this: Apparently there’s a whole image background on the page instead of a solid color wherein the page title falls into, making the situation a little more complicated. Because if it’s just a solid color, I can simply do the following to achieve …
