CSS - Css & Jquery Menubar - Submenu Text Color Help!
This is my first post so hello everybody!
I am trying to implement this menu and my problem arises in trying to change the submenu font color (as well as the hover color) at levels 2 and 3 of the menu. I figured this would be as straightforward as just changing the color values in the CSS, but it doesn't seem to be responsive. Interestingly, it works for the first level. It's been driving me insane. I can change the submenu background color, but not the font color even though there looks to be code for it. Anyway, any help would be greatly appreciated! You can test out the menu itself from the site or take a gander at a portion of the code I'll post below. I commented on the section towards the bottom. Cheers, MorphVT Code: /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background:url(images/main-bg.png) repeat-x; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover>ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image: url(images/item-pointer.gif); } div#menu ul ul a.parent:hover span { background-image: url(images/item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color: #e5e5e5; } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background: rgb(45,45,45); <--- CHANGING THIS WORKS margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color: rgb(169,169,169); <--- CHANGING THIS NOTHING HAPPENS } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color: rgb(169,169,169); <--- CHANGING THIS NOTHING HAPPENS } div#menu ul ul a:hover span { color: #fff; <--- CHANGING THIS NOTHING HAPPENS } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } Similar TutorialsOkay, I have a navigation and one link, "SERVICES" has a sub-menu. The submenu looks good in Firefox, Safari, and Netscape for the Mac. Also Firefox for the PC, but not IE7 for the PC. Here's the site: http://www.caillouette.com/Villere_dynamic2/rentals.php Please rollover, "SERVICES" in IE. Here's the style sheet (*note: I created it Dreamweaver using Spry. I am only including the code of interest) Code: /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 9pt; font-weight: bold; color: #FFFFFF; /*text color*/ padding: 0px 0 0 12px; text-decoration: none; z-index: 1020; cursor: default; width: 8.2em; position: absolute; left: -1000em; display:block; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 100%pt; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers */ ul.MenuBarHorizontal ul { border: 0px; background-color: #AEB0B3; } /* status for the new colors */ ul.MenuBarHorizontal ul a { border: 0px; color:#FFFFFF; background-color: #AEB0B3; padding: 0 30px 0 0; } ul.MenuBarHorizontal ul a:hover { border: 0px; color:#444343; background-color: #AEB0B3; padding: 0 30px 0 0; } /* end new colors */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ text-size:9pt; font-weight:normal; /* background-color: #AEBOB3; */ color: #9dba44; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ /*ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } */ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ /*ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } */ /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } ul.MenuBarHorizontal ul aIE { border: 0px; color:#FFFFFF; background-color: #AEB0B3; padding: 0 30px 0 0; } ul.MenuBarHorizontal ul a:hoverIE { border: 0px; color:#444343; background-color: #AEB0B3; padding: 0 30px 0 0; } } thanks Hi all, I'm quite new to CSS. I tried to design a top-navigation using yui 2.6 menu from markup. Things work fine. But I wanted to create a sperator to group the menubar items. So I added a new class in css like .yui-skin-sam .yuimenuitem-seperator{ _border-bottom:solid 1px #fff; background-color:#ddd; height:1px; } This works fine with Firefox not in IE...( IE as usual.... ) Anyone please suggest me the right way to use seperators in menubar items using YUI.. Best regards, Markish hi there, i'm using code from http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P10/ for my menubar, the problem is when i refresh the page the menubar is on it stops working. help please! I have this for my td tag: Code: <td bgcolor="#ffffff" onclick="window.location.href='...'" onmouseover="this.style.backgroundColor='#f1ffff'; this.style.cursor='pointer';" onmouseout="this.style.backgroundColor='#ffffff'"> I'd also like to add code to change the text color onmouseover. Can someone post how. Also, why is it different code to change a style when the code is embedded in an event as opposed to an external css file. For example to the change the background color of a <td> from a css file, it would be background-color, but internally its backgroundColor. This seems very conter-intuitive. Where can I find the available style options for the internal style. The W3C site only has for external and <style> tags in the header.Thanks! How do I get rid of the blue text and underline ?? Here is my style sheet #page_content { margin-left: 200px; } #container { position: relative; width: 100%; } #background { width: 100%; position: absolute; z-index: -1; top: 0; left: 0; background-color: #000000; } #testbox{ width: 100%; height:100%; position: relative; } #menu li{ display: inline; text-transform: uppercase; font-size: 1.1em; line-height: 1.0em; font-weight: bold; padding: 0 10px 0 10px; color: #FFFFFF; text-decoration: none; } #data{ width: 190px; height: 200px; margin: 20px; position: absolute; bottom: 150px; color: #FFFFFF; font-size:1.3em; } I have a Joomla! 1.5 site and I would like to make the colors of a current selection and the hovering text (when I mouse over a link) different colors. Right now they are both set to be white as governed by the following code in my template.css: .navigation .menu-drop > li:hover > a > span, .navigation .menu-drop > .active > a > span, .navigation .menu-drop > #current > a > span, .navigation .menu-drop > .sfHover > a > span { color: #FFFFFF; } What would I need to do to this to make the changes I need? Like is there a spot where I can split this code and add in another color? I currently have a PRE tag inside a DIV tag. The DIV tag has a limited size. Often a long line of text will stretch outside the PRE tag. I do not mind this horisontal overflow as the contents has more meaning when it is not wrapped. My problem is that this overflow text flows under the right hand navigation column on my site. I would like the PRE tag to be above everything else on my site. How can I do this? The overflow text seems to have no background, making it hard to read if it is over an image. Is there any way to get overflow text to have a brackground without expanding the PRE tag? That's what a friend of mine is trying to do to her blog. She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text. If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/ Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static. If anyone knows if this is even possible, please help me out. Thanks in advance. Hello I'm trying to figure this out. I want different color on the text-decoration overline and underline then the text. I know it's possible but how? It works if i change it into border but that's not the case. Here's a picture to give you the idea. Please help Thanks in advance Since i can't link url here's the link for the picture i41.tinypic.com/29bvd1.png Going to the far below link and clicking on the top link "projects" of that page brings up a menu with three links. Clicking on one of those links, 'Built' for example, brings up another submenu and at the same time it highlights "Built" as orange. Clicking on "Unbuilt" or "In Progress" has the same effect. What I'm now needing to happen is if say you click on "Block" under the "Built" menu and it goes to the "Block" page I have "projects" and "Block" highlighted as orange but I'm not sure how to have "Built" continually highlighted as orange but when either "Unbuilt" or "In Progress" is clicked on the link "Built" goes to grey and the menu item clicked on turns to orange - as I currently have it. Seems what I need is an CSS class/ID OnLoad for just "Built" (per this example) to where when going to the "Block" page the link "Built" is orange in the beginning but when the other links are clicked on it turns to grey. Would anyone have advice on how to achieve this? This doesn't work in Safari btw: http://www.royseeagleton.com/new/ Thanks!, Wesley http://www.students.niu.edu/~z162609/asme.html That is my website. As you can see on the left the link box changes with the actual text in the main box. The text goes down as the text on the main content box gets bigger. I am very new to CSS and really do not know anything. I am fairly sure this is a one line fix. However, I really need this and would appreciate any help. Code: html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{padding:5px; text-decoration:none; color:#000000;} div#header{background-color:#F3F2ED;} div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#F6F0E0;} div#navigation ul{margin:15px 0; padding:0; list-style-type:none;} div#navigation li{margin-bottom:5px;} div#extra{background:#CCC8B3;} div#footer{background:#BFBD93;} div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto} div#wrapper{float:left;width:100%} div#content{margin: 0 150px} div#navigation{float:left;width:150px;margin-left:-150px} div#extra{float:left;width:150px;margin-left:-700px} div#footer{clear:left;width:100%} hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3"> <div class="padding"> <?php if( $this->countModules('right') ): ?> <jdoc:include type="modules" name="right" style="xhtml" /> <?php endif; ?> </div> And css for that part of the page is: Code: #index .box .column3 {width:252px;} I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up. The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it. I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks! Forums: Click Here Stylesheet: Click Here Pictures of my problems: Text problem- Line Problem - I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ? <input type="text" name="trans1_1" size="6" value="170"/> Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time. New to this but with due diligence, will learn this......I have built asp update form to allow users to enter new data into the database. They are wanting to change new text entries into blue rather than using the default color (black). This highlights those new entries for those reviewing the data. I have googled for methods ranging from radio buttons to check boxes to define a new font color with no luck so far....any help is greatly appreciated............best case I think, would be a font tool bar added to the form, but have not found that method thanks I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. Hi, I am working on a submenu: <ul class="subuls"> ... How do I make "CANADA" to be positioned under "USA" ? Code: <style type="text/css"> #topNav{ background-color:#CCCC99; height:33px; margin:0px; } #topNav li{ height:33px; list-style: none; float: left; position: relative; z-index: 1000; padding: 0; margin: 0; } #topNav li.topNavSep{ height:33px; background-color:#FF0000; width:1px; } #topNav li ul.subuls { /* display: none; */ width:126px; position: absolute; top: 33px; left:0px; margin: 0; padding: 0; border: 1px solid #0D458A; } #topNav li:hover ul, li.over ul { /* lists nested items */ display: block; } </style> </head><body> <div id="topNav"> <li class="topNavTitle"> <a href="" >Home</a> </li> <li class="topNavSep"></li> <li class="topNavTitle"> <a href="" >FAQ</a> <ul class="subuls"> <li><a href="">USA</a></li> <li><a href="">CANADA</a></li> </ul> </li> <li class="topNavSep"></li> <li class="topNavTitle"> <a href="" >Contact</a> </li> </div> Hi people. Have been trying to get this CSS Nav (for weeks) to when the user MouseOvers the 'link', a 'SubMenu' pops out with several (3) menus (links). Have got nowhere!! Any help would be greatly appreciated! Heres the main code so far.: Code: <style> .buttonscontainer {width: 135px;} .buttons a {color: #FFFFFF; background-color: #6699CC; padding: 2px; padding-left: 3px; display: block; border-left: 10px solid #000000; font: 11px Verdana, sans-serif; font-weight: bold; text-decoration: none; text-align: left; margin-top: 1px;} .buttons a:hover {border-left: 10px solid #6699CC; text-decoration: none; background-color: #000000;} </style> <div class="buttonscontainer"> <div class="buttons"> <a href="#" onMouseOver="window.status='Jedburgh Gallary'; return true" onMouseOut="window.status=' '"; return true";>Jedburgh</a> </div> </div> Thank alot people. Jackson Hi there... I have a friend that wants me to help them out with the menu on their site. here is the link of the template they bought. uniquedealz dot com/2020 (I hope it's okay I did it like that?) Under "Product" I need to add 4 items then under one of those items/links I am adding 20 more items/links. I found out in the source code I need to use the ul code to create the actual names of the links but I am getting confused with the css class part. Any help would be great. Should I include the style.css and layout.css? Thank you Julie This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated! It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always). Here is the CSS (sorry if it's a mess, I'm learning) ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 298px; background-image: url(../images/PracticeAreas.gif); z-index: 2; } ul.MenuBarActive { z-index: 1000; } ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 298px; } ul.MenuBarVertical ul { margin: 0% 0 0 100%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } ul.MenuBarVertical ul li { width: 302px; background-color: #CCC; border: 1px solid #A32B34; z-index: 2; } ul.MenuBarVertical { border: 0px; } ul.MenuBarVertical ul { border: 0px; } ul.MenuBarVertical a { display: block; cursor: pointer; padding: 0.5em 0.75em; color: #A32B34; text-decoration: none; } ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color: #FFF; } ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { color: #FFF; } ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(../images/PracticeAreas.gif); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; width: 298px; } ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-repeat: no-repeat; background-position: left top; background-image: url(../images/Template_10_ro_10.png); background-attachment: fixed; width: 298px; } ul.MenuBarVertical iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; z-index: 2; } } -------------------------------------------------------------- Any help would be greatly appreciated! ~cheers~ |