SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard silver trophy
    Join Date
    Sep 2002
    Location
    Cleveland, Ohio, USA
    Posts
    1,494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal vs. vertical menu items

    Is there some trick not entirely obvious to me to get menu items to align vertically or horizontally? Say you have:
    Code:
    <span class="menuitem">one</span>
     <span class="menuitem">two</span>
     <span class="menuitem">three</span>
    I want to have the flexibility to flip between rendered HTML that looks like:

    one two three

    ...and...

    one
    two
    three

    Is that possible without changing the markup above?

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Its possible but you would have to change the styles without change the html markup, so you would have to switch/alter/edit the style before the page is generate either by a server side language or by a client side language like javascript.

    Firstly I would use divs instead of spans, because for my method to work the element needs to be block (use display: block if you want to keep the spans). Anyway float: left (or right) will give you a vertical navigation, removing that will make it horizontal.

    Good Luck.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You should code your menus within semantic tags such as lists to give them proper structure.

    You can find many examples of vertical and horizontal lists here (there is even a list generator).

    http://css.maxdesign.com.au/listamatic/

    Basically you can float elements as mentioned by new guy which will line them alongside or you can make them display:inline. If they are display:inline they will flow along one line but you will not be able to specify dimensions for uinline elements.

    Floats on the other hand must have dimensions (most of the time).

    Paul

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jeffyjones
    Is there some trick not entirely obvious to me to get menu items to align vertically or horizontally? Say you have:
    Code:
    <span class="menuitem">one</span>
     <span class="menuitem">two</span>
     <span class="menuitem">three</span>
    I want to have the flexibility to flip between rendered HTML that looks like:

    one two three

    ...and...

    one
    two
    three

    Is that possible without changing the markup above?
    Code:
    /*horizontal*/
    .menuitem {
      display: block;
      float: left;
      width: 33%;
    }
    /*vertical*/
    .menuitem {
      display: block;
      padding: 10px;
      width: 300px;
    }
    You should really consider converting those spans to an unordered list though, which is the "proper" structure for such a thing. For more on styling lists, look at http://alistapart.com/articles/taminglists/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •