Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: CSS question

  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS question

    Hi

    I am new with html+CSS.

    There is one line in my CSS file: li{list-style-type:none;}

    What should I do if I want to use li{list-style-type:decimal;} in my html?

    Many thanks in advance.

    Li

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello Li Gang,
    Have you tried it yet? If you just change that none to decimal in your CSS you should see the change in your markup.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your response.

    I mean I need both li{list-style-type:none;} and li{list-style-type:decimal;} in the same html.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,878
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Quote Originally Posted by Li Gang View Post
    Thanks for your response.

    I mean I need both li{list-style-type:none;} and li{list-style-type:decimal;} in the same html.
    You should be more specific in your CSS. I suppose you have an unordered (ul) and an ordered list (ol)? Then reflect that in your CSS so that the list style type of “none” only applies to unordered lists:
    Code:
    ul {list-style-type: none;}

  • Users who have thanked VIPStephan for this post:

    Li Gang (02-24-2011)

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You obviously cant do both in ONE lists. If you have two lists in your page, then you will have to specify which list gets the decimal and which list gets no list style.

    You can either specify by targeting the list within a certain containing element, or give one list an id or class and target it that way.
    Teed

  • Users who have thanked teedoff for this post:

    Li Gang (02-24-2011)

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by Li Gang View Post
    Thanks for your response.

    I mean I need both li{list-style-type:none;} and li{list-style-type:decimal;} in the same html.
    By giving your ul an id you can be more specific about which CSS applies to which ul. See specificity here.

    See this example that uses class names to be more specific -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #FC6;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #333;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    h1 {
    	margin: 50px 0 0;
    	padding: 0 0 0 25px;
    	font-size: 1em;
    }
    .dot {list-style: disc;}
    .number {list-style: decimal;}
    .both {
    	width: 200px;
    	margin: 0 auto;
    	text-align: center;
    }
    
    </style>
    </head>
    <body>
        <div id="container">
        	<h1>ul with disc</h1>
                <ul class="dot">
                    <li>first</li>
                    <li>second</li>
                    <li>third</li>
                    <li>fourth</li>
                </ul>
            <h1>ul with decimal</h1>
                <ul class="number">
                    <li>first</li>
                    <li>second</li>
                    <li>third</li>
                    <li>fourth</li>
                </ul>
            <h1 class="both">ul with both</h1>
                <ul class="both">
                    <li class="dot">first</li>
                    <li class="number">second</li>
                    <li class="d0t">third</li>
                    <li class="number">fourth</li>
                </ul>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Li Gang (02-24-2011)


  •  

    Posting Permissions

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