SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up links hover and visited

    hi
    i m using the following as menu and want that when user clicks the link the whole row in which it is shiuld be dark red and when user have mouseover it should be light red. i tried with "a:hover and a:visited but fom it one thing is that it is affecting all the links but i onlt want these menu one and secondly it just changes the background color of link not whole row.i need a bit help.

    my links

    HTML Code:
    <table width="159"  border="0" cellspacing="0" cellpadding="0">
                        <tr >
                          <td height="18" bgcolor="#D1838C" style="padding-left:8px; " class=tdlnav2off onmouseover="this.className='tdlnav2on'" onmouseout="this.className='tdlnav2off'"><a href="#afsleadership" class="ver-11-white">AFS Leadrship</a></td>
                        </tr>
                        <tr>
                          <td height="18" bgcolor="#D1838C" style="padding-left:8px; " class=tdlnav2off onmouseover="this.className='tdlnav2on'" onmouseout="this.className='tdlnav2off'"><a href="#afsvision" class="ver-11-white">AFS Vision</a></td>
                        </tr>
                        <tr>
                          <td height="18" bgcolor="#D1838C" style="padding-left:8px; "class=tdlnav2off onmouseover="this.className='tdlnav2on'" onmouseout="this.className='tdlnav2off'"><a href="#afsmission" class="ver-11-white">AFS Mission</a></td>
                        </tr>
                        <tr>
                          <td height="18" bgcolor="#D1838C" style="padding-left:8px; "class=tdlnav2off onmouseover="this.className='tdlnav2on'" onmouseout="this.className='tdlnav2off'"><a href="#afsmanagement" class="ver-11-white">AFS Management</a></td>
                        </tr>
    </table>
    its urgent plzzz.....
    regards
    phphelp

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    If I understand what you want, this should work:

    Code:
    tdlnav2off.a:link {color: #8B0000;} /*off state */
      tdlnav2off.a:visited {color: #8B0000;} /* previously visited state */
      tdlnav2off.a:hover {color: #DC143C;} /* on mouseover state */
      tdlnav2off.a:active {color: #8B0000;} /* on click state */
    Hope it helps

    If not ask again and I or someone will be glad to assist

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,375
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The faq show how to style different sets of links in detail so have a look there first

    If you have a number of items in a table row then you will need javascript to highlight a whole row. If you mean that you want to highlight just the word and the block its in then you just need display:block in the anchor (and a height or width for ie as well).

    Why don't you use a list instead of that table and make things simpler and neater.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul#nav {
    margin:0;
    padding:0;
    width:159px;
    list-style:none;
    background:#D1838C;
    }
    ul#nav li, ul#nav li a{
    height:22px;
    lin-height:22px; 
    display:block;
    }
    ul#nav li a{
    text-decoration:none;
    text-indent:8px
    }
    ul#nav li a:hover{background:red}
    ul#nav li a:active{background:pink}
    </style>
    </head>
    <body>
    <ul id="nav">
    <li><a href="#afsleadership" class="ver-11-white">AFS Leadrship</a></li>
    <li><a href="#afsvision" class="ver-11-white">AFS Vision</a></li>
    <li><a href="#afsmission" class="ver-11-white">AFS Mission</a></li>
    <li><a href="#afsmanagement" class="ver-11-white">AFS Management</a></li>
    </ul>
    </body>
    </html>
    Hope that helps

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Let me say that I am not familar with styling links within a table though

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but i have to put them in table coz its like a left meun with some design. so have to do with tables.thats why chaging the whole back ground of row of link.hope u understand.
    its urgent plzzz.....
    regards
    phphelp

  6. #6

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i know. but after soo much try i could not get wht i want. i think no body unserdtanding it.....
    its urgent plzzz.....
    regards
    phphelp

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,375
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    yes i know. but after soo much try i could not get wht i want.
    Cross posting is not allowed and duplicating threads is bad etiquette. Try and explain in the same thread what your problems are. I have closed all the other threads so this is the only active one now.

    After reading the posts it seems to me that you are talking about the page that loads after you have clicked a link and you want that link to be highlighted on the loaded page.

    Well you just need to add a class to the link on each different page that sets the current page link to be the colour you want. You can't automatically have a link be the current link without scripting it or without styling it.

    So every page of the site that corresponds to a menu link will have the class applied manually to that link on that page.

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up on hover cahange the background of row

    hi
    can i change the background of whole row with hover of anchor?

    form this only the back ground of link is changed on hover but i want the whole row background chege on link hover.where chgcolor() function changing the color of the whole row to dark red after user clicks the link.

    #masterdiv a:hover {
    color: #FF7300;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    CURSOR: pointer;
    BACKGROUND-COLOR:#DDADB2;

    }
    <div id="masterdiv">
    <table width="167" border="0" cellspacing="0" cellpadding="0">
    <tr id = "linktd1" class=tdlnav1off >

    <td width="154" height="18" ><a id="link1" href="#transaction" class="ver-11-red" onClick="javascript:changeArrow('arrowid1', 'images/arrow2.gif', 'images/arrow8.gif','arrowid2','arrowid3');chgcolor('link1');" >Transaction Management</a></td>
    </tr>
    </table>
    </div>
    its urgent plzzz.....
    regards
    phphelp

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,375
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry but I merged your thread again as it is the same question and people will likely reply with whatever has already been said.

    You will need to explain a little more clearly (I realise this isn't your main language and may be hard for you) but its quite dufficult to understand what you want as you don't reply to any of our answers clearly enough.

    I'm not sure why you can't just use js to change the colour of the whole table row as you are using js for something similar already.

    An anchor can only change the anchor and not a whole row of cells. You could apply some js and get hover functionalty on other elements apart from anchors and do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    var sfEls = document.getElementById("table1").getElementsByTagName("TR");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    <style type="text/css">
    table{width:50%}
    td {border:1px solid #000}
    tr:hover, tr.sfhover {background:yellow}
    </style>
    </head>
    <body>
    <table id="table1" cellspacing="0" cellpadding="0">
    <tr> 
    	<td>1</td>
    	<td>2</td>
    	<td>3</td>
    </tr>
    <tr> 
    	<td colspan="3">Hello</td>
    </tr>
    <tr> 
    	<td>4</td>
    	<td>5</td>
    	<td>6</td>
    </tr>
    </table>
    </body>
    </html>
    Are we getting close yet

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look what i want to do. now the color of row is white.
    i want to change the color of whole row to dark red when user clicks it. and also to change color of whole row to light red when user put cursor on link .
    its urgent plzzz.....
    regards
    phphelp

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,375
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Last try before I move your thread to the js forum


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    var sfEls = document.getElementById("table1").getElementsByTagName("TR");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    <style type="text/css">
    table{width:50%}
    td {border:1px solid #000}
    tr.red{background:red}
    tr:hover, tr.sfhover {background:pink}
    </style>
    </head>
    <body>
    <table id="table1" cellspacing="0" cellpadding="0">
    <tr onclick="this.className='red'"> 
     <td>1</td>
     <td>2</td>
     <td>3</td>
    </tr>
    <tr onclick="this.className='red'"> 
     <td colspan="3">Hello</td>
    </tr>
    <tr onclick="this.className='red'"> 
     <td>4</td>
     <td>5</td>
     <td>6</td>
    </tr>
    </table>
    </body>
    </html>


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
  •