[css-d] way to style list item number?
Hello, Is there a way (excluding using images for bullets) to style the bullet when it is a number or a letter? I'm trying to apply css to some footnotes I'm building. The notes themselves appear in a list at the bottom of my page where each list number (an ol) corresponds to the footnote number. I'd like to try to make the number stand out and actually even wrap it in an a tag if possible to link it back to the footnote reference in the above text. Thank you for any ideas. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.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] way to style list item number?
Angela, Can you show us a sample page to better what you are trying to do? Are you trying to style numbers and letters to bullet ? --- Hakan KIRKAN IT Manager http://miamirealestateinc.com Miami/ FL On Tue, Oct 30, 2012 at 12:36 PM, Angela French afre...@sbctc.edu wrote: Hello, Is there a way (excluding using images for bullets) to style the bullet when it is a number or a letter? I'm trying to apply css to some footnotes I'm building. The notes themselves appear in a list at the bottom of my page where each list number (an ol) corresponds to the footnote number. I'd like to try to make the number stand out and actually even wrap it in an a tag if possible to link it back to the footnote reference in the above text. Thank you for any ideas. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.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] way to style list item number?
On 10/30/12 11:36 AM, Angela French wrote: Is there a way (excluding using images for bullets) to style the bullet when it is a number or a letter? I'm trying to apply css to some footnotes I'm building. The notes themselves appear in a list at the bottom of my page where each list number (an ol) corresponds to the footnote number. I'd like to try to make the number stand out and actually even wrap it in an a tag if possible to link it back to the footnote reference in the above text. ...An ol, or an li? Only Firefox and Opera support http://www.w3.org/TR/css3-content/#counters well enough to accomplish purely what you contemplate, according to the requirements you just posted. To get broad support for your desired results, you'll need to engage in anonymous span abuse - set the item to the larger size, and set the child (abusive) element to the smaller one. The good news (as such) is that when the improved counter support finally takes shape and enjoys market penetration, the junk markup won't pose too much harm. Your idea to create return links is more easily - and in my opinion, more intuitively - by trailing each footnote with crarr; and wrapping *that* in a link like so: li id=footnote1This is my footnote text. a href=#footnote-1-origin title=Return to Textcrarr;/a/li Still better than that would be to use the :target pseudoclass (for the browsers that support it) and a Suckerfish derivative (for the others) to present the note in context. Wikipedia's been doing something along those lines for a while. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ 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] way to style list item number?
Am 30.10.2012 17:36 schrieb Angela French:
Is there a way (excluding using images for bullets) to style the bullet when it is a number
or a letter? I'm trying to apply css to some footnotes I'm building. The notes themselves
appear in a list at the bottom of my page where each list number (an ol)
corresponds to the footnote number. I'd like to try to make the number stand out and
actually even wrap it in an a tag if possible to link it back to the footnote
reference in the above text.
You can't do this in a way that works in today's browsers. You will have
to put the link on the footnote text instead of the list marker (number
or letter). To have different colors, just style the a element then:
HTML:
lia href=#myanchorFootnote Text/a/li
CSS:
li {
color:red; // styles the list element including marker
}
li a {
color:blue; // styles the linked text
}
If you don't want to link the text, do the same with a span instead of
the a.
__
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] way to style list item number?
Ben Henick wrote: Your idea to create return links is more easily - and in my opinion, more intuitively - by trailing each footnote with crarr; and wrapping *that* in a link like so: For me, carriage return and return are as different as chalk and cheese; is there no more appropriate and intuitive symbol generally available ? Philip Taylor __ 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] way to style list item number?
2012-10-30 18:36, Angela French wrote: Is there a way (excluding using images for bullets) to style the bullet when it is a number or a letter? Yes. The simplest solution is to wrap it inside a span element. Of course, you cannot do that if you use ol to generate the list, but as soon as we stop thinking that we *must* use list markup for anything that looks like a list to someone, the solution is obvious. div class=list divspan class=marker1)/span item text/div [...] /div This means that the numbers are part of the document data, not browser-generated. But why not? In order to flexible maintain a list, automatic numbering is useful, but it can usually be done server side. Using ol or ul markup, things get more difficult, since the ideas about styling their markers haven't come to any conclusion. In some cases, you can use auxiliary markup, e.g. lispanitem text/span/li Then you could set e.g. a red color on the li element, black color on the contained span element, with the net effect of making the bullet red. You could also suppress the normal bullets (list-style-type: none) and generate your own bullets, using generated content. I'd like to try to make the number stand out and actually even wrap it in an a tag if possible to link it back to the footnote reference in the above text. Well, if it needs to be a link, it needs to be an element, a real element (not pseudoelement). So the obvious solution appears to be the only solution then: div class=list diva class=marker href=...1)/a item text/div [...] /div 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] way to style list item number?
Everyone - Thanks for all the ideas. I'll play around with them! -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css- discuss.org] On Behalf Of Jukka K. Korpela Sent: Tuesday, October 30, 2012 10:19 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] way to style list item number? 2012-10-30 18:36, Angela French wrote: Is there a way (excluding using images for bullets) to style the bullet when it is a number or a letter? Yes. The simplest solution is to wrap it inside a span element. Of course, you cannot do that if you use ol to generate the list, but as soon as we stop thinking that we *must* use list markup for anything that looks like a list to someone, the solution is obvious. div class=list divspan class=marker1)/span item text/div [...] /div This means that the numbers are part of the document data, not browser- generated. But why not? In order to flexible maintain a list, automatic numbering is useful, but it can usually be done server side. Using ol or ul markup, things get more difficult, since the ideas about styling their markers haven't come to any conclusion. In some cases, you can use auxiliary markup, e.g. lispanitem text/span/li Then you could set e.g. a red color on the li element, black color on the contained span element, with the net effect of making the bullet red. You could also suppress the normal bullets (list-style-type: none) and generate your own bullets, using generated content. I'd like to try to make the number stand out and actually even wrap it in an a tag if possible to link it back to the footnote reference in the above text. Well, if it needs to be a link, it needs to be an element, a real element (not pseudoelement). So the obvious solution appears to be the only solution then: div class=list diva class=marker href=...1)/a item text/div [...] /div 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/ __ 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] way to style list item number?
On 10/30/12 12:18 PM, Philip TAYLOR wrote: For me, carriage return and return are as different as chalk and cheese; is there no more appropriate and intuitive symbol generally available ? ...In Unicode, probably so, and likely in the 8193-8448 (U+2001 to U+2200) code position range. In the HTML entity domain, not so much. the next best choice would be rarr; or uarr;. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ 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-d] explain positioning of this p tag
On this page: http://wet-boew.github.com/wet-boew/demos/footnotes/footnotes-eng.html#fnb2 the example of the footnotes at the bottom has the link back to the original footnote appear first, but in the linear order of the code the p tag in which the link resides appears last. This is great for a screen reader user. I can't figure out how they did it though. The css shows display:inline-block applied. But there must me more to it. That didn't work for me. Thanks for any help. The html: dd id=fnb3 pExample of a footnote containing multiple paragraphs (first paragraph)./p pExample of a footnote containing multiple paragraphs (second paragraph)./p pExample of a footnote containing multiple paragraphs (third paragraph)./p p class=footnote-returna href=#fnb3-refspan class=wb-invisibleReturn to footnote /span3span class=wb-invisible referrer/span/a/p /dd Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.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-d] CSS footnotes
When an HTML link references an on-page fragment that is near the bottom of the page, the browser (when the link is followed) will display that page fragment as close to the top of the page as it can subject to the more important constraint that the last line of the page content will not be higher than the bottom of the browser window. Is there any Magic CSS that can be applied (?to the final element of the page?) that would allow the on-page fragment to rise to the top of the browser window when required yet not generate vertical scroll bars other than those mandated bo other aspects of the page's dimensions ? Philip Taylor __ 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] CSS footnotes
2012-10-30 20:08, Philip TAYLOR wrote:
When an HTML link references an on-page fragment that is near the
bottom of the page, the browser (when the link is followed) will
display that page fragment as close to the top of the page as it
can subject to the more important constraint that the last line
of the page content will not be higher than the bottom of the browser
window. Is there any Magic CSS that can be applied (?to the final
element of the page?) that would allow the on-page fragment to rise
to the top of the browser window when required yet not generate
vertical scroll bars other than those mandated bo other aspects of
the page's dimensions ?
I'm afraid there isn't. I can't see how we could position the page as a
whole that way, even though we could position the element that the
fragment refers to.
But to address the basic problem of recognizing what the link really
took the user to, you can do some styling on the :target pseudo-class, e.g.
:target {
background: #ffd;
color: black;
border: dotted 1px;
}
Then it suddenly becomes important how the link destination has been
marked up, as this code highlight the specific element that has the
corresponding id attribute (or the matching a name=../a element,
id that old-style markup was used).
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] CSS footnotes
Jukka K. Korpela wrote:
But to address the basic problem of recognizing what the link really
took the user to, you can do some styling on the :target pseudo-class, e.g.
:target {
background: #ffd;
color: black;
border: dotted 1px;
}
Then it suddenly becomes important how the link destination has been
marked up, as this code highlight the specific element that has the
corresponding id attribute (or the matching a name=../a element,
id that old-style markup was used).
Thanks, Jukka : that is what I have proposed to the author, but he
really wants me to emulate the printed page. I may succeed in
convincing him given sufficient time; other members of the group
are in favour of more modern presentation styles ...
** Phil.
__
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] explain positioning of this p tag
On Tue, Oct 30, 2012 at 2:06 PM, Angela French afre...@sbctc.edu wrote: On this page: http://wet-boew.github.com/wet-boew/demos/footnotes/footnotes-eng.html#fnb2the example of the footnotes at the bottom has the link back to the original footnote appear first, but in the linear order of the code the p tag in which the link resides appears last. This is great for a screen reader user. I can't figure out how they did it though. The css shows display:inline-block applied. But there must me more to it. That didn't work for me. Thanks for any help. The html: dd id=fnb3 pExample of a footnote containing multiple paragraphs (first paragraph)./p pExample of a footnote containing multiple paragraphs (second paragraph)./p pExample of a footnote containing multiple paragraphs (third paragraph)./p p class=footnote-returna href=#fnb3-refspan class=wb-invisibleReturn to footnote /span3span class=wb-invisible referrer/span/a/p /dd Hey Angela, On the p tag wrapping the readable text, there is some left margin and padding which makes the space where that p class=footnote-return/p is going to end up living. Then there is position: relative; on the dd that wraps each pair of ps in question which makes the next bit work correctly. That next bit is that that the p class=footnote-return/p then has some absolute positioning on it (top: 0;) that pulls it up in to the space created by the aforementioned left margin and padding. Watch out, though...withoug that position: relative; from step #2 these will end up stacked on top of each other up in the top left of the entire page. At least I think that's what's going on there. Tim -- tim.arn...@gmail.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/
