|
HTML - How Do I Set Submenu Background?
I am using Dreamweaver and when I publish my code, the Remote Start/Alarm Combos submenu doesn't have the black background border the .leftnav menu style has. I tried changing all styles to black background, but it is still transparent.
Here's my code Part 1: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> @charset "utf-8"; /* CSS Document */ body { background-color: #000000; background-image: url(http://i184.photobucket.com/albums/x...kground2.png); background-repeat: repeat-x; } .catHead { background-color:#0B161A; font-family:verdana,arial; font-color:#0B161A; font-size:16px; font-weight:bold; padding:8px; } .crumb { background-color:#0B161A;height:15px; font-family: verdana; color: #666; font-size: 10px; padding:4px; } .crumb a { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:hover { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:visited { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:active { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .leftNav { FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; color:#FFFFFF; } .leftNav { background-color:#000000; border:2px solid #0B161A; padding:5px; margin-top:5px; } .leftNav a{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:visited{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:active{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:hover{ color:#FFFFFF; display:block; width:165px; padding:4px; background-color:#003333; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } li.catList a, li.catList a:active, li.catList a:visited{ display:block; font-size:14px; font-family:verdana,arial; color:ccc; height:25px; padding-left:20px; padding-top:8px; vertical-align:middle; } li.catList a:hover{ background-color:#333333; display:block; font-size:14px; font-family:verdana,arial; color:ccc; height:25px; padding-left:20px; padding-top:8px; text-decoration:none; vertical-align:middle; } .link, .link a:link, .link a:visited, .link a:active { font-family: Arial; font-size: 14px; font-weight: bold; color: #008080; text-decoration: none; } .link, .link a:hover { font-family: Arial; font-size: 14px; font-weight: bold; color: #ff0000; text-decoration: none; } .mainBdy { font-color:#fff; min-height:400px; color:#ccc; width:650px; overflow:hidden; } .phoneBox { font-family:verdana,arial; font-weight:bold; font-size:14px; color:ccc; } .small { font-family: verdana; color: #000000; font-size: 10px; } .smallw { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:active { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:hover { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:visited { font-family: verdana; color: #ffffff; font-size: 10px; } .style1 { font-weight: bold; font-size: 33px; font-family: Arial, Helvetica, sans-serif; color: #000000; } .style2 { font-family: arial, verdana, courier new; font-size: 12px; color: #FFFF00; } .style3 { color: #00000 } .style4{ color: #FFFF00; font-family: arial, verdana, courier new; font-size: 14px; font-weight: bold; } .style5 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px color: #000000; } .style6 { font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FFFFFF; text-decoration: none; } .style7 { font-family: Verdana, Arial, Courier new; font-size: 18px; font-weight: bold; color: #ffff00 } #add2cart { padding-top: 0px; } #viewcart { padding-top: 0px; } /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 8em; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are same fixed width as parent */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarVertical ul { margin: -5% 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 8.2em; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Outermost menu container has borders on all sides */ ul.MenuBarVertical { border: 0px solid #CCC; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { border: 0px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarVertical a { color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color:#FFFFFF; display:block; width:165px; padding:4px; background-color:#003333; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #0B161A; color: #FFF; } /******************************************************************************* 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.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* Similar Tutorialshey guyz...am new to this forum...good to be here.... i need some help or pointers on how to create a submenu using html and javascript and not css....can someone direct me to a simple example where there is only html and javascript and no css....am postin the code which needs a submenu....how should i create a submenu so that when the mouse is on the menu..it opens a submenu to the right...more like a vertical menu...i have googled but all i found is examples with css... plz help me out here ....thanx Hi all, I created a very simple Spry menubar using dreamweaver. It copied all the necessary CSS and JS into a folder for me. I have one question. whenever i selected (clicked) on an item(link) on the submenu. the submenu stays open while the page load in the frame. Is there a way to configure it so when i click on an item in the submenu, the submenu will close and the page will still load in the frame? Hi guys, First of all, I'd like to apologize for my writing skills as I'm from a non english-speaking country and I moved to Australia not long ago. Anyway, I'm trying to help a friend developing a website and I'm having some trouble getting the page to look like what he wants. I am an absolute rookie in website development and I'm discovering Dreamweaver as I speak. I managed to understand a few concepts based on what I know in VBA in Excel and tried to use some templates I found on the net. The last part didn't go really well and I decided to get rid of what I tried to make my explanations as clear as possible. Basically, I have a drop down menu on the left side of the page that works quite well at the moment.Wwhat I want to do is : the user goes over the first link of the drop down menu (called "General for Sale" under the section "Buying") and when he clicks on it, he loads on the right side the content of another page called "generalforsale.html. All of this obviously without refreshing the whole page and with the option of clicking on another section from the drop down menu to load another page... And all of this knowing that I'd like one specific page to be displayed on the left when the user first arrives on the website that would then be replaced by a page, depending on what he selects from the drop down menu. I have honestly tried everything I found and could understand, unsuccessfully... I have attached a lighter version of what I'm trying to do in case one of you guys has the time to have a look. I completely understand if this is not the policy of the forum and therefor apologize in advance. Thanks for reading me and for your help :-) Sub Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Hi, I wanted to use an image for the background of my page, but also have a DIV layer with images that look like they are coming out of it. For some reason though when I set the image as the background, it becomes just a bit brighter. This completely throws off what I'm trying to do because there are elements of the background in the DIV layer image and now the DIV image looks darker than the background ruining the effect. So I've tried to solve the problem by putting this huge background image as a DIV layer and aligning it to top: 0 left: 0. The colors now match. The problem is though that the image is way bigger than the browser window so scrollbars appear on the sides. I don't want this. Can anyone offer a suggestion to either of my problems? Thanks! hey everyone, when im making my website i put something in it then move it up the website to a different position so its where i wnt it. when i move this up my website it leaves a blank space at the bottom. how do i get rid of thisblank space?? the code im using is... <div style="position: relative; top: -300px; left: 200px;"> ive also tryed postioning it in css and its just doing the same thing if someone could please help i would be very grateful thanks I want to give a division a background image but I'm not sure how to do it. I wrote a code that says: Code: #links {
background-image: Graphic1.png
}
But nothing happened. What am I doing wrong nad how can I fix it? Heres the link Well, It looks fine, unless you view it in full screen, if you view it in full screen you'll notice that the white and grey backgrounds extend along with the main background, I want the white and grey background to stop where the footer is, and the main background (#cccccc) to continue on down. You can use View > Source for the source code (as it's rather big and I'd rather not have something that big in my post) CSS Code: Quote: .leftcolumn{ width:273px; padding-left:9px; padding-bottom:20px; background: #F1F1F1; float:left; text-align:left; } .rightcolumn{ width:503px; float:right; text-align:left; } left column = grey column right column = white column Hi i have an issue with my background not displaying correctly. I know i have not sliced the template etc but i can only assume the same problem will occur when i do. I have set a background image to the page but its not inline with my image background, How would i go about making sure everything is lined up when publishing it? Ive messed around with margins etc but there seems to be a default margin at the top which i cant remove. http://www.banks-twins.biz/testhome.html Thanks. Alex. How can I set background in a page. please help me. hi in this site www.muaythaistuff.com they have some tatoo kinda background and i have tried to put this one on my site and it makes a lot of them in one page so my question is how can i set this tatoo image only in the top like in this very site and the rest will be black color? I'd like to have a scaling background like on this site: www.burton.com I'm using DreamWeaver, is this possible? P.S., I'd also like to build a scaling x-y navbar like they have on that site if it's possible. Thanks in advance! im trying to use a image hosting site to make a image a background for a web site so they can see my idea what would the code look like to make that happen nevermind... Thank you for helping and this site is awesome! Take care... Ryan How to insert a background on this site ? http://videosearch.w-b0x.com/ Hey all Ok i wasnt sure wether to put this in html or css but i decided to put it here and hpe for the best. Ok , I have set a background color and a background image which all works well. Except that when i insert the banner it isnt at the top of the screen it is about a cm down from the top. This is because of the background image but im not sure how to fix it. Thankyou in advance, Jake. I've just put up a new page - mbccc.net - and I've used a picture, a .jpg image file, for the background. Sometimes it displays alright but sometimes it doesn't - sometimes it begins to 'tile' at the edge. When I view the page in my IIS on localhost it always does that. When I view it in my html editor - NVU - it always does it. My question is why does it do that and what can I do to prevent it? The picture is 196kB .jpg of 1024 x 768 pixels. I've been viewing in Firefox, what it does in other browsers I don't know. What should we do if we want to use pictures for background? regards, ab Okay, I have this background image...it's fine and dandy...but I want the stripes on the left side to continue to go down the page if more information is put on the page and it not stop at where it does on the page. I can't repeat it because THE EXOTIC ZOO will be repeated too down the page. Any suggestions of what to do? Here is the page I'm talking about: http://thexoticzoo.webs.com/rats.html I have developed a web site that works on internet explorer. The background at the top does not seem to work on other browsers. Any ideas: http://b2kdesigncontracting.atspace.com |
|||||||