|
CSS - Css Menu Question
I am not very much into CSS so please excuse me if the question sounds too basic
I have this code Code:
<html>
<head>
<style type="text/css">
#menu a, #menu a:visited {
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #fff;
}
#menu a:hover {
// color:#fff;
color:#069; //Color of the text
background-color:#e09222;
//background-color:#f00000;
border-color:#f0c992 #e09222;
//border-color:#ffffff #000000;
}
</style>
<div id="menu">
<a href="#nogo">Item 1</a>
<a href="#nogo">Item 2</a>
<a href="#nogo">Item 3</a>
<a href="#nogo">Item 4</a>
<a href="#nogo">Item 5</a>
</div>
</html>
It works fine except that I want the menus to be horizontal and not vertical Also, what does #menu a, #menu a:visited { means? (menu being written twice) Thanks Similar TutorialsI built a drop down menu on this test page: (Bakburner com /test.html) How do I get it so the drop downs appear larger than the link to activate it? I'm trying to get each menu item to be on its own line instead of wrapping. Thanks! - Figured it out. Hey everyone! I'm brand spankin' new to the forum, but hopefully I'll become a regular fixture here! I have a real estate agent client that I am doing SEO for, but my duties have expanded (a little outside my expertise) into the website itself. I can't post hyperlinks (which precludes me pasting code here) so this should be an interesting task of explaining my problem! Currently, there is a vertical navigation bar on the left side of the page that is simply an < ul > of hyperlinks. So, for example, if the list item was "Brooklyn", it would return a search of the MLS listings for the city of Brooklyn. The client wants these hyperlinks to instead go to pop-out menus. So, the tab would still say "Brooklyn", but there would be two popout items "Brooklyn Brownstones" and "Brooklyn Apartments" for example. The original tab would no longer hyperlink to search results, but the pop outs would link to results for their specific parameters. The current template is using <ul class="navSec"> to accomplish the nav bar. I cannot write code (aside from HTML) from scratch. I can, however tweak and edit existing code in .css, .php, .js etc. If there is any way you can help me, I'd appreciate it. Since I can't link the site, I can tell you it is Maui Just Listed (all one word) with the dot and then the com. Eileen Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: 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>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. Hi folks. I'm hoping someone can help me out. I have a template I've been working with (struggling with). It has a style sheet attached to it and I'm trying to replace the main, static menu with a drop down Spry Menu. I've managed to get most of it figured out but my dropdowns aren't colored correctly. The Spry Menu isn't centered on the page. The menu titles are spread out too far also (ie. it's suppose to be "About Me" but the "Me" is way below the "About"). I'm guessing it's probably an easy fix for you all but I've been playing with it all day without a lot of progress. Thank you. Let me know if I should post links. I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on. if there is a better way of doing this all please let me know this is menu.php PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BHI and Roth's Website menu</title> <?php <link rel="stylesheet" type="text/css" href="menu_css.css" /> </head> <BODY STYLE="background-color:transparent"> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenui"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li> </ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li> </ul> </body> </html> <?php } } } else //if the cookie does not exist, they are taken to the login screen { header("Location: login.php"); } ?> </html> And this is menu_css.css Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#990033;
background-repeat:repeat;
border-color:#FFEE00;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#990033;
border-width:0px;
border-color:#990033;
border-style:solid;
text-align:center;
text-decoration:none;
padding:4px;
_padding-left:4;
font:normal 11.5px Verdana;
color: #FFEE00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;
padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#BB99BB;
background-image:none;
}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFEE00;
border-color:#0099cc;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFEE00;
border-color:#990033;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
http://www.tvshow-caps.co.uk/test/index.php if you hover over the main menus (jeans etc) you will see that each of the sub-menu is over two lines so something like: regular fit instead of regular fit and the second sub menu (shirts) half of the menu has background-color when i want it to be on all of it? Hi all, it's me again with yet, another question! Just spoke to my friend who I am putting a website together for, and although we agreed it would be as basic as possible as my skills are a little rusty, he now wants a drop down menu. Basically I have this: Code: <ul id="main_menu"> <li id="quick_contact"><a href="contact_main.html">Contact Us Now</a></li> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="security.html">Security</a></li> <li><a href="training.html">Training</a></li> <li><a href="testimonials.html">Testimonials</a></li> </ul> And he wants it so when you click on the Security link you get this menu pop up: Code: <ul id="security_menu"> <li><a href="c_protection.html">Close Protection</a></li> <li><a href="surveillence.html">Surveillence</a></li> <li><a href="d_supervisors.html">Door Supervision</a></li> <li><a href="e_security.html">Event Security</a></li> <li><a href="s_guards.html">Security Guards</a></li> <li><a href="r_security.html">Retail Security</a></li> <li><a href="bollywood.html">Bollywood Security</a></li> <li><a href="filmlocation.html">Film Location Security</a></li> <li><a href="cctv.html">CCTV</a></li> </ul> I want it to be as basic as possible and I have done some searching on google but they all include jquery? Which I am not familiar with, if someone could help me out or point me in the right direction that would be great! I promise soon to stop asking so many questions, honestly! Ash Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? I have downloaded a CSS menu and embeded it inot my website but, I need a little help for MouseOver and OnClick fuction. I preferr to deal this function with CSS otherwise JavaScritp will also be preffered . my CSS Style Sheet =============================== ul#menu { width: 900px; height: 43px; background: #FFF url("/images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; } ul#menu li { display: block; float: left; margin: 0 0 0 5px; } ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; } ul#menu li a:hover { color: #333; } ul#menu li a.current { color: #FFF; background: #FFF url("/images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; } ul#menu li a.onMouseOver { color: #FFF; background: #FFF url("/images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; } ul#menu li a.onClick { color: #FFF; background: #FFF url("/images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; } =============================== my HTML code to call =============================== <link rel="stylesheet" href="css/menu_style.css" type="text/css" /> <div id="navmenu"> <ul id="menu"> <li><a href="index.php" target="_self" title="HOME" class="onMouseOver" onclick="home">HOME</a></li> <li><a href="hosting.php" target="_self" title="Web Hosting" class="onMouseOver" onclick="hosting">Web Hosting</a></li> <li><a href="hfeatures.php" target="_self" title="Features" class="onMouseOver" onclick="hfeatures">Features</a></li> <li><a href="why.php" target="_self" title="Why Us" class="onMouseOver" onclick="why">Why Us</a></li> <li><a href="dev.php" target="_self" title="Development" class="onMouseOver" onclick="dev">Development</a></li> <li><a href="contacts.php" target="_self" title="Contact Us" class="onMouseOver" onclick="contacts">Contact Us</a></li> </ul> </div> =============================== ok.. im not very good at css, but i managed to get a basic layout and a menu still.. i haven't got a clue on how to link the menu to the content.. like.. in frames, its easy.. just say Code: <a href="somestuff.html" target="content">stuff</a> and use the frame src to get the browser to show the content when visiting the site.. but in css.. i now have this website, but i want the items to be hidden.. untill someone clicks on the menu buttons.. I've tried something like the first example of a tabbed interface but.. that didnt work very well back to the drawing board.. *sigh* anyone got some tips for me? i'd appreciate it -Emiel- Hi- I need to make a menu much like this one http://www.adaptenv.org/ -it needs to have different color rollovers and the line underneath to change color as well(just like the example). Any ideas? I've tried everything and I'm at a loss. (I'm also a novice at this!) thanks- |
|||||||