**EA#5** - ol numbers are in the gutter

You can take various approaches.

list-style-position:inside; cons the text lines wrap under the numerals, or put another way the text and numerals begin at the extreme left edge, this might suit your text though as the line that wraps under the numeral doesn't look that out of place given that you are grammatically trying to flow the li elements together , by that I mean the manner in which #1 ends 'and' as if to say 'and point two'

Not entirely convinced that you should be using a ol list here at least in the context of the copy, but this is one of those questions that Gary is especially adept at working through.

You can add margin-left to the ol rather than padding left (padding left is far better normally for ul/ol lists but margin may be more appropriate.) but regardless of the manner of indenting the li elements bear in mind that at the moment you are describing a 2em padding left this in reality i.e computed is less than the default padding applied of 40px you would need to ramp up to somewhere in the region of 250px to show effect.

You could wrap that top block of paragraphs and li elements in a parent div and apply single margin to that to clear the graphic on left.

...long time no see

I thought I'd get told off if I didn't use an ol for a numbered list. I did try using a ul and doing the numbering as text, but my ul "nodot" doesn't have a bottom margin, so the following para was smack up against it.

I'll think about it. But the list-style: inside gave me dots so I went with the margin. I had tried that too, but only to the order of 10em, so it obviously wasn't enough.

At least it's where I want it. I'll think about the niceties.

Ta muchly.

Don't think you want to establish a margin or padding left in a relative measure do you? It needs to remain constant.

I think an ordered list is probably the most semantic, but I wouldn't rule out a simple bulleted unordered list.

All mainstream browsers now use 40px padding for the indention. Older IEs and Operas use margin. I'd suggest the following to cover all bases:

.entry ol {
  margin: 1em 0;        /*1em is the default top/bottom margin value.  Change 
                          this to match your normal line-height, e.g. 1.25em*/
  overflow:hidden;      /*creates new block formatting context, so you don't 
                          need to worry about behind the float spacing*/
  padding-left: 40px;   /*choose your preferred value--typographically, it 
                          should be 2 times the line-height, e.g. 2.5em*/
  }

cheers,

gary

@Gary what concerned me was the nature of the copy which essentially reads as:

In other words my concern is that in reality the copy is one paragraph as read aloud, yet we have two bullet point items, something feels wrong about that, but perhaps not?

Oh and good point about the overflow, never a very obvious thing to state to effect the running behind the float behaviour.

Ooh! I did a bit of searching here and then I went off and was changing text madly, so FTPing - it's a wonder either of you saw anything

...I come back to sign off and find both of you here

Hmmm...see...I knew if you called Gary I'd get more work to do

Tell me how you think it should look Hugo.

I take it you think they should be bullets and not numbers?

That's why I called him his sixth sense is simply staggering!

You see I was half asleep and suggesting overflow hidden (a daft and misleading property in this context) escaped me needing someone with sharper senses to suggest it.

Not sure at all, I question text flowing in a continuous flow but living in essentially two separate li items, can text flow between li items or are li items / bullet points absolute and separate 'things'.

I'm unsure if it's an issue or not hence calling on the font of all knowledge

So what do we think now?

You can see it here

@ Vicki: I'm trying to make less work for you. You don't need to worry about left margin for shoving the list container out from under the float.

@ Hugo: It is kinda conversational sounding, but it is a list of two items. Since the second depends upon the first, and since the order is not reversible, it's not an unordered list ∴ it's an ordered list. :shrug: Ordered or not, I think bullet list markers would be stronger than the numerals.

cheers,

gary

I think you're both right in a way...

Hugo because it is sort of 2 points flowing; and
Gary because they are 2 points...

But the bullets just look too strong, that's why I've put the dashes - and they're not an option in a ul so that's why I've just converted it to text.

Now I'm confuddled again

Sheesh! I'm gone 23 minutes and you guys hold a symposium, complete with two coffee breaks.

I think it should be a list for structural and semantic reasons. I especially don't like the use of dashes and br elements to simulate a list.

cheers,

gary

@Gary always did think an ol it's clearly not an unordered list, but yes:

"It is kinda conversational sounding, but it is a list of two items."

Is what bothered me, it's all things to all men/women.

I suggest we ignore me and this particular point and simply run with it

@vicky overflow:hidden kills the ol natural behaviour to run full width behind the floated element as non floated elements are meant to do (remember that the child elements or inner contents of an element are naturally moved to clear the floated item otherwise there would be no flow around the floated element.)

Okay...I used Gary's kindly provided code (thank you) and changed it to ul so it's bullets.

I've deleted some text so the second line doesn't wrap, but it's a titchy little indent, should I leave it or line it up with the rest of the text?

Gah...every time I write something there's 2 new posts above me

Hugo...thanks for explaining overflow... I'm not sure I do understand but I'll work on it.

While we're here...I've tried every whichway to centre that pic all to no avail.

Gary - you're right of course...it is an ordered list but it does look better without the numbers, so bullets it is.

@ Vicki: Bullets don't have to be the solid disc, the circle and square are both "lighter weight". E.g. ol {list-style-type: circle;}. If these are points to be made, they should be strong.

@ Hugo: Consider, Hubby gets a call before leaving work,"on your way home, stop by my sister's to pick up the dress she's loaning me, then drop it at the cleaners to be altered." That's a two item ordered list in a conversation. If written, a memo, wouldn't it usually be rendered as a list?

cheers,

gary

I would go back to an ol list

Modern styling dictates that bulleted lists start at the left edge in line with the rest of the text, in much the same way as modern dictates say paragraphs are no longer first word indented and that paragraphs must have two spaces separating them. Having said that the real correct setting out of bullets is that they are meant to fill the left gutter so that they are to the left of the paragraph text.

Ack! No! Don't like that, but I do like them inline with the other text so I'll do that.

@Gary

Yep would be but also in real writing we have no issue however with markup we have a disconnect that doesn't naturally exist in the paragraphs outside the ordered list.

The real world writes:

<p>Please attend to a few things for me</p>
 <list-item-1>#1 do this thing</list-item-1>
<p>and when you have finished with that could you do point two</p>
<list-item-2>#2 get this done</list-item-2>

It's the markup that's getting in my way

@vicky can you switch to laying out this page as an XML documment it'l make more sense

.bodygarden {
  display:block;
  margin:0 auto;
  }

That list more properly is an ol. Just set the list marker you want.

cheers,

gary

Aaargh! What is the list-style-type name for a bullet please? I've tried bullet and disc and W3schools is down.

@Gary...this is really pedantic rather than semantic...an ordered list without order?

Nope, sorry, you didn't teach me that

There is structure, then there is presentation. The list is ordered because it doesn't make sense if the items are reversed, so they're in order. But, just because it's structured as, and semantically is an ordered list doesn't mean you have to number the items.

The non-count markers are disc, circle, and square.

Bookmark this url, http://www.w3.org/TR/CSS21/ In the properties section, you can find every property, and its syntax. As long as I've been at this, when coding, I still keep it open in a tab for easy reference.

cheers,

gary

Oh well then, when you put it like that Silly me.

Actually the disc did work second go, I had the W3 HTML 4.01 marked but not the css, so thanks for that. Both now in my toolbar overflow.

Thanks for sorting the pic too, but I have a feeling it may have to go back in-line since it gets chopped off when you reduce the browser window...I haven't looked but I have the feeling it's gone back to dropping the sidebar in IE *sigh*

I removed the width property. Put it back on, 90% was it?

cheers,

gary

Slow getting back here, but thanks, yes that did work and I wondered about it when I took it off. Thanks Gary Now how do I get the description underneath snug up and centered - should I change the pic and description to a DL?

You won't do any good putting text-align on an inline element. Lose the span and put its styles on the parent p element.

cheers,

gary

Hi Gary - but isn't that .entry p? That will change them all.

I would have used a p as the image's parent and given it an id. Then the image and text would descend from it, and text-align would apply. By making the image block, there is no need for a br to be sure the text went underneath.

As the structure is now, give that caption p an id and style it.

cheers,

gary

Ah...thank you, I will do that then

Perfick! So simple when you know how, I honestly thought I had been that route months ago..but there you are

{mwah}