SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set this to inline

    I don't get this example:

    http://reference.sitepoint.com/css/display/demo

    A Ul class is a block lvl element, the example sets it to block. I tried to set it to inline and I could not, where am I noobing out?
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Try this:

    HTML Code:
    .menu a
    {
      display:inline; 
      border:1px solid #f90;
      background:#fec;
      padding:4px 10px;
      margin:0 0 1px 0;
      color:#c60;
      text-decoration:none;
      font:normal normal normal 0.8em sans-serif;
    }
    .menu a:hover, 
    .menu a:focus, 
    .menu a:active {  background:#f8fbd0;}
    .menu li       { display:inline;   width:7em;}
    .menu, 
    .menu li       { margin:0;  padding:0;  list-style-type:none;}

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you added a display property to the decendant selector for the class menu on the element li, along with the a element.

    I meant to add a *H to the title of the thread.

    So apply inline to all you elements that may natrually display block format?
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!

  4. #4
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by unconformed View Post
    I meant to add a *H to the title of the thread.
    Corrected.
    TheRaptor - Joe

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by unconformed View Post
    So apply inline to all you elements that may natrually display block format?
    What you want there is for the list items—which normal sit one on top of the other, due to being block level elements—to sit side by side. So it's the LIs you need to change. I prefer to set them to float: left, but display: inline will do the same. Normally you'd then set the <a>s to display: block, as they then fill up the LIs, but it's up to you. But there's no need to set the <a> to display: inline, as that's their default.


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
  •