7 replies [Last post]
Jared
Jared's picture
Offline
Enthusiast
USA
Last seen: 11 years 42 weeks ago
USA
Joined: 2005-01-09
Posts: 110
Points: 0

Nested elements in Unordered List Items

What would be the better way to approach something like the I posted below;

I have the menu as unordered lists currently but now I need to float or have a number on the far right display as well. I tried to use nested in the

  • but it doesn't validate.
  • Any ideas would be great.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 43 weeks 4 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Jared wrote:

    Jared wrote:

    I have the menu as unordered lists currently but now I need to float or have a number on the far right display as well. I tried to use nested SPAN in the LI but it doesn't validate.

    You need to understand how nested lists work. The only first-level children items of the UL element must be LI elements. If you want to nest another UL you have to put it inside one of the LI elements, and that is probably what the validator is telling you to do.

    If you want a sure answer, you have to post the code as we ask in the sticky messages in every forum.
    If you haven't yet read those sticky messages start now, and read them all, and understand and follow their advice, before you next post.

    Also, you can't put html tags in your messages without putting them between CODE tags as browsers will interpret them as html.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    Jared
    Jared's picture
    Offline
    Enthusiast
    USA
    Last seen: 11 years 42 weeks ago
    USA
    Joined: 2005-01-09
    Posts: 110
    Points: 0

    Yes and thanks, I understand

    Yes sir and thanks for your reply. I do generally understand the list items and using additional UL in them as I do that with menus frequently (for the most part).

    When I put in a span as outlined in the code example it not only doesn't validate it simply doesn't work as I expect. I'd like the views number to appear at the far right of the link. I've tried to use inline justify but thats even worse.

    div class="quicknavigation">
    ---- h3>Most Viewed <h3 ----- ul>
    <li><a href="http://www.google.coml" rel="nofollow">Google</a> 
    <span class="views">345 Views</span>
    </li>
    <li><a href="http://www.yahoo.com" rel="nofollow">Yahoo</a> 
    <span class="views">256 Views</span>
    </li>
    </ul>
    ---div>

    The CSS

    .quicknavigation{width: 225px; padding:20px 15px 30px; float:left;}
    .quicknavigation ul{list-style: none; margin: 0;}
    .quicknavigation ul li{border-bottom:1px solid #999;}
    .quicknavigation ul li a{display: block; padding:5px 10px; color:#ddd;}
    .quicknavigation ul li a:hover{color: #333; background-color: #ccc;}
    .quicknavigation h3{color: #ccc;}
    span.views{position: relative; float: right;}
    

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 43 weeks 4 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    If the link at the bottom is

    If the link at the bottom is the page you are asking about that's all you need to give us. If not, then you need to give us a link to the page in question (best option), or you need to post *all* your code, especially all your html.

    On the page at the link you gave I can't find anything the validator complains about that involves any spans, and the code you gave doesn't appear to be on the page, or at least I can't find it.

    Also, before you ask a question we ask you to get your code validating properly since the lack of valid html causes all manner or problems.

    So I need more clues. Over to you...

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    Jared
    Jared's picture
    Offline
    Enthusiast
    USA
    Last seen: 11 years 42 weeks ago
    USA
    Joined: 2005-01-09
    Posts: 110
    Points: 0

    No my URL for my blog is

    No my URL for my blog is nothing its only a temporary template I tossed together until I had time to actually build my own. That thing is a joke and doesn't validate at all. Sorry for the confusion.

    Here is the link for the actual code.
    http://www.jaredritchey.com/clients/cssul.html

    BTW HTML IS STRIPPED
    Also I posted all the code here but it gets stripped and modified by the post editor. All the DIVs, and other code as noted in the list of allowed HTML tags.

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 5 hours 2 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9772
    Points: 3854

    Instead of this,<li><a

    Instead of this,

  • Google
    345 Views
  • Put the span first.


  • 345 Views
    Google

  • =========
    .views {
    float: right;
    text-align: right;
    width: 5em; /*or some other reasonable value*/
    }

    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.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 43 weeks 4 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Jared wrote:Here is the link

    Jared wrote:
    Here is the link for the actual code.
    http://www.jaredritchey.com/clients/cssul.html

    Which is what I needed. Your xhtml is invalid because your STYLE tag doesn't have a "type" attribute. So you risk the possibility that a browser won't know what to apply the CSS to. Add an attribute "style="text/css" to the STYLE tag.

    If you want the hover effects to apply all the way across you must put your SPAN's inside your A elements, and close your A elements after the span. You have not closed your A elements and you must always do that in xhtml. I suspect the sytntax error in your STYLE tag is causing the validator to miss this, and if you fix it then the errors will be caught.

    Please, as we ask, always get your code to validate before you ask the question here!

    E.G.

  • Google 345 Views
  • Not

  • Google 345 Views

  • as you have it on your page.

    Quote:

    BTW HTML IS STRIPPED
    Also I posted all the code here but it gets stripped and modified by the post editor. All the DIVs, and other code as noted in the list of allowed HTML tags.

    Put your code between <code> and </code> tags when you edit the message.

    Please take the time to read the sticky messages so you understand what we need to help you solve problems before you post. If you had posted a link to your page first you'd have had the problem solved much faster, and if you'd taken the minor time and trouble to validate your code and get your html legal you'd likely have solved it before you posted in the first place. So doing it the way you did unnecessarily wasted both your time and mine. Sad

    You've posted enough times here so you should know this.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    Jared
    Jared's picture
    Offline
    Enthusiast
    USA
    Last seen: 11 years 42 weeks ago
    USA
    Joined: 2005-01-09
    Posts: 110
    Points: 0

    Thanks Ed, yes Its validated

    Thanks Ed, yes Its validated and altered the code accordingly.

    Anyway so thats where I'm at if you look now.

    ~ Jared

    P.S. Yes it worked fine thanks for your guidance.