Tag Archive | HTML

Tutorial: Create ruler using Flexbox layout


Flexbox coming with CCS3 is an useful, handy way to do layouts in CSS. Learning using flexbox is pretty simple and you can find out a bunch of resource to learn this. In this post, I give a tutorial to apply flexbox to create ruler with pure HTML and CSS.

Plan ahead

Before getting started, we need to imagine and break down components needed to form a ruler. There are some you may think of:

  • Ruler board
  • Major sticks
  • Minor sticks
  • Value for major sticks

For example, we are going to create one like this:


We have 11 major sticks that go with 11 corresponding values. For each segment between 2 adjacent major sticks, there are 9 minor sticks or you can think there are actually 11, but the first and last one are hidden behind the major sticks.

Read More…

Metro Style CSS

Would you like metro style?

Left style

Right style

Read More…

Web Cache

While doing the project, I met a little problem that was really annoying in fact.

I had to manipulate XML document dynamically that was done by PHP. Everything worked well, the new data were written down XML document. When I had loaded the data from the XML document into HTML document immediately after manipulating them, however, the problem appeared. The new data was not as I had desired, it was still the old data. I tried to refresh the XML document in browser and it worked, I got the desired result.

In this case, there is something happened when I had loaded the XML document so it is necessary to refresh the XML document in other to get the desired result.

The something that I mentioned above is caching or web cache.

Read More…