There are many more CSS tricks that you can employ on your design to make your task easier and smoother. Some of these new tricks are described below:
Almost all HTML elements are either inline or block elements. Block elements possess certain inherent properties. The first property is that they always start on a new line. Various attributes like height, line-height, top and bottom margins can be maneuvered. The default value for width is one hundred percent of its containing element. You can also assign your own desired value for width. Some of the instances of block elements include <div>, <h1>, <p>, <form> etc.
On the other hand, the inline elements have all the properties different from block elements. They always start on the same line. The attributes like height, line-height, top and bottom margins can never be altered. Width can be set to the extent of the text/image and can’t be maneuvered. The examples of inline elements are <span>, <label>, <a>, <input>, <img>, <strong> and <em>.
You can always transform block elements to inline elements and vice-versa. The syntax you can employ is:
display: inline or display: block
you may not understand the requirement of this transformation initially. You will fell its need when you require an inline element to start on a new line, a block element to continue in the same line, to control the width of an inline element particularly in case of navigation links, to maneuver the height of an inline element and so on.
Another important trick is to provide yet another alternative for the box model hack. The box model hack was generally used to solve a rendering problem occurring in browsers before IE6. In pre-IE6 browsers, the width of an element was calculated by including the border and padding, instead of adding them on. Use the following CSS trick for your convenience.
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
In the above example, the first command is understood by all browsers. But the problem occurs with the second width command as it is read by all browsers except IE5.x on PC. The reason is as the second command comes second, it overrides the first command. As shown in the above example, you can put empty comment tags before and after the colon. As a result, IE5.0 will overlook the command if comment tags are placed before the colon and IE5.5 will overlook the command if they are placed after it. If the two rules are employed simultaneously, then you can hide the command from all IE5.x versions.
You can make use of min-width command to state a minimum width for any element. You can derive more benefit by assigning the minimum width for a web page. IE has no support for this command. To address this problem, you need to put a <div> tag within the <body> tag. The body tag can not be assigned a minimum width.
<body>
<div id=”container”>
In the next step, you need to build your CSS commands so that a minimum width of 600px can be set:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
The first command is a commonly used CSS minimum width command. The second one is a short and simple JavaScript code that is understood by IE only. But the code might get invalidated due to the use of JavaScript. In order to get over this problem, you need to include the code in the head section of the HTML document.
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Leave a reply