www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS Trouble!!

  1. #1
    Join Date
    Mar 2010
    Posts
    5

    CSS Trouble!!

    Hi People,

    having some trouble with css not working trying to create alternate stylings on the links without using java this is what I've got so far: Thanks in Advanced

    Code:
    <style type="text/css">
    #menu ul {
    	width: 605px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #menu ul li {
    	float: left;
    	list-style-type: none;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFF;
    }
    #menu ul .1  a{
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #FFF;
    	color: #FFF;
    	text-decoration: none;
    	width: 120px;
    	display: block;
    	padding-top: 6px;
    	padding-bottom: 6px;
    	background-color: #C09;
    }
    #menu ul .2 a{
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #FFF;
    	color: #FF0;
    	text-decoration: none;
    	width: 120px;
    	display: block;
    	padding-top: 6px;
    	padding-bottom: 6px;
    	background-color: #96C;
    }
    #menu ul .3 a{
    	color: #FF9;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #FFF;
    	text-decoration: none;
    	width: 120px;
    	display: block;
    	padding-top: 6px;
    	padding-bottom: 6px;
    	background-color: #906;
    }
    #menu ul .4 a{
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #FFF;
    	color: #FF0;
    	text-decoration: none;
    	width: 120px;
    	display: block;
    	padding-top: 6px;
    	padding-bottom: 6px;
    	background-color: #606;
    }
    #menu ul .5 a{
    	color: #FFF;
    	text-decoration: none;
    	width: 120px;
    	display: block;
    	padding-top: 6px;
    	padding-bottom: 6px;
    	background-color: #99F;
    }
    </style>
    </head>
    
    <body>
    <div id="menu">
    <ul>
    	<li class="1"><a href="#">Link1</a></li>
        <li class="2"><a href="#">Link2</a></li>
        <li class="3"><a href="#">Link3</a></li>
        <li class="4"><a href="#">Link4</a></li>
        <li class="5"><a href="#">Link5</a></li>
    </ul>
    </div>
    </body>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The name of a CSS class can not start with a dash or a digit.

    There is a workaround to use digits is naming a class (you could use the escaped unicode value of that digit), but you should better rename your classes, so that they will not start with a digit.

  3. #3
    Join Date
    Mar 2010
    Posts
    5
    Thanks Kor, that sorted it…

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles