help to add html link to list

Discussion in 'HTML & Website Design' started by horseygirl, Mar 11, 2016.

  1. #1
    i have this code below and want to make the list item a link without changing the CSS

    <div class="diva1">
             <ul class="large let">
               <li><ul style="visibility: visible; animation-name: fadeInLeft;" class="fadeInLeft wow small">
                 <li class="sml1">Company</li>
                 <li class="sml2">About</li>
                 <li class="sml2">Team</li>
                 <li class="sml2">Forums</li>
                 <li class="sml2">Contact</li>
                 <li class="sml2">Guidelines &amp; Policies</li>
    
                
    
               </ul></li>
    Code (markup):
     
    horseygirl, Mar 11, 2016 IP
  2. Mike In

    Mike In Active Member

    Messages:
    244
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    90
    #2
    Why not put them inside <a> tag?
    Hope you know.
     
    Mike In, Mar 11, 2016 IP
  3. Goob

    Goob Well-Known Member

    Messages:
    98
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    140
    #3
    Will hrefs not work?

    <li class="sml1"><a href="http://example.com">Company</a></li>
     
    Goob, Mar 11, 2016 IP
  4. horseygirl

    horseygirl Well-Known Member

    Messages:
    534
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    143
    #4
    goob that changes the style but thanks
     
    horseygirl, Mar 11, 2016 IP
  5. Goob

    Goob Well-Known Member

    Messages:
    98
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    140
    #5
    np!

    You can change the style in your CSS by editing .sml1 a {your style code} That will only change the style for the Company link though.

    If you're looking to edit the style for the entire list after you've put href tags on them, then you'll want to reference the UL class. So you'd change .fadeInLeft a {your style code}
     
    Goob, Mar 11, 2016 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I'd also be questioning the uselessly vague classes/id's, the pointless unnecessary classes since you should be targeting via inheritance, the static style in the markup, the possibly pointless DIV around it, only a list inside the LI without some form of heading to say WHY it's a separate list item...

    ... and that you are asking NOT to change the CSS, which is pretty much a must-have since to make those links they need to be anchors... well, unless you want to piss all over accessibility by using scripttardery.

    Of course, this is why the complete semantic markup for the page should have been created -- INCLUDING making the things that are anchors be anchors -- BEFORE even the first line of CSS was written!
     
    deathshadow, Mar 12, 2016 IP
  7. Goob

    Goob Well-Known Member

    Messages:
    98
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    140
    #7
    Yeah, I'd agree with deathshadow on that one too. Cleaning up your classes and IDs will definitely make it easier to style the list and get them looking the way you want.
     
    Goob, Mar 13, 2016 IP