SitePoint Sponsor |
|
User Tag List
Results 1 to 21 of 21
Thread: bottom border question
-
Nov 6, 2007, 08:04 #1
- 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; }
Thanks,
Dan
-
Nov 6, 2007, 08:08 #2
- 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
-
Nov 6, 2007, 08:16 #3
- 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; }
-
Nov 6, 2007, 08:30 #4
- 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
-
Nov 6, 2007, 08:40 #5
- 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
-
Nov 6, 2007, 08:43 #6
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Nov 6, 2007, 08:43 #7
- 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
-
Nov 6, 2007, 08:46 #8
- 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;
}
-
Nov 6, 2007, 08:46 #9
- 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.
-
Nov 6, 2007, 09:16 #10
- 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 -------
Code:HOME -----
Thanks,
Dan
-
Nov 6, 2007, 10:00 #11
- 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;
If that's the case then you'll need to use float's instead.
-
Nov 6, 2007, 10:35 #12
- 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!
-
Nov 6, 2007, 10:42 #13
- Join Date
- Nov 2007
- Posts
- 19
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Told you so
-
Nov 6, 2007, 12:00 #14
- 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; }
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>
Dan
-
Nov 6, 2007, 12:04 #15
- 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.
-
Nov 6, 2007, 12:24 #16
- 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
-
Nov 6, 2007, 14:46 #17
- 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
-
Nov 6, 2007, 14:58 #18
- Join Date
- Nov 2007
- Posts
- 19
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
change the class of the last item?
-
Nov 6, 2007, 14:59 #19
- 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
-
Nov 6, 2007, 17:34 #20
- 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; }
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>
-
Nov 7, 2007, 08:47 #21
- 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