Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorkenyabob
    • CommentTimeJan 4th 2006 edited
     permalink
    On one of my newest projects, which can be found here, I wanted to take the sidebar and place it on the bottom, having the different items run horizontally. There would be four blocks along the bottom: About, Latest, Around the Web, and Blogroll. I don't know what the selector is that I am looking for or how I can make the list run horizontally.

    What are the selectors and what are the values I need to make this guy hug the bottom?
    • CommentAuthoradmin
    • CommentTimeJan 4th 2006 edited
     permalink
    li {
    display: inline;
    }
  1.  permalink
    Also, if you wanted the links inside to have block effects, you would need to do something like,

    li { width: 25%; float: left; }
    li a { display: block; }
    • CommentAuthorkenyabob
    • CommentTimeJan 9th 2006
     permalink
    What would the inline style be applied to? What's the selector?
    • CommentAuthoradmin
    • CommentTimeJan 9th 2006 edited
     permalink
    Let's say you have a list like so:


    <ul id="mylinks">
    <li><a href="#">Link</a> </li>
    <li><a href="#">Link</a> </li>
    <li><a href="#">Link</a> </li>
    <li><a href="#">Link</a> </li>
    </ul>


    In order for it to dispaly horizontally you need to apply the display: inline; rule to the <li>

    like so:


    ul#mylinks li {
    display: inline;
    }


    This rule will select any <li> element inside #mylinks and float them next to each other(not sure if that's the right way to say it).
  2.  permalink
    It will just change them from block-level elements to inline-level elements, meaning literally, in line...
    You can also achieve a similar effect with,
    li { float: left; width: xxx; }
  3.  permalink
    or you can use the wordspacing attribute just to space them out
  4.  permalink
    Uh, no.

    Padding and/or Margins to space things out. Word-spacing shouldn't be used for list elements.
    •  
      CommentAuthorFlorushj
    • CommentTimeJan 10th 2006
     permalink
    Also visit http://css.maxdesign.com.au/index.htm I think this site is one of the best on this topic. There are a lot of examples!
Add your comments
    Username Password
  • Format comments as (Help)