CSS Menus

Use

  position: relative; text-align:right; /* for the container, */
  position: absolute; left: 0; /* for the left aligned element, */
  display: inline; /* or */
  display: inline-block /* for the right element. */

to emulate floating and create bookends for a masthead without encountering the side effects of floats

Use absolutely positioned divs nested in a relatively positioned wrapper to create equal height columns using the following steps:

- Create the columns using floats or inline-block

- Create a wrapper div around all the columns and set it to be relatively positioned

- Place an absolutely positioned div as the last element inside the wrapper div

- Set the absolutely positioned div to { bottom:0; height: 100%; z-index: -1; }

- Set the height to a fixed number large enough to fill the columns for IE6

- Set the width of the absolutely positioned div equal to the width of the first column

- Set the left offset of the absolutely positioned div so that it overlaps the first column

- Set the desired border and background color of the absolutely positioned div

- Repeat this step for the remaining columns if necessary

- Set { position:relative; z-index:2; }, add vertical padding(or replace margins with padding) and reset the background on any containers above or below the columns to hide the overflow in IE6

- Set { top:1px; margin-top: -1px; } to vertically align the absolutely positioned div in IE6

- Set clip:rect(0 ## 9999px 0); where ## is the width of the column to truncate horizontal overflow in IE6

- If z-index:2 fails in IE6, make it higher than the z-index of the wrapper div if they are in the same parent

- If z-index:2 still fails in IE6, make it higher than the z-index of the wrapper div's parent

Use nested spans to created irregularly shaped anchors without image maps with the following steps: - Use the same setup as above to nest spans within anchors

- Set the anchors and the spans to be absolutely positioned

- Set the ul to be relatively positioned

- Set a single background image for both the anchors and spans

- Reposition the anchors and spans so that the bounding boxes for the anchors do not overlap

- Change the background position of the anchors and spans on :hover to match the rollover state


  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.

Cascading_Style_Sheets/CSS_Menus
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultlogic.com. Create an account using LinkedIn to manage and organize your omni-channel knowledge. defaultlogic.com is like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us