This year, to present my Christmas wishes, I have created for fun this Christmas card only in css.
{ 0 comments }
From the category archives:
CSS Tips
The tooltips allows the user to view a descriptive text or extra information passing above a link with the mouse. You can find many examples already online. Next, you will find the test I done with 3 examples of css tooltips: a simple text, with an image plus text and with background images to create a ’speech bubble’ effect.
At the end of this article, you will find their browser compatibility.
Continue to read >>
{ 0 comments }
The css property min-width applies a minimum width to a selected element.
If the browser’s windows is resized by the user, the content will follow the movement and resize itself until a certain width. Passed that limit, the window’s scrollbars will appear.
This property is useful in the case of a fluid layout or when applying to the content the float property to avoid that the block elements move downwards if the space is limited.
Unfortunately, the min-width is not supported by Internet Explorer 6.
Next, 2 solutions to specify a minimum width for IE6.
{ 0 comments }
While creating an HTML page, it is important to understand the difference between the 2 elements categories inline and block to avoid coding errors and impost the CSS for the best.
Those 2 words, ‘block’ and ‘inline’ are explicit enough by themselves..
- block: an element which forms a separate block
- inline: an element which stays inline with the rest of the content
{ 4 comments }
With a few lines of css, we can apply a background image re-sizable at 100% with the browser’s windows.
Both the body of the page then the background image (with id=”"background") have a width and height of 100%.
Their margins and paddings are imposted to null to avoid a white space around them.
With the css property overflow, we avoid that the lateral scrollbar of the browser’s window is displayed.
Finally, the background image is positioned in a absolute way to remove it from the natural flux of the page and to allow it to be re-dimensioned correctly.
{ 6 comments }
Firefox has the bad habit to add a gray border around the links when clicked as seen in the following image…
We can easily remove it applying a specific css property…
Continue to read >>
{ 5 comments }
