|
CSS - Active State For Css Menu
Hi,
I have implemented an Apple Style CSS menu however I cannot apply the active state on this. When the current page is displayed, I would like to the button to be highlighted (as if hovering) Can anyone help me please? HTML Code:
<ul id="nav">
<li id="list1"><a href="#"><span>Home</span></a></li>
<li id="list2"><a href="#"><span>Special Offer</span></a></li>
<li id="list3"><a href="#"><span>Help</span></a></li>
<li id="list4"><a href="#"><span>Delivery Information</span></a></li>
<li id="list5"><a href="#"><span>Technical</span></a></li>
<li id="list6"><a href="#"><span>About Us</span></a></li>
<li id="list7"><a href="#"><span>Contact</span></a></li>
</ul>
CSS Code:
* { margin: 0px; padding: 0px; }
#nav {
background: url(nav.png);
height: 38px;
width: 960px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
#list1 { width: 114px; }
#list2 { width: 164px; }
#list3 { width: 112px; }
#list4 { width: 206px; }
#list5 { width: 130px; }
#list6 { width: 122px; }
#list7 { width: 112px; }
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -114px -38px no-repeat;
}
#list3 a:hover {
background: url(nav.png) -278px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -390px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -596px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -726px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -848px -38px no-repeat;
}
Similar TutorialsHello I am having a little bit of trouble with an active state on my navigation. The navigation has been created with a sprite image for normal and hover states. I am now trying to make my active state the same as my hover state. I have been trying to add multiple classes to the li element since the nav background image is a class. Honestly I can't believe I haven't figured it out yet, but I'm sure this is a resolution I will not soon forget once I know the answer. I've posted my code and links to the site and code below. Many thanks in advance! Website: http://174.120.172.92/~techsol/ CSS File: http://174.120.172.92/~techsol/styl...ediatype=screen My navigation code: Code:
<!-- nav start -->
<ul id="nav">
<li class="excursions active"><a href="index.php?page=excursions">EXCURSIONS</a></li>
<li class="live"><a href="index.php?page=live-entertainment">LIVE ENTERTAINMENT</a></li>
<li class="restaurants"><a href="index.php?page=restaurants">RESTAURANTS</a></li>
<li class="top"><a href="index.php?page=top-ten">TOP 10</a></li>
<li class="hostoric"><a href="index.php?page=cannery">HISTORIC CANNERY</a></li>
<li class="shopping"><a href="index.php?page=shopping">SHOPPING</a></li>
<li class="days"><a href="index.php?page=juneau-days">JUNEAU DAYS</a></li>
<li class="access"><a href="index.php?page=local-access">LOCAL ACCESS</a></li>
</ul>
<!-- nav end -->
My navigation CSS Styles: Code: #nav{
width:542px;
position:absolute;
top:134px;
left:320px;
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
#nav li{
float:left;
margin:0 0 5px;
height:40px;
overflow:hidden;
}
#nav a{
background:url(uploads/template/bg-nav.jpg) no-repeat;
text-indent:-9999px;
display:block;
overflow:hidden;
height:40px;
}
#nav .excursions a{
width:122px;
margin:0 8px 0 0;
}
#nav .live a{
width:197px;
background-position:-130px 0;
margin:0 3px 0 0;
}
#nav .restaurants a{
width:130px;
margin:0 5px 0 0;
background-position:-330px 0;
}
#nav .top a{
width:77px;
background-position:-465px 0;
}
#nav .hostoric a{
width:173px;
background-position:0 -45px;
margin:0 9px 0 0;
}
#nav .shopping a{
width:110px;
background-position:-182px -45px;
}
#nav .shopping{margin:0 8px 0 0;}
#nav .days{margin:0 12px 0 0;}
#nav .days a{
width:103px;
background-position:-300px -45px;
}
#nav .access a{
width:126px;
background-position:-415px -45px;
}
#nav .excursions a:hover {background-position:0 -88px;}
#nav li.excursions li.active {background-position:0 -88px !important;}
#nav .live a:hover{background-position:-130px -88px;}
#nav .restaurants a:hover{background-position:-330px -88px;}
#nav .top a:hover{background-position:-465px -88px;}
#nav .hostoric a:hover{background-position:0 -133px;}
#nav .shopping a:hover{background-position:-182px -133px;}
#nav .days a:hover{background-position:-300px -133px;}
#nav .access a:hover{background-position:-415px -133px;}
I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful. I'm including my html and css below and would appreciate any help. Thanks, Keith Silva CSS: textarea{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; } button{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; } /*table{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; }*/ caption{ font-size: 1.5em; } .add{ font-size: 0.6em; text-align: right; } .frm_tbl{ border-spacing: 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; color: Navy; } #navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navlist li a:link { color: #448; } #navlist li a:visited { color: #667; } #navlist li a:hover { color: #000; background: #AAE; border-color: #227; } /*#navlist li:target*/ #mail_frm #mail_nav a, #loc_frm #loc_nav a, #other_frm #other_nav a{ background: white; border-bottom: 1px solid white; } #mail_frm{display: none} #mail_frm:target{display: block} #loc_frm{display: none} #loc_frm:target{display: block} #other_frm{display: none} #other_frm:target{display: block} HTML: // #include settings #cgivar id #cgitextvar notes #cgitextvar directions #if @id != "" //edit existing record #sql load select * from tbl_org where org_id = @id #else //new record #sqlblankrow tbl_org #endif <form method="POST" target="_self" name="org_form"> #formtarget org_save <div id="navcontainer"> <ul id="navlist"> <li id="mail_nav"><a href="#mail_frm">Mail</a></li> <li id="loc_nav"><a href="#loc_frm">Location</a></li> <li id="other_nav"><a href="#other_frm">Other</a></li> </ul> </div> <table id="mail_frm" class="frm_tbl" border="0"> <tr> <td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td> <td>Type<br><select name="type" size="1" class=""> #optionlist selected=@type #options muni Municipality state State discharger Discharger consultant Consultant law_firm Law Firm dischgr_assoc Discharger Assoc elected Elected Official lab Laboratory public Public academia Academia tribe Tribe other Other </select></td> </tr> <tr> <td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td> <td>Region<br><select name="region" size="1" class=""> #optionlist selected=@region #options none None north AZ-North central AZ-Central south AZ-South rb1 CA-North Coast(1) rb2 CA-San Francisco Bay(2) rb3 CA-Central Coast(3) rb4 CA-Los Angeles(4) rb5r CA-Central Valley North(5r) rb5s CA-Central Valley(5s) rb5f CA-Central Valley South(5f) rb6 CA-Lahontan(6) rb7 CA-Palm Desert(7) rb8 CA-Santa Ana(8) rb9 CA-San Diego(9) </select></td> </tr> <tr> <td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td> <td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td> </tr> <tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr> <tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr> <tr> <td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td> <td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td> <td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td> </tr> </table> <table id="loc_frm" class="frm_tbl" border="0"> <tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr> <tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr> <tr> <td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td> <td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td> </tr> <tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60"> #showtext ./directions/org_@org_id #+ </textarea></td> </tr> </table> <table id="other_frm" class="frm_tbl" border="0"> <tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr> <tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr> <tr> <td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td> <td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td> </tr> <tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr> <tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50"> #showtext ./notes/org_@org_id #+ </textarea></td> <td><input name="selected" type="checkbox" value="y" title="">Select<br><br> <input name="archive" type="checkbox" value="y" title="">Archive</td> </tr> </table><br> org_id <input name="org_id" type="text" size="8" value="@org_id" title=""> <button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button> <button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button> </form> Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu the site is here bbk.ac.uk/~fsando01/watma/index.html when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website... Please if anyone could help id be very grateful... ive tried everthing i can think of Hi, I have this in the html and so on for each page <div id="nav"> <ul> <li class="current"><a href="one.htm">one</a></li> <li><a href="two.htm">two</a></li> <li><a href="three.htm">three</a></li> </ul> </div> Then css: #nav ul li.current a{ background:#CCCCCC; color:#000000; } But I don't want the first page's link to change colour until it is clicked. Otherwise the menu comes up with first link always active before anything has been selected. It looks wrong. Is there anyway around this in css? Thanks, jdl Hey Guys, was hoping someone could look at my code and tell me what is wrong. My website (http://www.ecbsa.co.za/) refuses to show what page i am on in the menu by highlighting it etc. Here is the CSS: Code:
/* - - - BASIC styles [ MANDATORY ] - - - */
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
font-family: arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 11px;
line-height:1.3em;
list-style-type: none;
display: block;
height:44px;
}
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the top left corner, */
top: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
top: 100%; /* 1st level go below their parent item */
}
.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END -- */
/* -- sticky.submenu -- */
.menu ul {
background-image: url(empty.html); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 10px 20px 20px 20px;
margin: -10px 0 0 -20px;
/* background: #fcfcfc;*/ /* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
padding: 20px 20px 20px 10px;
margin: -30px 0 0 0px;
}
/* -- sticky.submenu.END -- */
/* - - - DESIGN styles - - - */
/* main upper bar */
#main-nav {
background: url(img/_ui/main_nav.jpg) left top no-repeat;
width:967px;
height:44px;
text-align: center;
}
.menu {
width:967px;
}
/* main upper bar */
.menu, .menu ul li {
color: #ff6600;
}
.menu ul {
width: 45em;
}
.menu a:active{
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}
.menu a {
text-shadow: #006699 1px 1px 2px;
color: #fff;
padding: .5em 3.5em;
display: block;
position: relative;
}
.top-level {
width:59px;
margin-top: 5px;
/*padding-top:2.0em;*/
line-height: 1.1em;
font-size:11px;
}
.menu ul li a ul li {
text-align: left;
}
.menu a:hover, .menu li:hover {
text-shadow: #006699 1px 1px 2px;
display: block;
color: #FAA93B;
}
.menu a:active {
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}
/* submenu hover colours */
.menu li li a:hover {
display: block;
color: #F89624;
background-color:#D9D4CE;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}
#lhs {
background-image: url(img/_ui/lhs_bg_20080401.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.lhs_div {
height:1px;
text-align:right;
background-image: url(img/_ui/lhs_dotted_div_333.png);
background-position: right middle;
background-repeat: no-repeat;
}
And here is the HTML: Code: <!-- menu updated 20091218 -->
<div id="main-nav">
<ul class="adxm menu">
<li><a class="top-level" a href="<%=getCurrentAttribute('site','homepageurl')%>"><b>Home<br>Page</b></a>
</li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/FAQ"><b>FAQ<br>(Questions)</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Information"><b>Info<br>(Information)</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/New-Contractors"><b>New<br>Contractors</b></a>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Contact-Us"><b>Contact<br>Us</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level"><b><br></b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="https://checkout.netsuite.com/app/center/nlvisitor.nl/c.1123442/n.1/sc.6/.f"><b>My<br>Account</a></b></li>
</ul>
</div>
<!-- menu updated 20091218 -->
<br><br>
</td></tr>
<!-- LOGOS AND TABS -->
</table>
</div>
Hello, I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover). I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS. Angular is ready, now i have to do rounded, which is more hard. I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture. Thank you for your help. I am working in Drupal and have a menu with secondary levels. I have coded css on the menu a tag with borders and no background. .primary-menu-inner ul.sf-menu a { color: #FFFFFF; display:block; border-left:1px solid #ffcc33; border-right:1px solid #6f4c23; } I am trying to override the .primary-menu-inner ul.sf-menu li.active-trail .primary-menu-inner ul.sf-menu li.active-trail { background: url(../images/nav.png) no-repeat right -64px; border-bottom:1px solid #a67c52; border-right:1px solid #a67c52; border-left: 1px solid #38230b; visibility: visible; } to where the borders settings on the a tag does not show up on the li.active trail. Any suggestions would be great... Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css. I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link. but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions. PHP code: Code: <?php
$block = ( is_front_page() ? 'h1' : 'div' );
// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable
?>
<?php echo "<$block class='blog-title'>"; ?>
<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>
<p class="description"><?php bloginfo('description'); ?>
<ul id="menu">
<li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
<li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
<li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
<li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
CSS code: Code: #menu {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#menu li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#menu li.last { padding: 0; }
ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }
ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }
ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }
ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }
ul#menu li#home a:hover { background-position: 0 -30px; }
ul#menu li#archives a:hover { background-position: -84px -30px; }
ul#menu li#news a:hover { background-position: -168px -30px; }
ul#menu li#contact a:hover { background-position: -252px -30px; }
.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }
.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }
i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem. thank you for any single suggestions and comments. I found this CSS sample over the internet.. http://www.crafta.com/look1.html look that it keeps the active menu yellow color, from the main list until the sub and sub-sub list im triying to do some like that on my menu http://www.crafta.com/te2.html but no same result and i have no CSS skills... could you please take a look into that.. any help will be apreciated. thanks Whats' wrong with this? a:active doesn't seem to work at all: Code: <style type="text/css">
#navcontainer
{
margin: 5px 0 0 5px;
padding: 0;
height: 20px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
background: #000000;
width: 80px;
height: 18px;
border-top: none;
border-left: 1px solid #9B9B9B;
border-bottom: none;
border-right: none;
padding: 0;
margin: 0 0 5px 0;
font-family:Arial, Helvetica, sans-serif;
color: #26DC18;
font-weight:bold;
text-decoration: none;
display: block;
text-align: center;
}
#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}
#navcontainer ul li a:active
{
background: #000000;
color: #fff0000;
}
</style>
HTML [CODE<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Home</a></li> <li><a href="inventory.php">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> [/CODE] P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be. Thanks! hi all, Code: <ul class="sessionlist"> <li class="session_event"> <label class="evinfo"> <b>available places: 1</b> </label> <br> <label class="evinfo"> <b>session capacity: 1</b> </label> </div> <br> <label class="evinfo">Click to select</label> </li> <li class="session_event current"> <label class="evinfo"> <b>available places: 1</b> </label> <br> <label class="evinfo"> <b>session capacity: 1</b> </label> </div> <br> <label class="evinfo">Click to select</label> </li> I have managed to get the color of the text in these labels by using: Code: ul.sessionlist li:hover .evinfo{
color: #662d91 !important;
}
My question is.. how do i change the color of the text for the labels in selected_session current? Its doing my head in and I can't figure it out... Probably really simple for you guru's though. Ben ps, i know the html for this is invalid.. I've chopped out a load of code to leave only the relevant stuff and have probably missed a few things. I have an element with a :hover css property. The element is also wired with some javascript so that it moves when you click it (for reordering a list). In IE 7 & 8, the hover state persists after the element has been moved and the mouse is no longer over it. The only way to take the element out of hover state is to mouse over it again and then mouse out. It makes my interface look really buggy. Has anyone ever dealt with this bug before? Is it possible to have a link where the user rolls their mouse over it, and an image appears on top of it? I tried setting it as a background image, but it only fills the background of the text. Thanks! Hi all, I've had this issue for a while now and can't for the life of me get a clean fix/understanding of whats wrong. I've had a few other Designers/Developers look at it with no look either! http://www.hoctordesign.com/csstest/test.html has the code and details. I'm mainly concerned with issue 1. This is that i can't get control of the hover state text color. It currently inherits a color which is need in other areas of the site. I need to over ride this but can't! The second issue is that I can't control the space between the tabs. Can anyone help? Thanks! Denis I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;} When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state. http://www.graphics-tech.com/concept There is the link for example. Thanks Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- Hi, I have created my website but I'm having problems with the a:active link in my CSS. When I go to my site I would like the currently viewed pages link to be blanked out and unclickable, (until I view a different page.) I have tried to change the a:active part of my CSS but to no avail. The only part that seems to work in the CSS is the a:hover part, all the others seem to be ignored. Still relating to the question above, I have made the links width 229px. This seems to display fine with IE6, however NS7 compresses the layers background to the size of the text. How do I avoid this? I have tried adding an absolute position style to the layer in CSS, but I then lose the 'fluidity' of the website when the browser is resized. I have pasted my CSS below: #waita, #waitb { text-decoration:none; color:#FFFFC0; border-style:solid; border-color: #000000; border-width:2px; background-color:#000000; layer-background-color:#000000; font:bold; font-weight:bold; font-family:arial; font-size:14px; height:22px; width:230px; z-index: 100; margin: 5; } .image { border-width: 2; border-color: #000000; border-style: solid; margin: 10; } .class1 a:link { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:active { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:visited { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:hover { text-decoration:none; color:#FFFFC0; border-style:solid; border-color: #000000; border-width:2px; background-color:#000000; layer-background-color:#000000; font:bold; font-weight:bold; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } I have tried to change the two line in the a:active part: {background-color:#FFFFC0; layer-background-color:#FFFFC0;} but it seems to do nothing. Cheers, Andy I have menu that uses its own CSS and I am having some problems with the a:active. I have accomplished changing the font color but have been unable to change the background color of the cell. See the code below.... Any help is greatly appreciated! By the way, the active link has to be used as a div. I am using a specialized menu with specific requirements :S The background command below only colors the background of the text but in the OVER css, it colors the background of the CELL.... Code: #dm_t-active_link {
font-weight: 900;
color: gold;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
background-color: #440000;
width:125px;
border : 0px solid black;
}
.dm_t-0_over {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 4px;
color: #BC8D31;
background-color: #550000;
border : 1px solid black;
height: 16px;
cursor: hand;
}
is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on. i hope that makes sense |
|||||||