SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    li#current ... can't get it to work

    On previous sites I have managed to keep my menu selection active by using the following code:

    Code:
    .moduletable_menu li#current 
    {
    	color: #231E19;
    	font-weight: bold;
    }
    On my current site however, I can't get this to work i.e. the above code doesn't need to make any difference or even work.

    I've posted this for a while on a number of sites but had no feedback that works.



    Below is my CSS and INDEX file.

    Code CSS:
    [CODE]/* CSS Document */
    #mainwrapper {
    	width: 1005px;
    	margin-right: auto;
    	margin-left: auto;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    }
    #top {
    	height: 405px;
    	width: 1005px;
    }
    #content {
    	height: 375px;
    	width: 541px;
    	background-color: #231e19;
    	float: left;
    	color: #F1EEEB;
    	padding: 15px;
    	overflow: auto;
    }
    #content a:link {
    	color: #D70818;
    }
    #content a:visited, #content a:hover{
    	color: #A90204;
    }
    #title {
    	height: 405px;
    	width: 429px;
    	background-color: #FFFFFF;
    	float: left;
    	background-image: url(../images/tmp_title.gif);
    	background-repeat: no-repeat;
    }
    #bottom {
    	height: 401px;
    	width: 1005px;
    }
    #bottom_left {
    	height: 426px;
    	width: 286px;
    	background-image: url(../images/tmp_nav_bk.gif);
    	background-repeat: no-repeat;
    	background-position: 177px top;
    	float: left;
    }
    #navbar {
    	height:251px;
    	width:280px;
    }
    #bottom_footer {
    	height: 175px;
    	width: 286px;
    	background-image: url(../images/tmp_footer_img.gif);
    	background-repeat: no-repeat;
    }
    #bottom_right {
    	height: 426px;
    	width: 713px;
    	background-image: url(../images/tmp_bottom_bk.gif);
    	background-repeat: no-repeat;
    	float: left;
    }
    #addressblock {
    	float: right;
    	height: 110px;
    	width: 250px;
    	position: relative;
    	top: 300px;
    	color: #FFFFFF;
    	margin-right: 10px;
    	margin-left: 10px;
    }
    .moduletable_menu ul {
    	margin: 0px;
    	padding: 0px;
    }
    .moduletable_menu ul
    {
    list-style-type: none;
    text-align: left;
    }
     
    .moduletable_menu ul li a
    {
    	background: transparent url(../images/tmp_rings.gif) left center no-repeat;
    	padding-left: 40px;
    	text-align: left;
    	text-decoration: none;
    	color: #927761;
    	font-size: 22px;
    	font-style: normal;
    	font-weight: normal;
    	font-variant: normal;
    }
     
    .moduletable_menu ul li a:hover
    {
    	background: transparent url(../images/tmp_rings.gif) left center no-repeat;
    	color: #231E19;
    	font-weight: bold;
    }
    .componentheading {
    	font-size: 20px;
    	font-weight: bold;
    	margin-bottom: 5px;
    }
     
    .moduletable_menu li#current 
    {
    	color: #231E19;
    	font-weight: bold;
    }
    /* content tables */
    td.sectiontableheader {
    /*  background: #efefef; */
    /*  color: #333; */
      font-weight: bold;
      padding: 4px;
    /*  border-right: 1px solid #fff; */
    }
    tr.sectiontableentry0 td,
    tr.sectiontableentry1 td,
    tr.sectiontableentry2 td {
      padding: 4px;
    }
    td.sectiontableentry0,
    td.sectiontableentry1,
    td.sectiontableentry2 {
      padding: 3px;
    }
    /* content styles */
    table.contentpaneopen, table.contentpane {
    	margin: 0;
    	padding: 0;
    	width: auto;
    }
    table.contentpaneopen li {
    	margin-bottom: 5px;
    }
    table.contentpaneopen fieldset {
    	border: 0;
    	border-top: 1px solid #ddd;
    }
    table.contentpaneopen h3 {
    	margin-top: 25px;
    }
    table.contentpaneopen h4 {
    	color: #333;
    }[/CODE]
    Code HTML4Strict:
    [CODE]<body>
     
    <div id="mainwrapper">
    	<div id ="top">
    		<div id="title"></div> <!-- Title -->
    		<div id="content">
    				<table class="blog" cellpadding="0" cellspacing="0">
    <tr>
    	<td valign="top">
    					<div>
     
    <table class="contentpaneopen">
     
    <tr>
    		<td class="contentheading" width="100%">
    					Test Page			</td>
     
    		<td align="right" width="100%" class="buttonheading">
    	<a href="/foreveryours.co.nz/index.php?view=article;&amp;id=1:testpage&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/foreveryours.co.nz/images/M_images/pdf_button.png" alt="PDF"  /></a>	</td>
     
    		<td align="right" width="100%" class="buttonheading">
    	<a href="/foreveryours.co.nz/index.php?view=article&amp;id=1:testpage&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;"><img src="/foreveryours.co.nz/images/M_images/printButton.png" alt="Print"  /></a>	</td>
     
    		<td align="right" width="100%" class="buttonheading">
     
    	<a href="/foreveryours.co.nz/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovL3RoZWJlYXV0eWNsdWJvbmxpbmUuY29tL2ZvcmV2ZXJ5b3Vycy5jby5uei9pbmRleC5waHA/dmlldz1hcnRpY2xlJmlkPTE6dGVzdHBhZ2U=" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,resizable=yes'); return false;"><img src="/foreveryours.co.nz/images/M_images/emailButton.png" alt="E-mail"  /></a>	</td>
    		</tr>
    </table>
    <table class="contentpaneopen">
     
    <tr>
    	<td width="70%"  valign="top" colspan="2">
    		<span class="small">
    			Written by Administrator		</span>
    		&nbsp;&nbsp;
     
    	</td>
    </tr>
     
    <tr>
    	<td valign="top" colspan="2" class="createdate">
    		Friday, 15 February 2008 17:37	</td>
    </tr>
     
     
    <tr>
    <td valign="top" colspan="2">
    Test Page</td>
     
    </tr>
     
     
     
    </table>
    <span class="article_separator">&nbsp;</span>
    		</div>
    		</td>
    </tr>
     
     
    </table>
     
    		</div> <!-- Content -->
     
    	</div> <!-- Top -->
    	<div id ="bottom">
    		<div id="bottom_left">
    			<div id="navbar">
    						<div class="moduletable_menu">
    					<ul class="menu"><li id="current" class="active item1"><a href="http://thebeautyclubonline.com/foreveryours.co.nz/"><span>Home</span></a></li><li class="item2"><a href="/foreveryours.co.nz/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=2"><span>Profile</span></a></li><li class="item3"><a href="/foreveryours.co.nz/index.php?option=com_expose&amp;Itemid=26&amp;album=1&amp;photo=456&amp;playslideshow=yes"><span>Gallery</span></a></li><li class="item4"><a href="/foreveryours.co.nz/index.php?option=com_weblinks&amp;view=category&amp;id=2&amp;Itemid=4"><span>Links</span></a></li><li class="item5"><a href="/foreveryours.co.nz/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=5"><span>Contact Us</span></a></li></ul>		</div>
     
     
    			</div> <!-- Navbar -->
    			<div id="bottom_footer"></div> <!-- Bottom footer -->
    		</div> <!-- Bottom left -->
    		<div id = "bottom_right">
    			<div id = "addressblock">
    						<div class="moduletable">
    					<p align="right"><strong>PO Box 340-350<br />Birkenhead<br />Auckland </strong></p><div align="right"><strong>021 870 533</strong></div>		</div>
     
     
    			</div> <!--Address Block -->
    		</div> <!-- Bottom Right -->
    	</div> <!-- Bottom -->
    </div> <!-- Main Wrapper -->
    </body>
    </html>
    [/CODE]

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abasel View Post
    On previous sites I have managed to keep my menu selection active by using the following code:

    Code:
    .moduletable_menu li#current 
    {
    	color: #231E19;
    	font-weight: bold;
    }
    On my current site however, I can't get this to work i.e. the above code doesn't need to make any difference or even work.
    As now the inheritence is overridden by the ".moduletable_menu ul li a"-rules.
    Add the anchor selector:
    Code:
    .moduletable_menu li#current  a
    {
    	color: #231E19;
    	font-weight: bold;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because ".moduletable_menu li#current" is styling text (not anchors) in the LI.

    ".moduletable_menu ul li a" is styling the anchors in the LI.

    Change this:
    .moduletable_menu li#current

    to this:
    .moduletable_menu li#current a

    John

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Eureka

    GREAT... many thanks for that... I've asked a number of people and tried many variations but just couldn't get it right :-)


  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad you got a better explanation than mine.

    Clarifying my post:
    It is the rule
    .moduletable_menu ul li a { ... font-weight: normal; ... }
    that overrides the #current bold-setting. (Or you could remove it.)
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey I appreciated all input :-) Your explanation was fine... I'm just a little slow lol

    Thanks for the extra clarification.

    Cheers


Bookmarks

Posting Permissions

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