Exchanging the positions of the logo and the search area

In this lesson, the storefront page layout is changed. You need to create a CSS file based on the current one to support the new layout design of the store. The position-related attributes are then changed to more appropriate values.

Procedure

  1. The position attributes are defined in a CSS file. Before making changes, mark out the items you want to change in the page, and then find the attribute definitions in the CSS file. You can use the debugging tool to determine the div definition of the page. The recommended debugging tool for the Madisons starter store is Mozilla Firefox with the Firebug add-on. The following diagram shows the resulting page design when using Firebug:
    Screen capture showing values for div tag IDs
    • The header div contains the header_logo, header-search, and header-link divs.
    • The position:relative attribute is defined in the header div.
    • The header_logo div is located on the left by default.
    • The header-search and header_links divs are located on the right by defining the right coordinate.

    To exchange their position, you must redefine the coordinates of the header_logo, header-search, and header_links divs.

  2. In the Enterprise Explorer view, expand Stores > WebContent > Madisons > css.
  3. Edit the common2_1.css file.
    1. Open the common2_1.css file.
    2. Find #header-search.
      1. Locate right in the class definition.
      2. Replace the value with left.
    3. Find #header_links.
      1. Locate right in the class definition.
      2. Replace the value with left.
    4. Insert the following code before #header-search to define the header_logo div:
      
 #header_logo { position: absolute; right: 6px; }
  4. Save your changes and close the file.
  5. Edit the common2_2.css file.
    1. Open the common2_2.css file.
    2. Find #header-search.
      1. Locate right in the class definition.
      2. Replace the value with left.
    3. Find #header_links.
      1. Locate right in the class definition.
      2. Replace the value with left.
    4. Insert the following code before #header-search to define the header_logo div:
      
 #header_logo { position: absolute; right: 6px; }
  6. Save your changes and close the file.
  7. Edit the common2_3.css file.
    1. Open the common2_3.css file.
    2. Find #header-search.
      1. Locate right in the class definition.
      2. Replace the value with left.
    3. Find #header_links.
      1. Locate right in the class definition.
      2. Replace the value with left.
    4. Insert the following code before #header-search to define the header_logo div:
      
 #header_logo { position: absolute; right: 6px; }
  8. Save your changes and close the file.