SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bottom border question

    I have a bottom border for navigation items that works the way it should:
    HTML Code:
    #gutter_left ul li ul li {
    		background-color: #00853f;
    		border-bottom:1px dashed #FFFFFF;
    		}
    But what I would like it to do is start, say 5 pixels in and stop 5 pixels short. Can this be done with CSS or would I have to create an image of the dashed line and use it as a background?

    Thanks,

    Dan

  2. #2
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use padding or margin depending on what element you're working with

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, as wherrelz has advised, padding should probably do the job for this

    Code:
    #gutter_left ul li ul li {
      background-color: #00853f;
      border-bottom:1px dashed #FFFFFF;
      padding: 5px 0;
    }

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if I understand hurricanedan's question properly, but I thought he wanted the exact opposite of that: to have the border be 10 pixels shorter than the list item, not to have it extend 5 pixels on either side of the item's content.

    Besides, Dave, even if I got it wrong, surely it would be padding:0 5px rather than the other way round? You're adding 5 pixels of vertical padding and no horizontal padding.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cuckoo, he said 'start 5 pixels in and stop 5 pixels short' - means a padding of 5 pixels, not the other way round

    I would just do padding: 5px and be done with it - but depends on his layout.

    (btw, didnt know cuckoos had footsies

  6. #6
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wherrelz View Post
    Cuckoo, he said 'start 5 pixels in and stop 5 pixels short' - means a padding of 5 pixels, not the other way round
    Errr.. if he was talking about the border, then yes it is the other way around

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We'll have to wait for him to clarify things, but the way I read it is,
    I have a bottom border … what I would like it to do is start, say 5 pixels in and stop 5 pixels short.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Evangelist
    Join Date
    Nov 2007
    Posts
    472
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check the below, it may help you
    #gutter_left ul li ul li {
    background-color: #00853f;
    border-bottom:1px dashed #FFFFFF;
    padding: 5px 5px 5px 5px;
    }

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah maybe... I was assuming he was asking to create space between the text and the border and needed to push the text out from the top and bottom but after re-reading it you're probably right.

    Maybe an image of what's is trying to be achieved might help us get a better understanding.

  10. #10
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bottom border shows up and the padding is there but the padding seems to only affect the text, not the border.

    It shows up something like this:
    Code:
     HOME
    -------
    but not like this:
    Code:
     HOME 
     -----
    I wonder if I need to put the padding in the #gutter_left?

    Thanks,

    Dan

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're trying to position the whole box including the border then margin should do the trick

    Code:
    margin : 0 5px;
    That should give you the effect you're after as long as you aren't using display: inline; to position the <li>'s?

    If that's the case then you'll need to use float's instead.

  12. #12
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz,

    margin is what is doing the trick so thanks for that tip. I am not using display inline so that is not an issue.

    Thanks again for the help!

  13. #13
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Told you so

  14. #14
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wherrelz,

    You were right but it was due to my poor phrasing of the question I think. Thanks for taking a look though and for deciphering my post.

    But how about this?

    Say I want the dash line for 'ul li ul li' but need a solid line for the 'ul li' items?

    I know this works:
    Code:
    #gutter_left ul li {
      background-color: #00853f;
      border-bottom:1px solid #FFFFFF;
    }
    But one dashed and one solid line appear right after another when I have a submenu displayed. The solid border appears below menu 1 and menu 3; the dashed border appears below submenu 1 and submenu 2; the solid border for menu 2 appears below the dashed border of submenu 2.
    Like this:
    HTML Code:
    <ul>
      <li>menu 1</li>
      <li>menu 2
        <ul>
          <li>submenu 1</li>
          <li>submenu 2</li>
        </ul>
      </li>
      <li>menu 3</li>
    </ul>
    I know that it is supposed to do that, due to the closing of the li tag. But is there a way to not have the solid border appear at the bottom of the submenu?

    Dan

  15. #15
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Double border.... try

    border-collapse: collapse;

    should work in general, though I've used it primarily for tables/divs/spans.

  16. #16
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately that does not work.

    Thanks for the idea though.

    Any other ideas?

    Dan

  17. #17
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One other problem that has just been brought to my attention: Is there a way to set the last menu item to have no bottom border at all?

    Thanks,

    Dan

  18. #18
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    change the class of the last item?

  19. #19
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw - border collapse would need to be on the UL not the LI

  20. #20
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Border collapse would only work on tables.

    You'll need a class creating for both of these problems

    Code:
    #gutter_left .no_border {
      border-bottom: 0;	
    }
    And then simply apply the class to the menu items that you don't want a border for

    Code:
    <ul>
      <li>menu 1</li>
      <li class="no_border">menu 2
        <ul>
          <li>submenu 1</li>
          <li>submenu 2</li>
        </ul>
      </li>
      <li class="no_border">menu 3</li>
    </ul>
    You could do something clever with CSS3 selectors but it wouldn't have support in all the major browser so I wouldn't suggest using that method for now.

  21. #21
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would not even be an issue with changing the class except the menus are dynamic. I think I am going to move this over to the php forum or the scripts forum to since it involves a CMS.

    Thanks for the help,

    Dan


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
  •