UL List. Is this possible?

[shapper]

Hello,

I have the following list:

<ul id="parent" class="parent">
<li>
<img...
</li>
<ul id="child" class="child">
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
</ul>
</ul>

I need to do the following:
1. The list items in Parent should appear side by side.
2. The list items in Child should appear on the same line
3. The image should appear centered vertical and horizontal.

Is this possible?
I have been following a few examples in http://css.maxdesign.com.au/index.htm
However, until now I wasn't able to make this work.

My Css is as follows:

..parent ul li
{
display: inline;
list-style-type: none;
}

..child ul li
{
display: block;
list-style-type: none;
}

Any idea of how to solve this?

Thanks,
Miguel

[John Hosking]

shapper wrote:

Hello,

I have the following list:

<ul id="parent" class="parent">
<li>
<img...
</li>
<ul id="child" class="child">
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
</ul>
</ul>

This markup is invalid. Did you check it?
The child ul can't be a direct child of the parent ul; it can only be a
child of a li. Or put another way, only list items can be children of ul
elements. Bad code =uncertain results.

>
I need to do the following:
1. The list items in Parent should appear side by side.
2. The list items in Child should appear on the same line
3. The image should appear centered vertical and horizontal.

#3: Centered between what and what? You just want the child list items
"down lower" (possibly off the screen) somewhere?

Is this possible?
I have been following a few examples in http://css.maxdesign.com.au/index.htm
However, until now I wasn't able to make this work.

Probably possible, whatever it is, but I don't have time to spend on it
tonight. :-(

>
My Css is as follows:

.parent ul li
{
display: inline;
list-style-type: none;
}

.child ul li
{
display: block;
list-style-type: none;
}

This rule won't help you, because it doesn't apply to any markup you've
mentioned so far. The rule is for any list items which are descendants
of any ul elements which are descendants of any elements with class
"child". You don't have any such classed elements (although you have an
*id* "child", which would be selected by #child in your CSS), and your
child-like element has no descendants which are ul's, although #child is
itself a ul.

HTH
--
John

[shapper]

On Jun 6, 1:12 am, John Hosking <[e-mail]>
wrote:

shapper wrote:

Hello,

I have the following list:

<ul id="parent" class="parent">
<li>
<img...
</li>
<ul id="child" class="child">
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
</ul>
</ul>

This markup is invalid. Did you check it?
The child ul can't be a direct child of the parent ul; it can only be a
child of a li. Or put another way, only list items can be children of ul
elements. Bad code =uncertain results.

I need to do the following:
1. The list items in Parent should appear side by side.
2. The list items in Child should appear on the same line
3. The image should appear centered vertical and horizontal.

#3: Centered between what and what? You just want the child list items
"down lower" (possibly off the screen) somewhere?

Is this possible?
I have been following a few examples inhttp://css.maxdesign.com.au/index.htm
However, until now I wasn't able to make this work.

Probably possible, whatever it is, but I don't have time to spend on it
tonight. :-(

My Css is as follows:

.parent ul li
{
display: inline;
list-style-type: none;
}

.child ul li
{
display: block;
list-style-type: none;
}

This rule won't help you, because it doesn't apply to any markup you've
mentioned so far. The rule is for any list items which are descendants
of any ul elements which are descendants of any elements with class
"child". You don't have any such classed elements (although you have an
*id* "child", which would be selected by #child in your CSS), and your
child-like element has no descendants which are ul's, although #child is
itself a ul.

HTH
--
John

Hi sorry,

I wrote the markup instead of copying it but yes I have the child ul
inside a li:

<ul id="parent" class="parent">
<li>
<img...
</li>
<li>
<ul id="child" class="child">
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
</ul>
</li>
</ul>

Basically, I need to create something as follows, without using
tables:

< ---------------------------- 400 px --------------------------------

>

-----------------------------------------------------------------------------
| | Message 01
| Image | Message 02
| | Message 03
-----------------------------------------------------------------------------
< ---- 80 px ---->
I hope I explained it well.
The lines are just to help me to explain what I need to do.

Thanks,
Miguel

[Jonathan N. Little]

shapper wrote:

Basically, I need to create something as follows, without using
tables:

< ---------------------------- 400 px --------------------------------
-----------------------------------------------------------------------------
| | Message 01
| Image | Message 02
| | Message 03
-----------------------------------------------------------------------------
< ---- 80 px ---->
I hope I explained it well.
The lines are just to help me to explain what I need to do.

Well not a good idea to have text within a pixel constrained block
because if your enlarge the text it will not fit in the block, better to
use "em"s ... but anyway

div.pretty { width: 400px; }
div.pretty img: { float: left; margin: 0 .5em 0 0;}
div.pretty ul { margin: 0; padding: 0; list-style: none; }
<div class="pretty">
<img src="yourImg.jpg" width="80" height="?" alt="the pix">
<ul>
<li>Message 01</li>
<li>Message 02</li>
<li>Message 03</li>
</ul>
</div>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jukka K. Korpela]

Scripsit shapper:

I wrote the markup instead of copying it

And now you know one reason why that was wrong. You still didn't post the
URL, and you quoted the entire message, probably to indicate (as usual) that
you did not read it comprehensively. It is thus not very probably that you
will actually learn from the discussions, but I cannot resist asking one
question:

<ul id="parent" class="parent">
<li>
<img...
</li>
<li>
<ul id="child" class="child">
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
</ul>
</li>
</ul>

What could possibly be the real data that is _adequately_ marked up when it
is marked up as a list with two (2) items, the first one consisting of an
image only and the second one consisting of three pieces of text? In
particular, how is the image so comparable to the inner list that it is
properly written as the first item in a list where the inner list is the
second item?

If the outer list isn't really a list, you are creating some unnecessary
complications.

Basically, I need to create something as follows, without using
tables:

- -

< ---------------------------- 400 px --------------------------------

So you "need" to force horizontal scrolling when your page is viewed in a
window narrower than 400 pixels, and you "need" to restrict the width to 400
pixels, no matter what the font size is. What creates these "needs"?

I hope I explained it well.

You didn't.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-06-06, shapper <md*****@gmail.comwrote:

On Jun 6, 1:12 am, John Hosking <[e-mail]>
wrote:

>shapper wrote:

Hello,

I have the following list:

[...]

I need to do the following:
1. The list items in Parent should appear side by side.
2. The list items in Child should appear on the same line
3. The image should appear centered vertical and horizontal.

[...]

My Css is as follows:

.parent ul li
{
display: inline;
list-style-type: none;
}

.child ul li
{
display: block;
list-style-type: none;
}

[...]

><ul id="parent" class="parent">
<li>
<img...
</li>
<li>
<ul id="child" class="child">
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
</ul>
</li>
</ul>

Basically, I need to create something as follows, without using
tables:

< ---------------------------- 400 px --------------------------------

>>

-----------------------------------------------------------------------------
| | Message 01
| Image | Message 02
| | Message 03
-----------------------------------------------------------------------------
< ---- 80 px ---->
I hope I explained it well.
The lines are just to help me to explain what I need to do.

If you really want that exact vertical alignment, and the heights of the
list and the image are "fluid", you will need to use a table (or
inline-block but that's not supported widely). One row, two cells, image
in the first one, <ulin the second one, vertical-align: middle set on
td and text-align: center set on the first td.

Just noticed you said "without using tables". You could use display:
table-cell and display: table-row; do you need it to work on IE?

The "no-tables" philosophy is not highly compatible with wanting things
like a lot of vertical centering and supporting IE.

If you can live without vertical centering just do it like this:

img
{
float: left;
}

li
{
display: block;
list-style-type: none;
}

<img src="flowers-100.png">
<ul id="child" class="child">
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
</ul>

As Mr Korpela pointed out there's not much reason why the <imgneeds to
be inside a list-item.