youngros Posted February 5, 2009 Report Share Posted February 5, 2009 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 Home Meet Us The Church Services Sermons The Cemetery Find Us Outreach Diary Weekly Events Future Events Past Events News BMDs Baptisms Weddings Funerals Flowers Business Plan Property Plan Garden Plan Fundraising Minutes Sitemap Useful Links css is #sitemap { text-indent: 100px; list-style-position: inside; } Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted February 5, 2009 Report Share Posted February 5, 2009 (edited) 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... Home Meet Us The Church Services Sermons The Cemetery Find Us Outreach Diary Weekly Events Future Events Past Events News 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 February 5, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 5, 2009 Report Share Posted February 5, 2009 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 5, 2009 Report Share Posted February 5, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted February 5, 2009 Report Share Posted February 5, 2009 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... Quote Link to comment Share on other sites More sharing options...
youngros Posted February 5, 2009 Author Report Share Posted February 5, 2009 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 5, 2009 Report Share Posted February 5, 2009 (edited) 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 February 5, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
youngros Posted February 5, 2009 Author Report Share Posted February 5, 2009 Thanks Wickham, it's looking good now. Once I can upload then you can all review it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.