SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: CSS seperator

  1. #1
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS seperator

    whta am looking for a css codeing , am trying to creat no. of menus in a line which are dynamic , my question is when 1 menu will get displayed then using css i want to show "|" this seperator and so on.
    please help me

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    Mar 2006
    Posts
    6,132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont understand what it is you want to do. but do you think maybe your question doesnt belong in the php forum?

  3. #3
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its not a PHP question ,Sorry for inconvenience.
    I want to create vertical line | using css after 1st menu,2nd etc
    For ex: menu1 | menu2 | menu 3

  4. #4
    SitePoint Enthusiast splashpoint's Avatar
    Join Date
    Jun 2004
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd put my menu items in a list like this:
    Code:
    <ul id="nav">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">etc...  </a></li>
    </ul>
    then use css to make the <li>s behave as blocks and add a right-border to give the impression of a "|" seperator.

    Something like this:

    Code:
    #nav li
    {
       display:block;
       width: auto;
       float:left;
       padding:0 10px 0 10px;
       border-right:1px solid #000;
    }
    HTH

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <ul id="nav">
      <li><a href="a.html">menu 1</a></li>
      <li><a href="b.html">menu 2</a></li>
      <li><a href="c.html">menu 3</a></li>
    </ul>
    Code:
    #nav li {
      display:inline;
      border-left:1px solid #000;
    }
    
    #nav li:first-child {
      border-left:0;
    }
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Enthusiast splashpoint's Avatar
    Join Date
    Jun 2004
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thommy's solution might work better, althought the first-child pseudo selector doesn't work in IE6<. If you not worried about that than go with his code.

  7. #7
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ys its seems usefule let me try and i'll come back to u ppl.
    thanks

  8. #8
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is first-child in the above code

  9. #9
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think all experts r here now , its working

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by simplecode
    What is first-child in the above code
    It's a so-called pseudo-class that is applied to the first child of an element.

    As splashpoint said, it's not supported by IE6 or older, so you might want to use a class or ID instead if it's important not to show the left border in IE.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thats gr8
    am looking into it


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
  •