 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / October 2006width of bottom-border?
By width, I don't mean weight. I have a row of <li>'s, with a bottom-border. I want the bottom-border to only go 90% of the <li> (centered) Is there any way to do this? I have it in this format: CSS: li { border-bottom: 1px solid #00ff00; } HTML: <ul> <li>this</li> <li>that</li> <li>the other</li> <li>bleh</li> </ul> > By width, I don't mean weight. I have a row of <li>'s, with a > bottom-border. I want the bottom-border to only go 90% of the <li> [quoted text clipped - 15 lines] > <li>bleh</li> > </ul> !Also! On the same list, when I have items rollover, it's not padding out like the first line, e.g.: |---This is a list item----| |---This is a list item----| |---This is a list item----| |---This is a list item----| |---This is a longer-------| |List item-------------------| I want it all to be padded out 6px. In article <1162259045.096169.43250@i42g2000cwa.googlegroups.com>, is it not time for you to post a url?  Signaturedorayme > In article > <1162259045.096169.43250@i42g2000cwa.googlegroups.com>, [quoted text clipped - 3 lines] > -- > dorayme http://www.phazm.net/csstest/list01.html Well, I don't know what I was doing wrong at work, but now the one that wraps around is being padded correctly, so forget that :) But I want the green bottom-border to NOT touch the blue border, WITHOUT pushing the blue border out any more than 200px (which it's at currently) >> In article >> <1162259045.096169.43250@i42g2000cwa.googlegroups.com>, [quoted text clipped - 12 lines] > WITHOUT pushing the blue border out any more than 200px (which it's at > currently) Make the <li> a bit narrower, and use margin instead of padding on the left. This works because padding goes inside the border, margin goes outside it. i.e. where you have li { padding-left:13px; border-bottom:1px solid #33FF00; width: 200px; } try li { /* padding-left:13px; */ margin-left: 13px; border-bottom:1px solid #33FF00; width: 174px; } > >> In article > >> <1162259045.096169.43250@i42g2000cwa.googlegroups.com>, [quoted text clipped - 35 lines] > width: 174px; > } Great, thank you :) >> http://www.phazm.net/csstest/list01.html >> [quoted text clipped - 27 lines] > width: 174px; > } Perhaps this will be a bit better, allowing the centering Fuzzy originally mentioned, and also scaling when a visitor resizes: ul { padding:0; margin:0; list-style-type:none; width:20%; /* size to taste */ border:1px solid #3399FF; } li { margin: 0 5%; /* <-- makes width of border-bottom 90% */ border-bottom:1px solid #33FF00; text-align: center; /* <-- as originally requested */ } Signature-bts -Motorcycles defy gravity; cars just suck On Oct 31, 5:38 am, "Beauregard T. Shagnasty" <a.nony.m...@example.invalid> wrote: > >>http://www.phazm.net/csstest/list01.html > [quoted text clipped - 42 lines] > -bts > -Motorcycles defy gravity; cars just suck Ahh, now that I'm at work and see my code again, it becomes a bit more complicated. #nav { width: 138px; background-color: #FFF; padding:1em 0 1em 0; } #nav ul { list-style: none; padding: 0 0 13px 0; margin: 0 0 1em 0; border: none; background-color: #00FF00; } #nav li { padding-left:6px; margin: 0; border-right: 1px solid #669fb7; border-left: 1px solid #669fb7; background-color: #F0F9FE; border-bottom: 1px solid #C5D3DD; } So I can't actually adjust the size of the li, because that will make the border on the left not align with the border on the top. (makes it shallower) > On Oct 31, 5:38 am, "Beauregard T. Shagnasty" > [quoted text clipped - 70 lines] > the border on the left not align with the border on the top. (makes it > shallower) That was confusing, here's an html file: http://www.phazm.net/csstest/list1b.html [snip] >> > li { >> > padding-left:13px; [quoted text clipped - 21 lines] >> border-bottom:1px solid #33FF00; >> text-align: center; /* <-- as originally requested */ [snip] > Ahh, now that I'm at work and see my code again, it becomes a bit more > complicated. [quoted text clipped - 25 lines] > the border on the left not align with the border on the top. (makes it > shallower) Sorry, don't understand. What border on the top? The li has no top border. > [snip] > [quoted text clipped - 54 lines] > > shallower)Sorry, don't understand. What border on the top? The li has no top > border. It has an image border, not CSS. The blue border obviously needs to match up everywhere, while the "underline" should not touch it, but be about 3-4px off on each side >> [snip] >> [quoted text clipped - 58 lines] > The blue border obviously needs to match up everywhere, while the > "underline" should not touch it, but be about 3-4px off on each side I see, the problem is that your <li>s also have left and right borders, which you don't want to move. You could move the left and right borders from the <li>s to the ul; but that spoils your curved edges at the bottom. You can fix that by instead of making the curved image the background-image of the <ul> just make it an <img style="display: block"> that follows the ul (and transfer the ul's bottom margin to that img as well). Alternatively, since there is no problem in CSS which cannot be solved by using another level of nesting, you can put inside your <li>s spans with left and right margins. Then transfer the bottom borders from the <li>s to the nested spans. Obviously the content goes in the span, i.e. <li><span>This is a test</span></li> Both of these solutions compromise the "logic" of your HTML by adding extra elements, but I can't see a way of getting the exact effect you want without doing that. It's easy if you either lose the curved borders, or allow the bottom borders to go all the way the edge. There is one further alternative which is to get rid of the bottom border altogether and use text-decoration: underline. Not exactly the same effect, but fairly similar. > >> [snip] > [quoted text clipped - 83 lines] > border altogether and use text-decoration: underline. Not exactly the > same effect, but fairly similar. Alright, thanks for your help :-/ I guess I'm just going to leave them touching the border, as I need to keep the code logical (I'm trying to convince my boss that tables are not the way to go in this instance, and I just got done giving him my speal on semantic coding, so I can't go and throw in a bunch of extra stuff like that. Let it be noted that I fully support adding a "length" and "height" value to borders. ;) [snip] >> Both of these solutions compromise the "logic" of your HTML by adding >> extra elements, but I can't see a way of getting the exact effect you >> want without doing that. >> >> It's easy if you either lose the curved borders, or allow the bottom >> borders to go all the way the edge. [snip] > I guess I'm just going to leave them touching the border, as I need to > keep the code logical (I'm trying to convince my boss that tables are > not the way to go in this instance, and I just got done giving him my > speal on semantic coding, so I can't go and throw in a bunch of extra > stuff like that. Good decision. Much better to be a bit flexible about what it looks like than go crazy trying to control the last pixel. And good to stick to the principle of not introducing bogus elements purely for layout purposes. And good to lecture the boss. > Let it be noted that I fully support adding a "length" and "height" > value to borders. > ;) Personally I think life is quite complicated enough already. > The blue border obviously needs to match up everywhere, while the > "underline" should not touch it, but be about 3-4px off on each side See my post where it says: margin: 0 5%; /* <-- makes width of border-bottom 90% */ Signature-bts -Motorcycles defy gravity; cars just suck >> The blue border obviously needs to match up everywhere, while the >> "underline" should not touch it, but be about 3-4px off on each side > > See my post where it says: > > margin: 0 5%; /* <-- makes width of border-bottom 90% */ That was a good suggestion for a solution to the original problem. But now the OP wants a box that looks like this: | _____ | where | is left and right borders, and _ is bottom border. i.e. gaps between the left and right ends of the bottom border and the left and right borders. This can't be done per se, so any solution is likely to involve the left/right borders and bottom border being on different boxes. > That was a good suggestion for a solution to the original problem. But > now the OP wants a box that looks like this: Oh. I missed where Fuzzy changed the parameters ... "When you come to the fork in the road, take it." -Yogi Berra Signature-bts -Motorcycles defy gravity; cars just suck |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.