Jump to content

Nested Lists


youngros

Recommended Posts

Building my sitemap using nested lists, which I have done before, but have now rebuilt my site and have had to do a new one.

As I am having upload problems today I can't show the page and the code, but my problem is getting the list to indent, not sure why it isn't doing it as I used the same css as before.

Previously the nested ul would be further across the page, now they are all in a straight line.

 

html is

 

 

css is

 

#sitemap {

text-indent: 100px;

list-style-position: inside;

}

Link to comment
Share on other sites

nested lists are horrible! My tools page is 80k of nested lists and I still have to stare at it when I build a new one. I believe your missing a few tags - take this section - like this...

 

 

 

Edit - See I messed up

Edit - changed it again

Edit - changed it again - I put this one in the browser - looks like what you want. I guess it just matters what look your after.

Edited by Eric
Link to comment
Share on other sites

Your list is indenting by 100px in IE7 and Firefox. I edited your styles like this to add a width and background-color to the div just to check:-

#sitemap { width: 400px; background-color: #eee;

text-indent: 100px;

list-style-position: inside;

ul, li { margin: 0; padding: 0; }

 

which showed the gray div with 100 px space on the left.

 

I also added ul, li { margin: 0; padding: 0; } which didn't make any difference but it is a good idea with lists as the ul tag has different default margins in different browsers and it helps to get them all doing the same thing first, then you add margins or padding where you want and it should be the same for all of them. In this case the text-indent seems to have set them all the same.

 

Look at item 5 here:-

http://w ww.wickham43.net/lists.php

which shows two columns, the left with default margins and the right with corrected margins, the upper set for list-style-outside and the bottom two for list-style-inside so the bottom right applies to you and you have text-indent in addition. See if it clarifies the matter.

Link to comment
Share on other sites

Re Eric's edits; I think the tags were correct if the nested ul is supposed to be inside the Diary li tag, it looked OK to me as it was originally in the first post.

 

OK I put it back. Yeah, after I posted, I went and looked at my code on my tools page and saw that it was different. But, it's different because I have a heading (less indented/& bolded) in each nested list. Confusing - to early - thanks for catching it...

Link to comment
Share on other sites

Don't you just love those nested lists!! Fairly certain the code is OK, but as I can't upload at the moment, can't check it.

 

It should look something like this ww w.auxano creative.com/sitemap but mine is just in a straight line list even with Wickams code. Strange as the last time I did it, it worked.

 

I start my css page with

 

* {

margin: 0;

padding: 0;

}

 

so the defaults are already set.

Link to comment
Share on other sites

You might find it more reliable to use margin-left instead of text-indent:-

* { margin: 0; padding: 0; }

#sitemap { width: 400px; background-color: #eee;

/*text-indent: 100px;*/

list-style-position: inside; }

#sitemap ul { margin-left: 30px; }

#sitemap ul ul { margin-left: 100px; } /*for the nested ul tag if you want a different margin-left there.*/

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...