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

Hello folks

I have the list the way I want it except when it's next to a picture.

Then the bullet is outside the margin of the text above it. Is there any cure for this please?

Test site

I know there's supposed to be a second level of LIs, but I figured I'd get this one working first Big smile

Thank you!

Also...some of the photos always seem to give up half way - is there anything I can do about this?

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

greenfairy
greenfairy's picture
Offline
newbie
New Jersey
Last seen: 11 years 23 weeks ago
New Jersey
Timezone: GMT+8
Joined: 2011-03-02
Posts: 2
Points: 2

Many brower still didn't support the use of "line-up" well

Many brower still didn't support the use of "line-up" well,so we'd better don't use it in our css styling defination.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Remember that the block

Remember that the block element next to a float underlies that float. In firebug, hover the ul, then the li to see what I mean. As a quick and dirty fix, give the li elements that start next to the pic a left margin sufficient to clear the width of the float image, e.g. {margin-left: 240px;}.

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: 5 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hello Gary!

Hello Gary! How lovely to hear from you Smile

Ah, yes...of course I didn't remember. When I read it though I remembered you trying to explain it to me when you so helped me style the pullquotes.

I'm trying now but I obviously don't remember as much as I'd like Sad I'm trying to put that as an inline style.

The UL won't take it so I have to look up W3schools to refresh Smile I'll be back!

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: 5 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Yaaay! Took a while but I got

Yaaay! Took a while but I got there Smile

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

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

Well I tried a nested list

Well I tried a nested list and it looked horrible with only a choice of dot, circle or square and all spread out (yes I know I can change this). But they look awful as they are because they don't wrap neatly.

So I might try a ul.nodot (no dot) and type in a dash and see how that looks.

I would also like to use the prettyphoto action here on those photos, but I can't read the css!!

It looks to me as though the css has a style for every photo in his gallery (via it's position) and the styling is nothing I'm familiar with - but I really like the fact that it just pops up and doesn't dim the screen. Are you able to translate it for me?

I can't find the action on the gwebstock page listed on the prettyphoto page either - they're all the traditional dimming lightboxes. If they had a demo I might be able to pull it apart, but the full deal is beyond me.

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: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

We've done this before

We've done this before (:before, get it?).

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tests</title>
 
<style type="text/css">
ul.nodot {
    margin: 0;
    padding-left: 0;
    list-style: none;
    }
 
ul.nodot li:before {
    content: "\2014\a0\a0";
    }
</style>
</head>
 
<body>
  <ul>
    <li>
      <h3>Trauma Relief Training</h3>
 
 
      <ul class="nodot">
	<li>in villages for adults and children</li>
 
	<li>at religious schools</li>
 
	<li>for psychology students at Yogyakarta's Gadjah Mada
	University (UGM)</li>
 
	<li>for volunteers from other NGOs</li>
      </ul>
    </li>
 
 
    <li><h3>Giving presentations … </h3></li>
  </ul>
</body>
</html>
The content is \2014, an emdash, and \a0, a non-breaking space. Notice the use of the heading tag in the top level list. You can use inline OR block elements in a list item (li), but not both. Since there is a sub-list which is block, the text must be in a block; a heading seemed most appropriate. Following top-level list items contain a heading to keep them structurally equal.

Do you really have compelling reason to use that instant pop-up thingie? Or, are you just going artsy-fartsy because you can? They are so annoying.

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: 5 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ummmm....I don't remember

Ummmm....I don't remember before at all *bites bottom lip*

...and why are you using \2014 instead of ampemdash;? Is that just because like things to be difficult to remember, or that they will transform here (in your reply)?

Gary wrote:

Notice the use of the heading tag in the top level list.

I did and it can't be an h3 because they're all over the place and they're bold.

Quote:

You can use inline OR block elements in a list item (li), but not both. Since there is a sub-list which is block, the text must be in a block; a heading seemed most appropriate.

But, but, but...isn't the text already block because it's an LI of the UL above it - at least that's what my Firebug shows. Big slabs, not little sentences.

In fact as it is now I have the li I want isolated, I just have to move it over...and it won't go.

I think using an hx tag for a list item is doing my head in. It's not about whether they are block or inline, they have very particular functions in my head.
And they just don't go together Sad
Must I?
Isn't there another way?

Actually I thought the photos needed to be larger but they're okay and if people want to see bigger ones, maybe they will go look at his sites Wink So no, I don't need it this time around. Thank you for clarifying that 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: 5 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ah...just divined the \2014

Ah...just divined the \2014 is in the css :rolleyes: <-- missing smiley Mr Tony

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: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Smee wrote: Ummmm....I don't

Smee wrote:

Ummmm....I don't remember before at all *bites bottom lip*

Maybe we didn't. I thought we had discussed the :before pseudo element at one time or another.

Quote:

...and why are you using \2014 instead of ampemdash;? Is that just because like things to be difficult to remember, or that they will transform here (in your reply)?

You figured that out on your own. Tongue

You can also paste the characters directly into the css, or do however your editor allows. Emacs, of course, let's me choose from among about 150 standard entry protocols; I use the ΤεΧ typesetting markup language's method.

I wrote:

Notice the use of the heading tag in the top level list.

and then Smee wrote:

I did and it can't be an h3 because they're all over the place and they're bold.

Then use a header of the appropriate level and set its font-weight to normal.

again I wrote:

You can use inline OR block elements in a list item (li), but not both. Since there is a sub-list which is block, the text must be in a block; a heading seemed most appropriate.

Oops, Smee sputtered and wrote:

But, but, but...isn't the text already block because it's an LI of the UL above it - at least that's what my Firebug shows. Big slabs, not little sentences.

The list item element is a block level element, but its contents are either inline, including bare nekkid text, or block; not both.

Quote:

In fact as it is now I have the li I want isolated, I just have to move it over...and it won't go.

Yes, it will. I've already shown you that.

Quote:

I think using an hx tag for a list item is doing my head in. It's not about whether they are block or inline, they have very particular functions in my head.
And they just don't go together Sad
Must I?
Isn't there another way?

You're free to mismark however you wish.Wink Take a look at the markup for the table of contents (toc) here. Note the use of heading tags. Your list has a similar structure. You could use a 'p' element, but I don't think it's nearly as semantically fitting.

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: 5 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote: Emacs, of course,

Quote:

Emacs, of course, let's me choose from among about 150 standard entry protocols; I use the ΤεΧ typesetting markup language's method.

Emus are amenable that way I'm told. And yes, of course you would, because I don't have the faintest idea what that is and I'm not going to be side-tracked now.

Much further on after many worthy and erudite comments ....

Gary wrote:

You could use a 'p' element, but I don't think it's nearly as semantically fitting.

But it is! It is! An h3 is a UL, but a 'p' is very fitting as an 'li'

Problem Solvered (don't know if you have that saying/paint)

Happy Little Vegemite trotts off to implement Mountain Wizard's spectacular instructions once again.

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