1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Multiple list styles

Discussion in 'CSS' started by fotoviva, Jul 22, 2008.

  1. #1
    Hi

    I have a webpage that uses css for the menu system. In the body text I wish to have a bullet list of points but when I do this it takes the ul and li from the menu class.

    How do I make a separate class - I thought ul and li were specific so what do I call the second set of them?

    Hope that makes sense!
     
    fotoviva, Jul 22, 2008 IP
  2. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Specify an id or class for the ul.

    Like:
    
    <ul id="main-nav">
      <li></li>
    </ul>
    
    Code (markup):
    then for your content if it's inside a div

    XHTML:
    
    
    <div id="content">
      <ul>
       <li>....</li>
      </ul>
    </div>
    
    Code (markup):
    CSS:

    
    #content ul{
       .....
    }
    Code (markup):
    or you can just assign a class to the list.
     
    glorie, Jul 22, 2008 IP
  3. fotoviva

    fotoviva Active Member

    Messages:
    265
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #3
    ok I know it's simple but I'm confused!

    Here is my page code
    
    <div id="test"><ul>
                    <li>VMF (Variable Message Format)</li>
                    <li>JREAP (Joint Range Extension Application Protocol)</li>
                    <li>TDL Network Management</li>
                    <li>TDL terminal integration</li>
                  </ul></div>
    
    HTML:
    and here is my css
    
    #test ul li a { display: none;
    	text-decoration: none;
    	color: #777;
    	padding-top: 9px; padding-bottom:9px; padding-left:15px;
    	border: none;
    	border-bottom: 0;
    	width:560px; }
    
    HTML:
    and here is the menu css which it still seems to be acting on
    
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding-top: 9px; padding-bottom:9px; padding-left:15px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	width:160px;
    	}
    
    HTML:
    Please help!
     
    fotoviva, Jul 22, 2008 IP
  4. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Your second css code for ul li a will be applied to ALL ul li a elements.

    If you don't want this happening, you have to apply a class to the ul. Or you could put !important after every css property that may conflict with your menu.

    I can help you with the code, I'm just wondering how xhtml code is being affected? It doesn't have an <a></a> tag? Do you have a link to the site?
     
    glorie, Jul 22, 2008 IP
  5. fotoviva

    fotoviva Active Member

    Messages:
    265
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Hi

    The first code is just a bullet list on the page, hence no links. I just want this to be a normal list, but it is taking the style from the menu (3rd code). Does that make sense?
     
    fotoviva, Jul 23, 2008 IP
  6. fotoviva

    fotoviva Active Member

    Messages:
    265
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #6
    Sweet. I div'd the list on the page and applied a style to the ul in my stylesheet and it all works hunky now - thanks everyone :)
     
    fotoviva, Jul 23, 2008 IP