|
CSS - Css Overriding Menu A Tag In A Li.active-trail
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... Similar TutorialsHi, 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 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;
}
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 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. 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 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 I am using a stylesheet to set some styles on my tables etc. I want to override a table that is inside of a <div> to use a separate style... is this possible and if so how? I tried using div id="idhere" and then setting a style with that ID but it didn't seem to work. Thank you. Hi, Is there a way to tell the browser to replace certain colours with other colours? For example replace #FF0000 with #00FF00? Also is there anyway to refer to the parent of an element? Thanks, Matthew Hi, I am trying to add bottom borders and image bullets to only the first level of unordered lists and no matter what is code, I get them everywhere. Can someone offer some insight (or where I can get some) for targeting specific ul li levels? Thanks... I'm making changes to a web application and right at the top of the CSS of the common header for the generated HTML there are pseudoclasses for the link colors. a:link a:hover.... etc. I was trying to change the color of a few links further down on the page by creating seperate classes and I was getting very odd results. Some links would change color and some would not. Finally I noticed the pseudoclasses at the top and commented them out. Suddenly all my colors looked GREAT in internet explorer, but it seems that Mozilla is ignoring my seperate classes and making the links into the browser default. Here is a summary of my generated code right now: CSS: a:link,a:active,a:visited { color : #5E6C85; } a:hover { text-decoration: underline; color : #DD6900; } .indnav { font-weight: bold; font-size: 11px; color : #000000; } a.indnav { text-decoration: none; color : #000000; } a.indnav:hover { text-decoration: underline; } HTML: <span class="indnav"><a href="index.php" class="indnav">(link text)</a></span> So what I would really like is for the pseudoclasses to apply for all links, except for when I define a specific class it should override the pseudoclasses. How do I do this? Thanks so much for your time in answering. Hi there! http://pastebin.com/m46dae086 Basically, see line #218? I define a background image for my lists, and it works great. See line #473? I try to erase the background image if the <dl> class has the "forum" class attached to it. That background's not going away. What am I doing wrong? please delete I have one css file which is linked to all my html pages That css file defines a style for all my <a> tags ie - a:link, a:visited, a:hover etc. Theres one html file where i need a different style for some of the <a> tags ive set a sepecific class on these tags ie: <a class="set1" etc and in my css file ive tried the following .set1 a:link { etc } but for some reason this doesnt override the style on the generic a tags ie it seems to keep using a:link { } ignoring the .set1 a:link { etc } help! so... having this problem where i have some css styles applied to form inut boxes, and one of them asks for the user to input his/her email address. IE, thinking it's being helpful, is overriding my nice green background with an ugly yellow background. I've done some testing, and if i put the word "email", "e_mail", "e-mail", or even "mail_e" in either the html text NEXT to the blank, or in the name of the INPUT tag, IE assumes i want it to be yellow. any way of overriding this? CSS: Code: .inputBox {
border: 1 solid black;
background-color: #bcdd4a;
font-size: 12;
width: 200;
height: 16;
color: #145e16;
font-weight: bold;
}
HTML: Code: <td valign=top>E-mail:</td> <td valign=top><input type="text" class="inputBox" name="emailAddress" size=20></td> IE Version: 6.0.2800.1106 LINK: http://www.t-2.biz/contact.php please help, frustration setting in. cheers \\ kfancy I have this tag in an external css file Code: td {
text-align:left; //and yes i know that its left by default
}
Inside my html file I have a td with alignment set to right, which according to my understanding should override the external css file, however it doesn't. The content is still left aligned. Why is that? 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! On my site, we use CSS to change the appearance of all form fields, using the following: INPUT { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 13px; color: #484848; background: #EFF4F9; border: 1px solid #484848; padding: 2px; } Unfortunately, I have a single submit button that for various reasons, I want to have looking like the normal, gray, ugly button. Is there some way to turn off the CSS for this single button? Or somehow override the CSS to make it look like a normal button? Hey all, I'm having an issue with the float property. I have 2 nested div tags both floated left, to create two columns, but the div tag holding them doesn't seem to stretch around them. it's looks basically like this... <div id="container"> <div id="leftCol"> stuff </div> <div id="rightCol"> more stuff, WOOT! </div> </div> I only run into the problem with FireFox, so i know that i'm not doing something right! Can anyone help.. thanks! In my main CSS file, the background-color is set to #FFFFFF (white) however this also erased my background images in the cells of my table i have tried to add them with style tags, but the main CSS still overrides Top of the table + cell with bg PHP Code: <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td width="766" height="295" valign="top" style="background-image:url(images/row1.gif); background-repeat:no-repeat "> This is the main CSS: PHP Code: body,td,th { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } body { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } |
|||||||