The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.

If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.

Our Company

     Daves BMW is a privately owned company that manufactures and sells custom built accessories for the adventure motorcyclist. Finding functional accessories of quality design and material can be a daunting task for the Adventure rider with specific needs due to terrain, style of riding and size of rider.  

The owner of Daves BMW has an extensive background in custom design and fabrication, which carries over to motorcycle customization.

Growing up in Rural America, many products were not accessible to our location. Innovation became a driving force in function, creating solutions on an as “as needed” basis.

As a journeyman welder/fabricator, and an enthusiast who loves cutting edge technology, our company investigates all solutions available,  using technologies from all areas of fabrication.

Daves BMW is taking a page from those years and bringing custom solutions to the adventure motorcyclist. Located in the Desert Southwest, Daves BMW is committed to providing quality solutions to the Adventure Motorcyclist’s  individual needs, providing personalized accessories, built and engineered the better design, function and style.

Daves BMW is a young company, brewed up from years of experience in many technological and manufacturing fields.  Staying current with technology and the political climate, helps in understanding the needs of the customer.

The use of motorcycles to travel and escape the daily tasks of life is on the rise. Gas prices soaring, and limited disposable income makes the motorcycle an optimal vehicle for  adventurous people to find an outlet. The production models of motorcycles are as varied as the riders who buy them, yet, the big manufacturers cannot cater to the individual needs of each and every rider.

An after market that produces accessories has flourished to fill the need. This industry is a growing segment, and is driven primarily by profit. A reasonable product at a fair price has been achieved. This does not address the individual, who has a favorite cook stove, water container or luggage, that needs to be carried on an already limited in space motorcycle.

As Daves BMW grows, integration of software to make designing your own custom accessories will be added to the website. As our reputation grows, our company will grow to meet and exceed the demands of the Adventure Rider. Our website will host different technical articles and motorcycle related information.

DavesBMW will be the  leader of niche specific accessories for adventure motorcyclists ; making our brand the industry standard by 2020.

The fear or apprehension to build your bike how you need it to be is our focus.  Our success is your success as we continue to refine and perfect our system to service the needs of our most discerning customers.

Some well established leaders in the automotive industry are providing more personalized builds of their automobiles, letting the buyer pick from a list of options that suits their lifestyle. Pulling pages from that playbook, and modifying how to bring this to the motorcycle community will have challenges that will need to be met with expertise and expediency. 

Innovation, design and product that works is our strong suit. We are committed to finding solutions not excuses.

This is my first draft, any suggestions are welcome.

Clearing Method

Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.

Logo Replacement

An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo.

Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes.

To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)

Internet Explorer Conditional Comments

These liquid layouts contain an Internet Explorer Conditional Comment (IECC) to correct two issues.

  1. Browsers are inconsistent in the way they round div sizes in percent-based layouts. If the browser must render a number like 144.5px or 564.5px, they have to round it to the nearest whole number. Safari and Opera round down, Internet Explorer rounds up and Firefox rounds one column up and one down filling the container completely. These rounding issues can cause inconsistencies in some layouts. In this IECC there is a 1px negative margin to fix IE. You may move it to any of the columns (and on either the left or right) to suit your layout needs.
  2. The zoom property was added to the anchor within the navigation list since, in some cases, extra white space will be rendered in IE6 and IE7. Zoom gives IE its proprietary hasLayout property to fix this issue.


By nature, the background color on any div will only show for the length of the content. If you'd like a dividing line instead of a color, place a border on the side of the .content div (but only if it will always contain more content).