SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two 1-pixel wide vertical lines right next to one another

    Any idea how to display two decorative 1-pixel wide vertical lines right next to one another?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, very easy, but it would help to have some context here. What is your layout and code?

  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)
    As Ralph said without context its hard to give the right answer.

    You could use the borders on two elements to create the lines or you could use :before and :after (ie8+) to place the lines or you could use an image or and so on....

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I ended up doing, but was wondering if there was a better way:

    HTML Code:
    .vertLineLeft {
    	border-right:1px solid #CCCCCC;
    	height: 25px;
    	float:left;
    }
    .vertLineRight {
    	border-right:1px solid #000000;
    	height: 25px;
    	float:left;
    }

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It would be useful to see the HTML that goes with that, as otherwise it's hard to comment. Presumably the elements they apply to have no width?

  6. #6
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It would be useful to see the HTML that goes with that, as otherwise it's hard to comment. Presumably the elements they apply to have no width?
    At this point, I'm just reviewing a PSD and haven't started coding the page.

  7. #7
    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)
    Floating may not be a good idea because that may cause the content to drop in a fluid width. Can't you use the side borders on existing elements?

    As Ralph said context is all important as there is no one size that fits all which means the best solution depends specifically on the task in hand.

  8. #8
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Floating may not be a good idea because that may cause the content to drop in a fluid width. Can't you use the side borders on existing elements?

    As Ralph said context is all important as there is no one size that fits all which means the best solution depends specifically on the task in hand.
    Good idea. I'll try that.


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
  •