The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Selecting a list tag with list tags within it

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #143963

    <p>Hey, I am trying to create a drop down menu, and I have put link tags around each of the list items. But I am having trouble placing link tags around the list items with an unordered list nested in it without making everything within it the same link. I know I could just put link tags around the text to solve my problem, but I would prefer it if it was around the list items themselves.</p>

    <p>Here’s my pen:</p&gt;

    <p>(I want to put links round the photos and videos tab).</p>

    <p>Thank you.</p>


    <p>The only direct children of unordered lists that are allowed are list items.</p>

    <p>You can put pretty much anything inside an li though</p>



    <p>p>Sorry, the link to CodePen was empty:</p>

    <!DOCTYPE html>

    <link rel=”stylesheet” type=”text/css” href=”navbar.css”/>

            <a href="#">Home</a>
            &lt;!--I want a link around the photos list item--&gt;Photos
          <a href="#">People</a>
          <a href="#">Animals</a>
          <a href="#">Landmarks</a>
            &lt;!--I want a link around the videos list item--&gt;Videos
          <a href="#">Amateur</a>
          <a href="#">Professional</a>
      <a href="#">Forums</a>



    <p>The forums are having trouble with formatting at the moment.</p>

    <p>Here’s a link to the ‘standard menu structure</p>




    <p>p>That is what I wrote in my pen, but I wanted the link tags to go round the list tags, not the text. So:</p&gt;


    <p>You can’t put links around list items…it’s not allowed.</p>


    <p>I changed the pen you sent to me with the word link as the link. Look at it.</p>


    <p>However, if you don’t want the list items “Photos” etc to be links then just omit the link tag.</p>

    <p>Does that achieve what you are after?</p>


    <p>Like this</p>



    <p>no, I do want them to be links. I changed your pen you previously submitted, you’ll see what I mean there.</p>


    <p>I’m really having trouble understanding what it is you are trying to do.</p>

    <p>Lists (ul) (ol) etc can ONLY contain list items (li) and NOTHING ELSE.</p>

    <p>You can put anything you want inside a list item (links or not).</p>

    <p>If you want a list item to be a link…put an anchor link INSIDE it…if you don’t it will stay as plain text.</p>


    <p>How do I upload an image? Because my pen isn’t working.</p>


    <p>If you have WEB link to an image you can add it using an image tag…</p>

    <p>EDIT…just everything is screwed at the moment.</p>


    <pre class=”codepen” data-height=”300″ data-type=”html” data-href=”hnpoq” data-user=”A73X4ND3R” data-safe=”true”><!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="navbar.css"/>

            <a href="&quot;#&quot;">Home</a>
            &lt;!--I would like to put a link around the Photos list item, but I can't without adding
            a link to all the links nested in it--&gt;
                    <a href="&quot;#&quot;">People</a>
                    <a href="&quot;#&quot;">Animals</a>
                    <a href="&quot;#&quot;">Landmarks</a>
            &lt;!--I would like to put a link around the Videos list item, but I can't without adding
            a link to all the links nested in it--&gt;
                    <a href="&quot;#&quot;">Amateur</a>
                    <a href="&quot;#&quot;">Professional</a>
            <a href="&quot;#&quot;">Forums</a>
            &lt;!------------------------------The reason I want anchor tags around the list item is so, when it is a navigation bar, you can click on the tab
            itself, not just the words----------------------------------------------------&gt;

    </html>Check out this Pen!

    <script async src=””></script&gt;

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.