Help with a nested list

HTML & CSS
1

I’m trying to use a nested list system for my footer… Here is what I want it to look like:

[RIGHT]
Visitor Info | About Us | Events | Sermons | Resources
Ministries • Adults | Kids | Missions[/RIGHT]

Its container div is floated right.

It’s confusing…and took a lot of work to get it to do what I wanted it to do: display both lists next to eachother, while keeping the text right-justified. BUT now that both lists are floating right, the order of the items has been reversed! It displays in the browser like this:

[RIGHT]| Resources | Sermons | Events | Visitor Info | About Us
| Ministries | Missions |Youth | Adults[/RIGHT]

Is there something I’m missing? Is there a better way to do this?

Oh, and in addition - the list-style: disc isn’t showing up. Is it even possible to do what I want to do?

Here’s the HTML I’m trying to use:

<ul class="footer-main">
                <li class="footer-first"><a href="#">About Us</a></li>
                <li><a href="#">Visitor Info</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Sermons</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Ministries</a>
                    <ul class="footer-sub">
                        <li class="sub-dot"><a href="#">Adults </a></li>
                        <li><a href="#">Youth </a></li>
                        <li><a href="#">Missions</a></li>
                    </ul>
                </li>
            </ul>

Visitor, Events, Sermons, Resources, and Ministries need to all be part of the same list, but because Ministries is the only page with subpages, I needed a way to communicate that in both the visual design and the use of accessible code.

Here’s my css:

ul.footer-main {list-style:none outside none;
		float:right; 
		text-align:right;
		}
		ul.footer-main li{display:inline;
			float:right; 
			text-align:right;
			margin-bottom:7px
			}
		ul.footer-main li.footer-first{border-left:medium none;}
		ul.footer-main li a, ul.footer-sub li a {
			font-family:Times, "Times New Roman", serif;
			font-size:16px;
			text-decoration:underline;
			line-height:1em;
			border-left:1px solid white;
			margin-right:4px;/*space after link*/
			padding-left:4px;/*space on left between link and white line*/
               
			color:#2B2822;
			}
		ul.footer-main li.footer-first{border-left:medium none;}
	ul.footer-sub {list-style:none outside none;float:right;}
	ul.footer-sub li {display:inline;float:right}
        ul.footer-sub li.sub-dot{border-left:none; list-style:disc;}
2

If you want to do more reading on direction property, check out the CSS reference

3

well, i do, i guess i just wish it followed ordering differently. the most recent (latest in the code) thing i’ve floated right should go the furthest right. it just makes logical sense to me for the reason I mentioned above - if something comes first in your code (for semantic reasons), it ought to read first in the rendered page. in my crazy little fantasy world, left and right floats would behave differently in that respect. :stuck_out_tongue:

Other cultures that do RTL reading, we have a property for that, direction:rtl;

oh! I was wondering what that rtl meant…I couldn’t find a good explanation for it anywhere, but that makes perfect sense.

4

Most people float columns left anyway, but…yeah. I understand your methodology and that’s why people mostly float things left (columns anyway, not everything though)

For columns, if you float something right, out of all the column space you have, it will move all the way over to the right. Obviously, since it’s floated right. Then the remaining column space will be used for other columns. It’s quite logical actually, and while I understand what you imagine the browser should do, I don’t understand how you honestly expect right floated elements to not appear on the right :slight_smile:

Other cultures that do RTL reading, we have a property for that, direction:rtl;

5

actually, no, i wouldn’t :wink:
if it comes first in the code, then i’d expect/want it to come “first” (visually display: left to right) in the browser view as well. the way the right float works now, it actually comes second in the browser view. In a culture where we read left to right, it doesn’t make sense to me that you have to add exceptions in your code to make the browser display match the semantic code - it should be the other way around: If, for some reason, you want it visually different from your code, then you need to add exceptions.

now, for left floats, it makes sense that something coming first in the code would default to the left-most position in the browser - because we’ll be reading it left to right normally. Sure, I understand you can attempt to control the viewer’s path of vision by designing elements so they are seen in the order you want them - top right, top left, bottom left, etc - but that’s another subject :slight_smile:

This of course donesn’t take into consideration the other cultures who do read right to left, but even in that case, I suppose their left floats do not work properly either :wink:

6

Like I mentioned earlier it makes sense that the right floats behave the way they do. The browser takes floated elements in the order they appear in the mark up and floats them accordingly.

If you were doing a three column layout and your right floated sidebar came first in the markup, wouldn’t you expect it to be the first column floated to the right. :slight_smile:

7

ps i was about to just float them left and use padding to push them against the right side :smiley:

8

WOW!! it’s beautiful!! weeping

thank you for taking the time to do this - i really appreciate it. using an image for the bullet is fine. i’ve never tried to use a bullet on just one item in a list before, i thought it would have worked just fine. then again i thought the float would have too.
why do you think the elders of the internet made right-floated lists reverse order? in what situation might it be practical to use that?
thanks again!

9

It’s confusing…and took a lot of work to get it to do what I wanted it to do: display both lists next to eachother, while keeping the text right-justified. BUT now that both lists are floating right, the order of the items has been reversed! It displays in the browser like this:

Hi pas_non,
Yes, that’s what happens when you use right floats, they stack backwards on the page. But if you think about it, it is the same logic that left floats use. When using right floats the way around it is to order the list items in reverse in the markup. However that may not be the way you want it if the user has css disabled.

I’m trying to use a nested list system for my footer… Here is what I want it to look like:

I put together an example for you that uses left floats for the main list items on the top and the LI with the nested UL gets floated right. This triggers a float bug in IE6/7 though when you have L&R floats in a widthless container (the main UL that is floated right)
[URL=“http://www.css-lab.com/demos/nav/dropline/rt-align-ul.html”]
Float Right UL with Right Aligned Sub UL

It’s got some hacks in it for IE6/7 due to the float bug that I just mentioned. I used inline-block in place of the right float for the “Ministries” link, that eliminates the bug but requires some extra code. It displays how you would expect it to with css turned off, the order of the links that is.

Oh, and in addition - the list-style: disc isn’t showing up. Is it even possible to do what I want to do?

Yes, it is possible to do that by using display:list-item on one anchor only but in this case IE6/7 were being very buggy with it and after several attempts I was unable to get them to comply.

I wound up using a bullet BG image for the sub UL and set it as no-repeat 0 50%.