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 …
Checkboxes is probably one of the most frequently used form controls which come handy in dealing with one to many relationships. The multiple selective nature of HTML form checkboxes require a convenient way for PHP to process multiple checkbox values, ideally in a single array. By default, each and every HTML input control including checkboxes …
PHP: Checkbox Array in Form Handling – Multiple Checkbox Values in an Array Read More »
There’s a pure css drop down menu named SuckerFish published at ALA. Really straightforwardly clean code and simple drop menu script, however it might be friendlier for developers if it’s combined with the li:hover hack for IE6. The HTML: <ul id=”nav”> <li><a href=”#”>bodycare</a> <ul> <li><a href=”#”>lotions</a></li> <li><a href=”#”>creams</a></li> <li><a href=”#”>balms</a></li> <li><a href=”#”>butters</a></li> </ul> </li> <li><a …
HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced Read More »
IE 6 and lower versions of IE only implemented :hover for tag a. As per CSS 2.1 specification, all HTML tags / elements have :hover state so that when mouse pointer hovers over, different styles can be applied to them. li:hover is one of the frequent reasons why you need this hack. First, you have …
You had the <input type=”file” /> in place, however it just doesn’t seem to be uploading at all at the client side. After choosing a rather big file, the form submission and page reload finish in seconds, what’s wrong? Well, it’s almost certain that you have forgotten something. Try adding property enctype to <form>: <form …
CSS Sprites is a popular way to reduce image requests to the server and hovering lag to load another background image cased by network latency. Jenny has also devised a technique for foreground image CSS sprinting by Extending CSS Sprites which in essence bears all the merits of the original CSS Sprites method. Basic concept …
Extended CSS Sprites for Foreground Images <img> Read More »
Without using any javascript, this is the simplest way to make css hover works on tr and td in tables across browsers including IE. IE is known for not implementing generic hover effect for HTML tags other than <a>, however by the help of a bit of spice, we can make it to happen on …
Dustin Diaz made an interesting discovery to trigger “standards mode” with just a tiny little declaration instead of the regular lengthy one we see everywhere. As opposed to “standard mode“, there’s this “quirks mode” in IE that accommodates legacy HTML code of no standards at all — rendering them in many different ways compared with …
HTML DocType Text: World’s Tiniest and Shortest HTML DocType Declaration Read More »
If you are using tables entirely for page layout, I just have 2 tips for you. The first one is that: Don’t rely on rowspan or colspan. Especially on pages with potential to get rather long or wide by the help of some elongated table cell with rowspan or colspan. Things might very possibly go …
<center></center> as well as the property align=”center” used to be the tag that centers everything inside. However, it’s not the right way to do the centering in HTML at all. Let me show you the correct way in CSS to center something on the page. Let’s say you have a page wrapper that wraps a …
Correct (CSS) way to center a page element in HTML Read More »
As we all know that with a style rule of width or height, an element gains hasLayout in Internet Explorer and it triggers the IE proprietary rendering algorithm. Though this trick solves many weird problems in IE, especially IE6, it does come with a few issues as well. For example, when you need a top …
Elements with display:block and height gains 100% width and don’t float in IE6 Read More »
As I’m a mainlander Chinese, I can only speak for those computers and browsers who live in central P.R.China. If you are making a design for or in Mandarin Chinese, especially Simplified Chinese, beside those common English web safe fonts such as Arial and Verdana shipped in MS Windows by default that 95% mainlander Chinese …
