Re: 2 lists: 1 left aligned and 1 right aligned on same line

Please list important information not just in the message header, but
repeat it in the message body.

"JB" <me (AT) here (DOT) com> wrote:

Subject: 2 lists: 1 left aligned and 1 right aligned on same line

about: http://www.borovere.plus.com/css/new.htm

Why are you using 2 lists?

Your minimised test case doesn't allow us to see the context and thus
what you are actually trying to do.

Judging by the little information that is there one list seems more
appropriate.

If you want something resembling this navbar:
http://www.pan-europe.utvinternet.ie/links.htm

It can be done by setting <li> to inline, specifying text-align:right on
the <ul>, specify position:relative on the <ul> to make it the
containing element, absolutely positioning the one link you want left
aligned, and then giving the <ul> a left padding in em's to the size of
the positioned link text.

--
Spartanicus

"Spartanicus" <invalid (AT) invalid (DOT) invalid> wrote

Please list important information not just in the message header, but
repeat it in the message body.

"JB" <me (AT) here (DOT) com> wrote:

Subject: 2 lists: 1 left aligned and 1 right aligned on same line

about: http://www.borovere.plus.com/css/new.htm

Why are you using 2 lists?

Your minimised test case doesn't allow us to see the context and thus
what you are actually trying to do.

Judging by the little information that is there one list seems more
appropriate.

If you want something resembling this navbar:
http://www.pan-europe.utvinternet.ie/links.htm

It can be done by setting <li> to inline, specifying text-align:right on
the <ul>, specify position:relative on the <ul> to make it the
containing element, absolutely positioning the one link you want left
aligned, and then giving the <ul> a left padding in em's to the size of
the positioned link text.

--
Spartanicus

Hi Spartanicus,

Great advice thanks. It now looks great in Firefox but is messed up in IE6.
The "home" link which I want to be on the left of the screen is now
appearing 3 ems (padding-left) from the leftmost part of the <ul>. When I
set the width of the <ul> to 100%, it looks perfect in IE6 but in Firefox, I
get a horizontal scroll.

So close! http://www.borovere.plus.com/css/new.htm

Thanks,

Jeff

"JB" <me (AT) here (DOT) com> wrote

"Spartanicus" <invalid (AT) invalid (DOT) invalid> wrote in message
news:fcguv112jnmmmo69jts9v440vpd7n1eg1h (AT) news (DOT) spartanicus.utvinternet.ie...
Please list important information not just in the message header, but
repeat it in the message body.

"JB" <me (AT) here (DOT) com> wrote:

Subject: 2 lists: 1 left aligned and 1 right aligned on same line

about: http://www.borovere.plus.com/css/new.htm

Why are you using 2 lists?

Your minimised test case doesn't allow us to see the context and thus
what you are actually trying to do.

Judging by the little information that is there one list seems more
appropriate.

If you want something resembling this navbar:
http://www.pan-europe.utvinternet.ie/links.htm

It can be done by setting <li> to inline, specifying text-align:right on
the <ul>, specify position:relative on the <ul> to make it the
containing element, absolutely positioning the one link you want left
aligned, and then giving the <ul> a left padding in em's to the size of
the positioned link text.

--
Spartanicus

Hi Spartanicus,

Great advice thanks. It now looks great in Firefox but is messed up in
IE6. The "home" link which I want to be on the left of the screen is now
appearing 3 ems (padding-left) from the leftmost part of the <ul>. When I
set the width of the <ul> to 100%, it looks perfect in IE6 but in Firefox,
I get a horizontal scroll.

So close! http://www.borovere.plus.com/css/new.htm

Thanks,

Jeff

In fact, I've fixed it. Had a padding issue!

Thanks all.

Jeff

It can be done by setting <li> to inline, specifying text-align:right on
the <ul>, specify position:relative on the <ul> to make it the
containing element,

Spartanicus,

How does position:relative make the <ul> a containing element? Can you
expand on this concept or maybe point me to a url that explains?

Thanks.

--
Viken K.
http://home.comcast.net/~vikenk

"Viken Karaguesian" <vikenkNO_SPAM (AT) NO_SPAMcomcast (DOT) net> wrote:

How does position:relative make the <ul> a containing element? Can you
expand on this concept or maybe point me to a url that explains?

http://www.w3.org/TR/CSS21/visudet.h...-block-details

--
Spartanicus

How does position:relative make the <ul> a containing element? Can you
expand on this concept or maybe point me to a url that explains?

http://www.w3.org/TR/CSS21/visudet.h...-block-details

Thanks for the reply Spartanicus. If I understand this correctly, a
containing element is similar to a block type element? Setting something as
position: relative makes it display: block by default?

(from the w3.org link)
"For other elements, if the element's position is 'relative' or 'static',
the containing block is formed by the content edge of the nearest
block-level, table cell or inline-block ancestor box."

So, in this case, setting a <ul> to position: relative (without specifying
left: and top also aligns it to the left edge of its containing <div> or
<td>?

--
Viken K.
http://home.comcast.net/~vikenk

"Viken Karaguesian" <vikenkNO_SPAM (AT) NO_SPAMcomcast (DOT) net> wrote:

How does position:relative make the <ul> a containing element? Can you
expand on this concept or maybe point me to a url that explains?

http://www.w3.org/TR/CSS21/visudet.h...-block-details

Thanks for the reply Spartanicus. If I understand this correctly, a
containing element is similar to a block type element?

No, the correct phrase is "containing block" (not "containing element"),
and the containing block can be inline.

Setting something as
position: relative makes it display: block by default?

It has no effect on the display property.

(from the w3.org link)
"For other elements, if the element's position is 'relative' or 'static',
the containing block is formed by the content edge of the nearest
block-level, table cell or inline-block ancestor box."

So, in this case, setting a <ul> to position: relative (without specifying
left: and top also aligns it to the left edge of its containing <div> or
td>?

No, positioned elements (The "Home" link in this example) are positioned
relative to their "containing block". The containing block is the
nearest ancestor with a position of "absolute", "relative" or "fixed",
or the "initial containing block" if there is no such element.

In this case setting "position:relative" to the <ul> causes the
positioned descendant (the "Home" link) to be positioned relative to the
padding edge of the <ul>.

See the box model diagram in the CSS spec to see where the padding edge
lies.

--
Spartanicus