Re: [css-d] aligning li items
Thanks to everyone on the list for your help, turns out the biz didn't want that at all. We wound up doing something else - go figure :-\ thanks again! On 5/18/05, Peter Williams <[EMAIL PROTECTED]> wrote: > > -Original Message- > > From: Keith Sader > > > > We've got a requirement to align some li items. > > > > The list items are basically expaining acronyms. > > > > ABC- Alpha Beta Charlie > > DFQG - Delta Fox Quarrel Gamma > > > > Surely this is the job of the Definition List [dl] > > It uses two components, the [dt] Deefinition Term > and the [dd] Definition Definition. > > You could style the list and items to suit your formatting requirements. > > -- > Peter Williams > > > -- Keith Sader [EMAIL PROTECTED] http://www.saderfamily.org/roller/page/ksader __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] aligning li items
> -Original Message- > From: Keith Sader > > We've got a requirement to align some li items. > > The list items are basically expaining acronyms. > > ABC- Alpha Beta Charlie > DFQG - Delta Fox Quarrel Gamma > Surely this is the job of the Definition List [dl] It uses two components, the [dt] Deefinition Term and the [dd] Definition Definition. You could style the list and items to suit your formatting requirements. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning li items
I took Schalk's code and enhanced it a bit. As mentioned earlier, for
bullets just use a background image on the acronym class (with some left
padding).
.section {
margin-top:15px;
display:block;
clear:both;
}
.acronym {
float:left;
width:100px;
border:1px solid gray;
}
.dash {
float:left;
width:15px;
border:1px solid gray;
}
.acr-explain {
float:left;
text-align:left;
border:1px solid red;
}
Acronym 1
-
Acronym 1 Explanation
Acronym 2
-
Acronym 2 Explanation longer
Acronym 3
-
Acronym 3 Explanation really long
Schalk Neethling wrote:
Keith
If Justin's does not do the trick try to float the acronym div left and
the other right.
Then your styles:
.acronym {
float:left;
width:200px;
}
.acr-explain {
float:right;
width:400px;
text-align:left;
}
Justin Reid wrote:
Keith:
li span {
width: 200px;
}
but this doesn't give me a 'default' box area to keep the acronyms in.
Any suggestions?
Have you also tried making the span block level in that scenario?
-Justin Reid
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] aligning li items
> Is there a way to decorate DLs that makes it look like a list?
Sure, use a background image of a bullet on the dt.
-Nigel
-Original Message-
From: Keith Sader [mailto:[EMAIL PROTECTED]
Sent: Wednesday, May 18, 2005 3:03 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] aligning li items
We're trying both.
The DL makes more sense to me, but we need the bullet decorations. Is
there a way to decorate DLs that makes it look like a list?
thanks to everyone who's helped so far!
On 5/18/05, Duckworth, Nigel <[EMAIL PROTECTED]> wrote:
> Keith,
>
> Do you have to use ? It makes more sense to use , something
> like
> this:
>
>
> dl { width: 440px; }
> dt { float: left; width: 100px; text-align: right; clear: both; } dd {
> float: right; width: 300px }
>
> term 1 -
> Term 1 is the very first term in the list.
> term 2 -
> Term 2 is the second term in this definition list.
> term 3 -
> Term 3 is the third term in this fairly long definition
> list.
>
>
> -Nigel
>
>
> -Original Message-
> From: Keith Sader [mailto:[EMAIL PROTECTED]
> Sent: Wednesday, May 18, 2005 11:08 AM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] aligning li items
>
> Greetings.
>
> We've got a requirement to align some li items.
>
> The list items are basically expaining acronyms.
>
> ABC- Alpha Beta Charlie
> DFQG - Delta Fox Quarrel Gamma
>
> However the alignment requirement is such that the acronym
> explanations are all lined up at the dashes.
>
> I've thought of structuring the html like this:
>
> ABC- Alpha...
> DFQG- DFQG...
>
> then adding the following style
>
> li span {
>width: 200px;
> }
>
> but this doesn't give me a 'default' box area to keep the acronyms in.
> Any suggestions? I've looked at list-o-matic and I don't see anything
> that does this.
>
> thanks,
> --
> Keith Sader
> [EMAIL PROTECTED] http://www.saderfamily.org/roller/page/ksader
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
--
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning li items
We're trying both.
The DL makes more sense to me, but we need the bullet decorations. Is
there a way to decorate DLs that makes it look like a list?
thanks to everyone who's helped so far!
On 5/18/05, Duckworth, Nigel <[EMAIL PROTECTED]> wrote:
> Keith,
>
> Do you have to use ? It makes more sense to use , something like
> this:
>
>
> dl { width: 440px; }
> dt { float: left; width: 100px; text-align: right; clear: both; }
> dd { float: right; width: 300px }
>
>
> term 1 -
> Term 1 is the very first term in the list.
> term 2 -
> Term 2 is the second term in this definition list.
> term 3 -
> Term 3 is the third term in this fairly long definition
> list.
>
>
> -Nigel
>
>
> -Original Message-
> From: Keith Sader [mailto:[EMAIL PROTECTED]
> Sent: Wednesday, May 18, 2005 11:08 AM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] aligning li items
>
> Greetings.
>
> We've got a requirement to align some li items.
>
> The list items are basically expaining acronyms.
>
> ABC- Alpha Beta Charlie
> DFQG - Delta Fox Quarrel Gamma
>
> However the alignment requirement is such that the acronym explanations
> are all lined up at the dashes.
>
> I've thought of structuring the html like this:
>
> ABC- Alpha...
> DFQG- DFQG...
>
> then adding the following style
>
> li span {
>width: 200px;
> }
>
> but this doesn't give me a 'default' box area to keep the acronyms in.
> Any suggestions? I've looked at list-o-matic and I don't see anything
> that does this.
>
> thanks,
> --
> Keith Sader
> [EMAIL PROTECTED]
> http://www.saderfamily.org/roller/page/ksader
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
--
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] aligning li items
Keith,
Do you have to use ? It makes more sense to use , something like
this:
dl { width: 440px; }
dt { float: left; width: 100px; text-align: right; clear: both; }
dd { float: right; width: 300px }
term 1 -
Term 1 is the very first term in the list.
term 2 -
Term 2 is the second term in this definition list.
term 3 -
Term 3 is the third term in this fairly long definition
list.
-Nigel
-Original Message-
From: Keith Sader [mailto:[EMAIL PROTECTED]
Sent: Wednesday, May 18, 2005 11:08 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] aligning li items
Greetings.
We've got a requirement to align some li items.
The list items are basically expaining acronyms.
ABC- Alpha Beta Charlie
DFQG - Delta Fox Quarrel Gamma
However the alignment requirement is such that the acronym explanations
are all lined up at the dashes.
I've thought of structuring the html like this:
ABC- Alpha...
DFQG- DFQG...
then adding the following style
li span {
width: 200px;
}
but this doesn't give me a 'default' box area to keep the acronyms in.
Any suggestions? I've looked at list-o-matic and I don't see anything
that does this.
thanks,
--
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning li items
Keith
If Justin's does not do the trick try to float the acronym div left and
the other right.
Then your styles:
.acronym {
float:left;
width:200px;
}
.acr-explain {
float:right;
width:400px;
text-align:left;
}
Justin Reid wrote:
Keith:
li span {
width: 200px;
}
but this doesn't give me a 'default' box area to keep the acronyms in.
Any suggestions?
Have you also tried making the span block level in that scenario?
-Justin Reid
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers
emotionalize.conceptualize.visualize.realize
Landlines
Tel: +27125468436
Fax: +27125468436
Web
email:[EMAIL PROTECTED]
Global: www.volume4.com
Messenger
Yahoo!: v_olume4
AOL: v0lume4
MSN: [EMAIL PROTECTED]
We support OpenSource
Get Firefox!- The browser reloaded - http://www.mozilla.org/products/firefox/
This message contains information that is considered to be sensitive or
confidential and may not be forwarded or disclosed to any other party without
the permission of the sender. If you received this message in error, please
notify me immediately so that I can correct and delete the original email.
Thank you.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning li items
Keith:
> li span {
>width: 200px;
> }
>
> but this doesn't give me a 'default' box area to keep the acronyms in.
> Any suggestions?
Have you also tried making the span block level in that scenario?
-Justin Reid
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning li items
Thanks to everyone who has replied so far.
I tried Schalk's suggestion and it didn't work, the Acronyms and
definitions didn't separate.
We are using the transitional 4.01 HTML - would this affect the
browser's styling?
thanks,
On 5/18/05, Schalk Neethling <[EMAIL PROTECTED]> wrote:
> Keith
>
> Give this a try:
>
>
> ABC-
> Alpha Beta Charlie
> ABC-
> Alpha Beta Charlie
>
>
> Then your styles:
> .acronym {
> width:200px;
> }
> .acr-explain {
> width:400px;
> text-align:left;
> }
>
> Let me know if this helps.
> .
> Keith Sader wrote:
>
> >Greetings.
> >
> >We've got a requirement to align some li items.
> >
> >The list items are basically expaining acronyms.
> >
> >ABC- Alpha Beta Charlie
> >DFQG - Delta Fox Quarrel Gamma
> >
> >However the alignment requirement is such that the acronym
> >explanations are all lined up at the dashes.
> >
> >
> --
> Kind Regards
> Schalk Neethling
> Web Developer.Designer.Programmer.President
> Volume4.Business.Solution.Developers
> emotionalize.conceptualize.visualize.realize
> Landlines
> Tel: +27125468436
> Fax: +27125468436
> Web
> email:[EMAIL PROTECTED]
> Global: www.volume4.com
> Messenger
> Yahoo!: v_olume4
> AOL: v0lume4
> MSN: [EMAIL PROTECTED]
>
> We support OpenSource
> Get Firefox!- The browser reloaded - http://www.mozilla.org/products/firefox/
>
> This message contains information that is considered to be sensitive or
> confidential and may not be forwarded or disclosed to any other party without
> the permission of the sender. If you received this message in error, please
> notify me immediately so that I can correct and delete the original email.
> Thank you.
>
>
--
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] aligning li items
Keith
Give this a try:
ABC-
Alpha Beta Charlie
ABC-
Alpha Beta Charlie
Then your styles:
.acronym {
width:200px;
}
.acr-explain {
width:400px;
text-align:left;
}
Let me know if this helps.
.
Keith Sader wrote:
Greetings.
We've got a requirement to align some li items.
The list items are basically expaining acronyms.
ABC- Alpha Beta Charlie
DFQG - Delta Fox Quarrel Gamma
However the alignment requirement is such that the acronym
explanations are all lined up at the dashes.
--
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers
emotionalize.conceptualize.visualize.realize
Landlines
Tel: +27125468436
Fax: +27125468436
Web
email:[EMAIL PROTECTED]
Global: www.volume4.com
Messenger
Yahoo!: v_olume4
AOL: v0lume4
MSN: [EMAIL PROTECTED]
We support OpenSource
Get Firefox!- The browser reloaded - http://www.mozilla.org/products/firefox/
This message contains information that is considered to be sensitive or
confidential and may not be forwarded or disclosed to any other party without
the permission of the sender. If you received this message in error, please
notify me immediately so that I can correct and delete the original email.
Thank you.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
