Tuesday 15 September 2015

css float - Confused about CSS Absolute Positioning, Floating, Centering -


I have read a number or article and tutorial on CSS that cover the whole situation, floating, etc. I thought I understood this well, and generally can get both the use and the desired design but here and there I go in a situation where I do not understand that with one element What is fully positioned or floating is not and can not be treated by the way I need it. So I do not remember how these CSS rules work.

Here is a specific example. I'm skinning a WP theme again for a non-profit organization. They want to focus in navigation in their designs. It seems that nothing should not be easy. But so far I have failed completely in achieving it.

The link to the site is here:

There are several ways < P> First A

  1. Wrap Navigation in a full width wrapper.
  2. Set the text-alignment: center; For the cover.
  3. Set display: inline-block; Or inline, for the navigation bar.
  4. Done!

    Second one

    If you know the exact width, in the navigation bar, you can try this solution:

    1. Set Position: Absolute; For navigation.
    2. Set left: 50%; For navigation.
    3. Set the negative width of the navigation by dividing it by 2.
    4. Done!

      I'm sure there are more ways to get this, but these two jobs are great for me! You should not use floating for center alignment, only for left and right.

No comments:

Post a Comment