Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: css lists

  1. #1
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times

    css lists

    Hello all!

    I hope you are all well, I'm here with another CSS list question.

    I currently have my site navigation setup using <LI> & <UL>

    it is customised using CSS.

    Now id like to add another list for my wordpress blog but since i've edited the standard LI & UL they will all be the same format.

    So what im asking is how can i edit them so i can have loads of different styles for the LI / UL

    Hope that makes sence.

    Here's my current CSS

    Code:
    ul {
    font-family:Arial;
    font-size: 12px;
    padding: 0px;
    list-style: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    padding-right:0px;
    }
    li ul { display: none; }
    ul  li a {
    display: block;
    width:8em;
    padding: 8px 0px 0px 0px;
    height:22px;
    text-decoration: none;
    color: #FFFFFF;
    background: #076963;
    margin-left: 0px;
    white-space: nowrap;
    text-align:center;
    }
    ul li a:hover { background: #032636; color: #FFFFFF;}
    ul li a.highlight { 
    background-color:#032636;
     }
    thank you
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Put the nav list inside a <nav> element. Preface all of the selectors for the navigation with nav.

    So, you currently have:
    Code:
    ul li{
    You'd change that to:
    Code:
    nav ul li{
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times

    css lists

    Make sure your navigation is within nav tags.

    Code:
     
       
         home
    Then setup your css to edit only the lists within your nav tags like this

    Code:
    nav li{
    styles for only nav lists go here
    }
    you will do this for the ul and the li selectors i am just trying to quickly demonstrate how i do it

    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:40 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com