www.webdeveloper.com
Results 1 to 9 of 9

Thread: Can you put a <ul>tag inside a <span> tag????????????????

  1. #1
    Join Date
    May 2006
    Posts
    100

    Can you put a <ul>tag inside a <span> tag????????????????

    Hi Everybody! CowGirl Here!

    I am in a bit of a pickle and was hoping somebody can help me.

    Can you put a <ul> tag inside a <span> tag. For example, is the below code valid?

    <span><ul><li><a href="money-order.html">World Health Fund</a> (May 1, 2011)</li></ul></span>

    This code was written by an elance contractor who seems to know what he is doing. But, when I validate the above code in Dreamweaver, Dreamweaver says that you cannot put a <ul> tag inside a <span> tag. Note that I am using an older version of Dreamweaver (Dreamweaver CS3).

    So I am a bit confused. Is the above not valid code? Or is the above valid code, but my version of Dreamweaver is so old that it does not realize it is in fact valid code?

    Thank you!!!!!!!!!!!!!!!

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265
    Could or should? I have not tried such. But remember <SPAN> is inline element and <UL> is block element. You should not nest a block element in an inline element.

    See, for instance, http://www.w3schools.com/tags/tag_span.asp or http://webdesign.about.com/od/htmltags/a/aa011000a.htm

    We all make mistakes/

  3. #3
    Join Date
    May 2006
    Posts
    100
    Auntnini, thank you for taking the time to read and reply to my post.

    I read the pages you linked to and now understand the error.

    Can I fix it be way of below (essentially replacing the <span> tag with a <div> tag)? Is it ok to use a <ul> tag as I did below (is to ok to place a <ul> tag by itself in the middle of a page, where the page is not one big <ul> tag from beginning to end)?

    <div class="generic_main_panel_full_width">
    <div class="generic_body_text">
    <p>sentence will be here</p>
    <div class="generic_body_text"><ul><li><a href="money-order.html">World Health Fund</a> (May 1, 2011)</li></ul></div>
    <p class="view_more"><a href="contributions_2.html">View older items</a></p>
    </div></div>

    Thank you and have a pleasant day!

  4. #4
    Join Date
    Mar 2012
    Posts
    14
    That code would work, but I generally avoid nesting elements that are of the same class. There is nothing wrong with having more than one element of the same class on the same page, but if you are going to nest one inside the other, you may want individual style control over the elements in case it doesnt end up behaving how you want it to. You could also keep them in the same class and add unique IDs to each element in case that ends up being an issue as well. For example:

    HTML:
    Code:
    <div class="generic_main_panel_full_width">
    <div class="generic_body_text" id="outer_div_1">
    <p>sentence will be here</p>
    <div class="generic_body_text" id="inner_div_1"><ul><li><a href="money-order.html">World Health Fund</a> (May 1, 2011)</li></ul></div>
    <p class="view_more"><a href="contributions_2.html">View older items</a></p>
    </div></div>
    then you could give the divs an overall class by defining the "generic_body_text" in your CSS and if you need to add a specific style element to one div or the other then you just reference the id instead of the class and add your unique properties like so:

    CSS:
    Code:
    #outer_div_1{
    border:thin solid;
    border-color:#000000;
    }
    #inner_div_1{
    border:thick solid;
    border-color:#656464;
    }
    technically there are other ways to do it as well, such as navigating the DOM in your CSS. I don't prefer to do that, its a little clunky to me. It's much easier(if you have access to the HTML) to add unique ids or have a larger variant of classes to assign.

  5. #5
    Join Date
    May 2006
    Posts
    100
    jc_rotor, thanks for taking the time to read and reply to my post.

    In my haste I neglected to change the name of the nested <div> in my above example code. I would change change the name of the nested div.

    But, I was reading reading about this issue and think I can just delete the <span> tag and not replace with a <div> tag or any other tag. Is this right?

    Thank you!!!!!!

  6. #6
    Join Date
    May 2006
    Posts
    100
    Please correct me if I am wrong, but the main purpose of including the nested <div> would be to style the <ul> enclosed in the nested <div>, but I could just as easily do that by attaching a class to the <ul> (for example, <ul class="class-list-1">).

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265
    When possible, define the HTML element (the CSS rule "selector") in such a way as to avoid having to declare the id="idName" or class="className". I'm guessing that <span>, the <UL> and the <DIV>s were for some isolated visual effect.

    CSS rules can be "contextually" defined so they are more specific -- such as .genericText ul {color: red; } or .outer p { color: green; } or .inner p {color: purple;}, I frankly prefer .CLASS rules unless it is a very unique #ID page section.

  8. #8
    Join Date
    Aug 2012
    Location
    1453 Gingerwood ave, Milpitas CA 95035,
    Posts
    37
    I don't think you should use <ul> tag into a <span> tag.
    It may create problems in execution......

  9. #9
    Join Date
    Dec 2012
    Posts
    9
    thanks for the info, I have been very useful




    Elevadores de coches | Maquinaria para taller mecanico

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles