Liquid layouts the easy way. Date: 30 December 2003 Author: Russ Weakley This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.
Some definitions Liquid layout All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window. Liquid layout example Combination liquid and fixed layouts Similar to liquid layouts, except one or more of the containers on the page have fixed widths.
Liquid/fixed layout example Fixed-width layouts All containers on the page have their widths defined in pixels or other fixed units. Fixed-width example Em-driven layouts All containers on the page have their widths defined in ems. Em-driven layout example You can also use combinations of the above. The secret of liquid layouts Step 1 – Start with a layout grid Step 2 – Leaving space. Lesson 14: Positioning of elements - CSS Tutorial. With CSS positioning, you can place an element exactly where you want it on your page.
Together with floats (see lesson 13), positioning gives you many possibilities to create an advanced and precise layout. The following will be discussed in this lesson: The principle behind CSS positioning Imagine a browser window as a system of coordinates: The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates. Let's say we want to position a headline.
If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS: The result will be as follows: As you can see, positioning with CSS is a very precise technique to place elements. Absolute positioning An element which is positioned absolute does not obtain any space in the document. To position an element absolutely, the position property is set as absolute. Show example Relative positioning Show example Summary. HTML CSS tutorial, HTML CSS guide, HTML CSS help, HTML CSS Support.
Rounded Corner CSS In the new generation of advance CSS we can make rounded corner with the help of CSS.
In this method we don’t need any images or javascript to make rounded corner. “border-radius” is the CSS3 syntax. CSS3 properties don’t work in Internet Explorer(IE6,IE7,IE8) but it’s works on IE9. For rounded corner we use “border-radius”. CSS [CSS3 Browser] You can use some browser hacks. Continue reading Rating: 9.3/10 (20 votes cast) Rating: +7 (from 7 votes) Simple CSS and Javascript Drop Down Menu Here you can find a simple drop down menu with the help of CSS and Javascript. Continue reading Rating: 9.2/10 (40 votes cast) Rating: +8 (from 16 votes) Simple CSS Drop Down Menu Here we present another CSS drop down menu. Continue reading Rating: 9.2/10 (34 votes cast) Rating: +10 (from 14 votes) CSS Drop Down Menu We can make fully CSS based drop down menus.