473,836 Members | 2,136 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Styling List Items

Hi...

Is there any way to style a List Item a different color and size than
the <LI> in an Ordered List?

I'd like a red super-script number and a dark blue text in a page's
footnotes. And this be done using style sheets?

--
- Yours truly, Pete Collinson
Jul 20 '05 #1
5 6840
"Peter Collinson" <bl******@opton line.net> wrote:
Is there any way to style a List Item a different color and size than
the <LI> in an Ordered List?
The question does not parse. Do you mean to ask whether there is a way to
style a list item except by styling a list item? (Of course, you can style
list items in an unordered list, too.)
I'd like a red super-script number and a dark blue text in a page's
footnotes. And this be done using style sheets?


How does this relate to the above? It should relate, since the Subject
line mentions styling list items only.

Using red color for text is almost always a mistake, unless it's a warning
of some kind. Using dark blue for something that isn't a link is usually a
mistake, too.

But what is it that you are really trying to accomplish? I don't think we
can see that unless you post a URL of the current design. Specifically,
what do you mean by "footnotes" ?

For some ideas on how to "map" footnotes of print design to something that
works on the Web, see http://www.cs.tut.fi/~jkorpela/www/fn.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2
Jukka Korpela <jk******@cs.tu t.fi> wrote:
Is there any way to style a List Item a different color
and size than the <LI> in an Ordered List?
The question does not parse. Do you mean to ask whether
there is a way to style a list item except by styling a list item?
(Of course, you can style list items in an unordered list, too.)
How 'bout this... I would like to make the number in an ol list a link a
separate color from the List Item.
I'd like a red super-script number and a dark blue text in
a page's footnotes. And this be done using style sheets?

How does this relate to the above? It should relate,
since the Subject line mentions styling list items only.
Could we please get past that? If I used improper nomenclature, I
apologize.
Using red color for text is almost always a mistake...
I do not wish to use red for the text. I wish to use dark blue (#084570)
for the text.
...unless it's a warning of some kind. Using dark blue
for something that isn't a link is usually a mistake, too.
I'll take that under advisement.
But what is it that you are really trying to accomplish?
I don't think we can see that unless you post a URL of
the current design. Specifically, what do you mean by
"footnotes" ?


Exactly what you mean by "Footnotes" or "Endnotes" in your referenced
page.

1. Greeking greeking greeking greeking
greeking greeking greeking greeking.

The number and period ("1.") should be red superscript. The text should
be in dark blue. I can get everything but the Number, but can fake the
effect with a nested DIV styled as a hanging indent.

Div.nb {
text-indent: -2.0em;
padding-left: 2.5em;
}

Rather than number "manually," I'd prefer to do it as an Ordered List.

--
- Yours truly, Pete Collinson
Jul 20 '05 #3
In article <xK************ ***********@new s4.srv.hcvlny.c v.net>, Peter
Collinson wrote:
Exactly what you mean by "Footnotes" or "Endnotes" in your referenced
page.
I believe footnotes are those that in book on same page, and endnotes
ones that are in the end. But I haven't even yet read the article, so I
could be wrong. (will read it later, it'll be useful)
1. Greeking greeking greeking greeking
greeking greeking greeking greeking.

The number and period ("1.") should be red superscript. The text should
be in dark blue.
I don't comment colors, that was already done.
Rather than number "manually," I'd prefer to do it as an Ordered List.


I suppose you mean not numbering it by hand?

I think you have at least 2 choises:
1. Position contents of list relatively, so figure seems superscript, and
make font-size smaller using small font for list and normal on links.
http://www.student.oulu.fi/~laurirai...footnotes.html

2. Use generated content. (only works Opera 5+)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #4
"Peter Collinson" <bl******@opton line.net> wrote:
How 'bout this... I would like to make the number in an ol list a link a
separate color from the List Item.
It still doesn't quite parse. I mean the "to make [something] a link
a separate color". To make something a link, you use HTML markup, not CSS.
If I used improper nomenclature, I apologize.
Apology accepted, but this doesn't solve the problem that your problem
hasn't been adequately described. A URL would at least have shown the
markup you use.
1. Greeking greeking greeking greeking
greeking greeking greeking greeking.
I suppose this refers to an <ol> element at the end of your page.
The number and period ("1.") should be red superscript.
That doesn't sound like a good idea. In an endnotes section, there is no
reason to make the numbers superscripts. In footnote or endnote
_references_, superscripting has the purpose of making them less
noticeable, less disturbing for normal reading of the text. But this
reason is lost when we turn to the footnotes or endnotes themselves.

Anyway, technically, they could be affected by using the marker-related
features of CSS 2, but these are poorly supported.
I can get everything but the Number, but can fake the
effect with a nested DIV styled as a hanging indent.

Div.nb {
text-indent: -2.0em;
padding-left: 2.5em;
}
How does this affect the vertical position or color of the number?
It's not faking - instead, it's a simple (and not uncommon) solution to
the problem of getting hanging indents, but that's a completely different
problem.

To make it possible to style the endnote numbers in the endnotes
themselves, the only way that works reasonably is to use extra markup. For
example, make the list <ul>, with list-style-type: none in CSS, and use
markup like
<li><a name="fn1" href="#fr1" class="fnn">1.</a> text of list item</li>
which implies that you can use .fnn as a selector when specifying the
style of the numbers. Here the name and href attributes are not relevant
to that styling but useful for the functionality (making the entry a link
destination and a link back to the reference).
Rather than number "manually," I'd prefer to do it as an Ordered List.


But you need to number the endnote _references_ "manually" anyway - unless
you rely on generated content and counters, which would have little
browser coverage and isn't a good idea even in principle, since it would
fail in non-CSS browsing situations
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #5
Peter Collinson wrote:
Jukka Korpela <jk******@cs.tu t.fi> wrote:
Is there any way to style a List Item a different color
and size than the <LI> in an Ordered List?

The question does not parse. Do you mean to ask whether
there is a way to style a list item except by styling a list item?
(Of course, you can style list items in an unordered list, too.)


How 'bout this... I would like to make the number in an ol list a
link a separate color from the List Item.


I think you are confused about the names, or I just don't understand
what you mean; in HTML you got:
"Unordered lists (UL), ordered lists (OL), and list items (LI)"
http://www.w3.org/TR/html401/struct/lists.html#h-10.2

To differentiate a link within a list item of an unordered list from
one of an ordered list, use following CSS:

ol li a { bla; }
ul li a { bla; bla; }

Or do you want to make a link out of the number of an <ol>?

--
Google Blogoscoped
http://blog.outer-court.com
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
731
by: Ray | last post by:
Hi Groups To achieve the visual effect of the page http://www.freewebs.com/nsl/test1.html but remove the table and use CSS, I wrote a page like this http://www.freewebs.com/nsl/test2.html I define items in the <dl> element inline, and use DIV to break a dt-dd group to a block. I also use DIV to split the <ul> element into to 3 columns. But this page fails the XHTML validation. XHTML does not allow me to
5
2590
by: John Topley | last post by:
Hi, I'm doing some work in an intranet environment where I'm forced to use IE 6.0. Is it possible to style (unordered) nested lists so that the inner list items have a different appearance to the outer list items? I can't get it to work using descendant selectors. Thanks in advance, John
0
3245
by: Brian Henry | last post by:
Here is another virtual mode example for the .NET 2.0 framework while working with the list view. Since you can not access the items collection of the list view you need to do sorting another way... here is my code on how I did it to help anyone starting out get an idea of how to use virtual mode in ..NET 2.0 Imports CrystalDecisions.CrystalReports.Engine Imports CrystalDecisions.Shared
10
2024
by: matt_randle | last post by:
Hi, I have a problem styling a definition list. If you look at http://68.178.211.60/MattRandle/Guides/Plants/MarginalsNZ.htm you will see the effect I am trying to achieve. If, however, the flower image is smaller than the description text that appears to its
6
2303
by: ashkaan57 | last post by:
Hi, How can I set up the styling for different levels of <ULto use different images for bullets, be indenetd differently, ... Like: .. list 1 - item 1 - item 2 .. list 2
2
1719
by: vkfmj | last post by:
I am bidding on a project that was coded completely in php with basic tables containing the data. My job is to make the site look pretty. I am a designer and I can *read* the php, but am not the person to generate or tweak code. I can generate the CSS styling to do the bulk of the design, but am running in circles trying to figure out how to style this output successfully: <? $sql = "select * from masterCategory"; $masterResult =...
3
4216
by: Momomo | last post by:
Hi, I am having a problem with a control which is caused by a style on the page which I am not able to trace. If I use the control in a page without any styling it looks ok. Is there a way to remove/turnoff all CSS styling inside a div?
3
1751
by: shapper | last post by:
Hello, I am creating a simple navigation bar using a list. My anchor tags inside each list item have a background and margin. The problem is they are overlapping. I then added to the li tag margin-top: 20px. The problem is that the bottom background of the last element disappears. I think I might doing something wrong on my styling because when I fix
2
2460
by: shapper | last post by:
Hello, I am styling the labels on a section of my page as follows: label {float: left; width: 6.5em;} Now I want to remove this styling from a label that has the class "Message". Mu questions are:
0
9812
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9657
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10243
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9359
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7775
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5642
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5812
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4443
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4003
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.