Print this Tutorial Print
Absolute and Relative Units - pxs and ems
Objective

Explore the use of em and px units.

Note. You should complete the 3-D Buttons tutorial before attempting this tutorial. You need to have available a theme named 'MyTheme7' as defined in that tutorial.

  1. Introduction
    Note If you download and use the support files you still need to have the 'MyRed7' theme available.
    Start with the site that you built in the 3-D Buttons tutorial or you can download the support files here. Open page start.htm.

    The menus below are styled with the MyRed7 theme we built in the 3-D Buttons tutorial. The menu on the left has 3-D borders (4px wide) and the one on the right has 2-D borders (1px wide).

Live Demo - Menus with px units

All dimensions are specified in px units. The fontsize is 16px, the button width is set to 120px and the height is set to 32px.

Note. Menus built using px units do not scale well in many browsers.

  1. Screenshots

    If you view the above menus with your browser set to different default fontsizes, what you see depends very much on which browser you use. Below are some screenshots of different browsers taken in each case with both a large and a small default fontsize:

    Firefox 2, Netscape 8
    Large default fontsize Small default fontsize
    When the default fontsize is changed the size of the text in the menu buttons changes correspondingly but the size of the buttons does not change.

    Internet Explorer 6
    Large default fontsize Small default fontsize
    When the default fontsize is changed the menu remains unchanged - neither the text nor the button size are affected.

    IE 7, Opera 9
    Large default fontsize Small default fontsize
    When the default fontsize is changed the menu scales in proportion. Both label text and button size change.

Review

IE 7 and Opera 9 allow the user to scale a menu that is dimensioned in px units up/down while preserving the original proportions. That is certainly a useful facility from a user's perspective (although it may not please every page designer!).

It is also possible to make fully scalable menus that work properly in the other browsers, including IE6, by using 'em' units rather than 'px'.

Menukit allows you to use 'em' units in any of the CSS menus (not the DHTML menus).

Continuing the Tutorial... In the next part of this tutorial we will modify the 'MyRed7' theme so it can be used to construct scalable versions of the above menus based on 'em' units. We will then reproduce the 2 demo menus using 'em' units and demonstrate their scalability in the other browsers.
  1. When defining a theme for a CSS menu, you may choose to work either in 'px' or 'em' units. Each theme contains a separate set of parameters for each of the 2 sets of units.

    Note You can use the synchronize button to make the 2 sets the same.
    These 2 sets are independent - you can modify the menu button parameters that are specified in px's without affecting the 'em' set of parameters.

    Start Dreamweaver and open the page start.htm which you can find in the support files. Open Menukit and bring forward the Themes tab. Select the 'MyRed7' theme. It should look like this:

    Change the Units from 'px' to 'em' and the screen changes to this layout:

    Note that the button proportions (eg. ratio of height to width) have changed from the 'px' case. That is because there are separate sets of parameters for the 'px' and 'em' units. The 'em' values shown here are the same as in the Red7 theme which we copied to make 'MyRed7'.

    We can, if we wish, align the 2 sets of parameters so that the button proportions look the same in each set of units...

  2. Align 'em' parameters with 'px' parameters.
    Note Since 'ems' are relative and 'pxs' are absolute, aligning the 2 sets means to make them the same in proportion.
    Activate the 'px' set of parameters by changing the Units back to 'px'. Press the synchronize button to make the 'em' parameters equal (approx.) to the active set.

    Now if you change the units to 'em' you will see that the button dimensions match the 'px' set.

    Press Save.

  3. Make Demo menus with 'em' units.

    Use the Clone Menu button to make copies of menus 'M1' and 'M2' and use 'em' units in the new menus.

    Name the new menus 'M3' and 'M4' and position them below the existing menus at top: 120px. Remember to set the units on the Menu tab to 'em'.

    Menu 'M2' on the right is absolutely positioned on the page at left 152px. We need to change that position to an 'em' value for the 'M4' menu so that the menus don't overlap when the default fontsize is increased. Since the menu has a width of 7.5em, position the menu at 9.5em to maintain separation:

    Your finished page should look like 'final.htm' which you may find in the support files.

Live Demo - Menus with em units

All dimensions are specified in em units. The fontsize is 1em, the button width is set to 7.5em and the height is set to 2em.

Note. Menus built using em units scale well in many browsers.

  1. Screenshots

    Below are some screenshots of different browsers taken in each case with both a large and a small default fontsize:

    Firefox 2, Netscape 8
    Large default fontsize Small default fontsize
    When the default fontsize is changed the menu scales in proportion.

    Internet Explorer 6
    Large default fontsize Small default fontsize
    When the default fontsize is changed the menu scales in proportion.

    IE 7, Opera 9
    Large default fontsize Small default fontsize
    When the default fontsize is changed the menu scales in proportion.