Re: [css-d] Make all link border-bottom of equal length?
This what your wanting?
ul {
text-decoration:none;
width:50%;/*auto*/
}
ul li {
width:100%;
border-bottom:1px dotted rgb(0,0,0);
/*text-align:center;*/
}
ul a{
display: block;
}
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
On Fri, Jan 31, 2014 at 9:42 AM, John Johnson j...@coffeeonmars.com wrote:
in a ul/li set of links/nav, is it possible to make all of the border-bottoms
of equal length, regardless of how long the linked word(s) are?
Example:
HTML:
ul
lia href=“#”peas/a/i
lia href=“#Triskaidekaphobia/a/i
lia href=“#The Rain in Spain stays Mainly in the Plain/a/li
li/li
/ul
CSS:
ul a{
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
}
So, the border-bottom would have to be as long as the longest thing, so all
would need to be that long.
Possible to do this?
thank you!
John\
How about min-width?
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
John,
Here's a pseudo fix. I wrapped a div around each li.
This will give you an equal length for the underline, but it's not
determined by the longest text line, it's a length you have to set.
CSS
style type=text/css
ul a{
text-decoration:none;
/* border-bottom:1px dotted rgb(0,0,0); */
}
.length {
width: 320px;
border-bottom: 1px dotted rgb(0,0,0);;
}
/style
/head
HTML
ul
lidiv class=lengtha href=#peas/a/div/li
lidiv class=lengtha href=#Triskaidekaphobia/a/div
lidiv class=lengtha href=#The Rain in Spain stays Mainly in the
Plain/a/div/li
/ul
-
Rod Castello
On Fri, Jan 31, 2014 at 6:42 AM, John Johnson j...@coffeeonmars.com wrote:
in a ul/li set of links/nav, is it possible to make all of the
border-bottoms of equal length, regardless of how long the linked word(s)
are?
Example:
HTML:
ul
lia href=#peas/a/i
lia href=#Triskaidekaphobia/a/i
lia href=#The Rain in Spain stays Mainly in the
Plain/a/li
li/li
/ul
CSS:
ul a{
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
}
So, the border-bottom would have to be as long as the longest thing, so
all would need to be that long.
Possible to do this?
thank you!
John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
On Fri, Jan 31, 2014 at 10:13 AM, Rod Castello rodcastel...@gmail.com wrote:
John,
Here's a pseudo fix. I wrapped a div around each li.
This will give you an equal length for the underline, but it's not
determined by the longest text line, it's a length you have to set.
CSS
style type=text/css
ul a{
text-decoration:none;
/* border-bottom:1px dotted rgb(0,0,0); */
}
.length {
width: 320px;
border-bottom: 1px dotted rgb(0,0,0);;
}
/style
/head
HTML
ul
lidiv class=lengtha href=#peas/a/div/li
lidiv class=lengtha href=#Triskaidekaphobia/a/div
lidiv class=lengtha href=#The Rain in Spain stays Mainly in the
Plain/a/div/li
/ul
-
Rod Castello
Going this route, could you not just apply the width to the lis and
avoid the extra element?
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
2014-01-31 16:42, John Johnson wrote:
in a ul/li set of links/nav, is it possible to make all of the
border-bottoms of equal length, regardless of how long the linked
word(s) are?
[...]
So, the border-bottom would have to be as long as the longest thing,
so all would need to be that long.
You would effectively need a table. The simplest and most robust
approach would be an HTML table, but using the “CSS table model” works
almost equally well (won’t work on IE 6 though) and has just a little
more code and pitfalls.
You would use CSS to turn ul to a table (in rendering), each li to a
table row, and each a to a table cell. You would probably want to use
much more specific selectors (to avoid doing this to all lists), but
here’s a simple test scenario:
ul a {
text-decoration:none;
border-bottom: 1px dotted rgb(0,0,0);
display: table-cell;
}
ul {
display: table;
}
li {
display: table-row;
}
li:before {
content: \2022;
padding-right: 0.3em;
}
Setting display: table-row removes the default bullets, so here I add
them with generated content (\2022 is the common bullet U+2022, •).
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
On Jan 31, 2014, at 8:09 AM, Rod Castello rodcastel...@gmail.com wrote:
John, pseudo was probably not the correct word to use. Make-shift would have
been better.
You are correct, you can place the width and underline styling on the li
ul li {
width: 320px;
border-bottom:1px dotted rgb(0,0,0);
}
I get you..thanks, Rod! I get the solution to this problem is not to modify the
link behavior, but to create a class to modify the content presentation..
John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
On 1/31/14, 7:13 AM, Rod Castello wrote:
John,
Here's a pseudo fix. I wrapped a div around each li.
[...]
On Fri, Jan 31, 2014 at 6:42 AM, John Johnson j...@coffeeonmars.com wrote:
in a ul/li set of links/nav, is it possible to make all of the
border-bottoms of equal length, regardless of how long the linked word(s)
are?
Example:
HTML:
ul
lia href=#peas/a/i
lia href=#Triskaidekaphobia/a/i
lia href=#The Rain in Spain stays Mainly in the
Plain/a/li
li/li
/ul
CSS:
ul a{
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
}
So, the border-bottom would have to be as long as the longest thing, so
all would need to be that long.
Possible to do this?
thank you!
John
Wouldn't this do the trick?
ul a{
display: block; /* - Add this */
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
}
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
Hey David,
That worked great when I tried it.
On Fri, Jan 31, 2014 at 9:12 AM, David Hucklesby huckle...@gmail.comwrote:
On 1/31/14, 7:13 AM, Rod Castello wrote:
John,
Here's a pseudo fix. I wrapped a div around each li.
[...]
On Fri, Jan 31, 2014 at 6:42 AM, John Johnson j...@coffeeonmars.com
wrote:
in a ul/li set of links/nav, is it possible to make all of the
border-bottoms of equal length, regardless of how long the linked word(s)
are?
Example:
HTML:
ul
lia href=#peas/a/i
lia href=#Triskaidekaphobia/a/i
lia href=#The Rain in Spain stays Mainly in the
Plain/a/li
li/li
/ul
CSS:
ul a{
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
}
So, the border-bottom would have to be as long as the longest thing, so
all would need to be that long.
Possible to do this?
thank you!
John
Wouldn't this do the trick?
ul a{
display: block; /* - Add this */
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
}
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
On Fri, Jan 31, 2014 at 12:26 PM, Rod Castello rodcastel...@gmail.com wrote:
Hey David,
That worked great when I tried it.
On Fri, Jan 31, 2014 at 9:12 AM, David Hucklesby huckle...@gmail.comwrote:
Wouldn't this do the trick?
ul a{
display: block; /* - Add this */
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
}
--
Cordially,
David
Ha ha. As always, I can't see the forest for the trees. Such a simple
solution David... :-/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
2014-01-31 20:07, Tom Livingston wrote:
[...]
ul a{
display: block; /* - Add this */
[...]
Ha ha. As always, I can't see the forest for the trees. Such a simple
solution David... :-/
But to a problem different from the one asked, which was about setting
the width of underlines to the width of the widest link text. The code
above sets it to the available width, since block elements have width:
auto (effectively, width: 100%) as the default.
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
On Fri, Jan 31, 2014 at 3:29 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:
2014-01-31 20:07, Tom Livingston wrote:
[...]
ul a{
display: block; /* - Add this */
[...]
Ha ha. As always, I can't see the forest for the trees. Such a simple
solution David... :-/
But to a problem different from the one asked, which was about setting the
width of underlines to the width of the widest link text. The code above
sets it to the available width, since block elements have width: auto
(effectively, width: 100%) as the default.
Yucca
Understood, but won't the longest link push out the width of the
lis? In which case setting display: block; on the as will cause
them to always be as wise as the widest one? And this will result in
what the OP wanted, no?
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
It seems like this Jukka's solution actually puts the underline across 100%
of the display area which can carry it past the end of the longest line. I
would love to see a solution that stops at the end of the longest line and
increases all of the other li underlines as well, regardless of screen or
div size. Anyone have that solution using CSS?
Rod Castello
On Fri, Jan 31, 2014 at 12:53 PM, Tom Livingston tom...@gmail.com wrote:
On Fri, Jan 31, 2014 at 3:29 PM, Jukka K. Korpela jkorp...@cs.tut.fi
wrote:
2014-01-31 20:07, Tom Livingston wrote:
[...]
ul a{
display: block; /* - Add this */
[...]
Ha ha. As always, I can't see the forest for the trees. Such a simple
solution David... :-/
But to a problem different from the one asked, which was about setting
the
width of underlines to the width of the widest link text. The code above
sets it to the available width, since block elements have width: auto
(effectively, width: 100%) as the default.
Yucca
Understood, but won't the longest link push out the width of the
lis? In which case setting display: block; on the as will cause
them to always be as wise as the widest one? And this will result in
what the OP wanted, no?
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
2014-01-31 22:53, Tom Livingston wrote: [...] won't the longest link push out the width of the lis? In which case setting display: block; on the as will cause them to always be as wise as the widest one? And this will result in what the OP wanted, no? No, the li elements too have width: auto by default, so they extend over the available horizontal space, minus the left padding and/or margin. So the underline, when applied to a block element inside li, will extend that way too, quite independently of the lengths of the texts. That’s how blocks behave. Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
2014-01-31 22:58, Rod Castello wrote: It seems like this Jukka's solution actually puts the underline across 100% of the display area which can carry it past the end of the longest line. Pardon? That was not my solution but a solution that I commented on (as being a solution to a different problem). My solution was based on CSS tables, and as far as I can see, it does exactly this: I would love to see a solution that stops at the end of the longest line and increases all of the other li underlines as well, regardless of screen or div size. Anyone have that solution using CSS? Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make all link border-bottom of equal length?
On 1/31/14, 1:03 PM, Jukka K. Korpela wrote: 2014-01-31 22:53, Tom Livingston wrote: [...] won't the longest link push out the width of the lis? In which case setting display: block; on the as will cause them to always be as wise as the widest one? And this will result in what the OP wanted, no? No, the li elements too have width: auto by default, so they extend over the available horizontal space, minus the left padding and/or margin. So the underline, when applied to a block element inside li, will extend that way too, quite independently of the lengths of the texts. That’s how blocks behave. Yucca Too true. But you can give the containing ul or ol a shrink to fit the longest link length, for example by floating it, or giving it display:inline-block;. Maybe? —- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
