33 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hello folks

Well the thread title says it all really, they're here.

I've looked in w3schools.com and w3.org (lists) but neither tell me how to line them up (what margins/spacing they have by default) and it's probably specificity again but I'm confudled by it being where the ol is and the quote on the left getting in the way.

My thanks as always.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You can take various

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

'morning Hugo...

...long time no see Smile

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.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't think you want to

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

I think an ordered list is

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

@Gary what concerned me was

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

Hugo blathering wrote:

blah blah blah and on point two equally I put it to you blah blah...

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ooh! I did a bit of searching

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 Smile

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

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Tell me how you think it

Tell me how you think it should look Hugo.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I take it you think they

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

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That's why I called him his

That's why I called him Smile 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Smee wrote: I take it you

Smee wrote:

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

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 Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

So what do we think now? You

So what do we think now?

You can see it here

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

@ Vicki: I'm trying to make

@ 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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I think you're both right in

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 Puzzled

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Sheesh! I'm gone 23 minutes

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

@Gary always did think an ol

@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 Smile

@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.)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okay...I used Gary's kindly

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?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Gah...every time I write

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

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

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

While we're here...I've tried

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.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

@ Vicki: Bullets don't have

@ 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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would go back to an ol list

I would go back to an ol list Smile

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hugo wrote: Having said that

Hugo wrote:

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.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

@Gary Quote: If written, a

@Gary

Quote:

If written, a memo, wouldn't it usually be rendered as a list?

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 Crazy

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

.bodygarden {

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

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Aaargh! What is the

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?

Hugo wrote:

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

Nope, sorry, you didn't teach me that Big smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Structure is not presentation

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Gary wrote: But, just because

Gary wrote:

But, just because it's structured as, and semantically is an ordered list doesn't mean you have to number the items.

Oh well then, when you put it like that Big smile 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*

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Smee wrote: […] Thanks for

Smee wrote:

[…]
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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Slow getting back here, but

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

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Style the parent

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hi Gary - but isn't that

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

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

I would have used a p as the

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ah...thank you, I will do

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

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 41 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Perfick! So simple when you

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

{mwah}

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile