kaqi

Problem: The <pre> tag of html is used to keep the format of the content as it is inputted. So, if the content is a long line of text with no line break, then it will displayed as one line an...

Problems: Two pages have similar elements structure but with different style themes. Or in the same page, we want to apply different style according to the user's preference. Solution: One ...

Problems : For the common style. we would like to let it applied as far as possible instead of add a the style for each child element.   Try it with jsfiddle

Problems: Some elements has an attachment element. This attachment can show and hide. When it is shown, it should be on the top But it won't affect the position of the elements afterwards. For ex...

Problems: We need a navigation on most of the web pages. We can use <ul> and <li> to set the items of the navigation. There are many navigation style. Here, I just give an example to sh...

Problems: Floated elements would keep align one after another. There are two situations that we may need to clear floated element. 1. We need to clear the previous floated elements and start fro...

Problem: Suppose we need to display a datalist in two columns, each column fills one half of the width, with a fixed pixels of margin between the two columns though. Because it is a datalist, we w...

Problem: We have a container element with % to define the width. In the container, we need to display another element that fullfills this container. The conained element need some border or padding...

  Problem: We usually put a red star after a field to indicate that this field is required. Of course, we can add a '*' and apply css on it. But it is really unconvenient to do so on everywhere. F...

Problem: The vertically neighbouring margins will be merged if they are not seperated by border or padding. The final margin pixels is the biggest one among them. This is a feature of css that we...

Problems: We want to display something like this. The container has an image arrow on the right. The content text length is undetermined.   Solution: We can resort to background to display ...

The page does not has a fixed width, but fills all the screen of the browser, no matter what the current browser display resolution is. The contents of the page also does not has a fixed width eithe...

The whole page displays with a fixed width of pixels. It does not consider the resolution of the screen and the browser's display resolution. A example of this pattern would be http://www.apple.com/s...

Purpose:   To dismiss problems that may be caused by browsers’ default style. We use a css script to override the default style, so that they will behave all the same in different kind of browse...

Problems: We want to keep the content displayed center vertically in one container(div, a, p, span etc). The contents' height is less than the container's height. height: 28px; font-size...

Problems: We want to display something like this. The container has images on the left and right, with absolute position. The contents text is in the middle.   Solution: We have an <a&gt...

Problems: We want to keep the content displayed center horizontally in one container(div, p etc).     Solution: We can use auto margin to center the element like below.   <div id="con...

TBD