SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Web Design

  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Web Design

    how to create the vertical bar | sign using html and css.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AzizK View Post
    how to create the vertical bar | sign using html and css.
    Two answers:
    1. You don't. It's a character, so you just type it.
    2. whatever {border-left: 1px solid #000;}

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi AzizK. Welcome to the forums.

    As Stevie said, you can just type | (the "pipe" character) if you want to (as you did in your post). However, there are reasons not to do that (for example, as a divider between footer links). One reason I don't like the pipe character to be used in that way is that it is read out to screen reader users.

    So it's nicer to use CSS styling to do it instead. So, as an example, if your footer links are contained in List Items (<li>) you could, for example, give each <li> right padding and right margin, and a right border:

    Code:
    .footer li {
      padding-right: 10px;
      margin-right: 10px;
      border-right: 1px solid #999;
    }
    
    .footer li:last-child {
      border: none;
    }

  4. #4
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    web design

    Thank you so much, Ralph



    Quote Originally Posted by ralph.m View Post
    Hi AzizK. Welcome to the forums.

    As Stevie said, you can just type | (the "pipe" character) if you want to (as you did in your post). However, there are reasons not to do that (for example, as a divider between footer links). One reason I don't like the pipe character to be used in that way is that it is read out to screen reader users.

    So it's nicer to use CSS styling to do it instead. So, as an example, if your footer links are contained in List Items (<li>) you could, for example, give each <li> right padding and right margin, and a right border:

    Code:
    .footer li {
      padding-right: 10px;
      margin-right: 10px;
      border-right: 1px solid #999;
    }
    
    .footer li:last-child {
      border: none;
    }


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
  •