|
CSS Menus
Topics
I 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. I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? Please help me how to center Ultimate Horizontal Drop-Down Menu Demo on DIV ultimate.horizontal.html 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" xml:lang="en" lang="en"> <head> <title>Ultimate Horizontal Drop-Down Menu Demo</title> <link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/default/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lt IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> </head> <body> <h1>Ultimate Horizontal Drop-Down Menu Demo</h1> <div id="catmenu"> <ul id="nav" class="dropdown dropdown-horizontal"> <li><a href="./">Home</a></li> <li><span class="dir">About Us</span> <ul> <li><a href="./">History</a></li> <li><a href="./">Our Vision</a></li> <li><span class="dir">The Team</span> <ul> <li><a href="./">Brigita</a></li> <li><a href="./">John</a></li> <li><a href="./">Michael</a></li> <li><a href="./">Peter</a></li> <li><a href="./">Sarah</a></li> </ul> </li> <li><a href="./">Clients</a></li> <li><a href="./">Testimonials</a></li> <li><a href="./">Press</a></li> <li><a href="./">FAQs</a></li> </ul> </li> <li><span class="dir">Services</span> <ul> <li><a href="./">Product Development</a></li> <li><a href="./">Delivery</a></li> <li><a href="./">Shop Online</a></li> <li><a href="./">Support</a></li> <li><a href="./">Training & Consulting</a></li> </ul> </li> <li><span class="dir">Products</span> <ul> <li><a href="./" class="dir">New</a> <ul> <li><a href="./">Corporate Use</a></li> <li><a href="./">Private Use</a></li> </ul> </li> <li><a href="./" class="dir">Used</a> <ul> <li><a href="./">Corporate Use</a></li> <li><a href="./">Private Use</a></li> </ul> </li> <li><a href="./">Featured</a></li> <li><a href="./">Top Rated</a></li> <li><a href="./">Prices</a></li> </ul> </li> <li><a href="./">Gallery</a></li> <li><a href="./">Events</a></li> <li><a href="./">Careers</a></li> <li><a href="./" class="dir">Contact Us</a> <ul> <li><a href="./">Enquiry Form</a></li> <li><a href="./">Map & Driving Directions</a></li> <li><a href="./">Your Feedback</a></li> </ul> </li> </ul> </div> </body> </html> css/dropdown/dropdown.css Code:
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
display: block;
/*margin: 0;
padding: 0;*/
}
ul.dropdown {
position: inherit;
z-index: 597;
/* float: left;*/
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
text-align:left;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
/* left: 0;*/
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
css/dropdown/themes/default/default.ultimate.css Code:
#catmenu{
text-align:center;
width:100%;
background:#f6f6f6;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
height: 34px;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
css/dropdown/themes/default/default.css Code:
#catmenu{
text-align:center;
width:100%;
background:#f6f6f6;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
height: 34px;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
Thank you. I have a pure css menu that I like but it does not work with IE. works exactly as I want in firefox. in IE when I hover over the menu bar the list do not become visible any one know what I need to do to make it work? Thanks BadIdea The page code is Code: <html> <head> <meta name="author" content="Jeffrey Bourque"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache"> <link rel="stylesheet" type="text/css" href="menuCss.css" /> <title>Operations Control</title> </head> <body> <div class="mainheader"> <table> <tr><td><img src="img/sitelogo.png" width="135" height="59"/></td><td><h1>Operations Control</h1></td></tr> <tr><td colspan="2"><?php echo "Welcome! $useid "; ?> -- <a href="../logout.php" class="nh"> Log Out</a></td></tr> </table> </div> <div id="navMenu"> <ul> <li><a href="#">Home</a> <ul> <li><a href="#">My Evaluations</a></li> <li><a href="#">My Approvals</a></li> <li><a href="#">My Actions</a></li> <li><a href="#">Phone List</a></li> <li><a href="#">Training</a></li> <li><a href="#">Change Password</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Manufacturing</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Quality</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Engineering</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Planning</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">My Actions</a></li> <li><a href="#">Phone List</a></li> <li><a href="#">Change Password</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Accounting</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Materials</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <ul> <li><a href="#">Engineering</a> <ul> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> <li><a href="#">Search Data</a></li> </ul> <!-- end inner ul --> </li> <!-- end main li --> </ul> <!-- end main ul --> <br class="clearFloat" /> </div> <!-- end navMenu --> </body> </html> The Css is Code: body
{
margin:0;
padding:0;
background:#D0E2DD;
}
.mainheader
{
background:#F2F2F2;
margin:0;
padding-left:30px;
padding-top:20px;
padding-bottom:5px;
padding-right:10px;
}
.mainheader h1
{
color:#000000;
font-size:36px;
}
.navBar
{
background:#7777BB;
color:#2554C7;
line-height:30px;
}
.endBar
{
clear:both;
background:#FFFFFF;
padding:0px 10px;
border-bottom:1px solid #808080;
}
.floatR
{
float:right;
}
#navMenu
{
margin:0;
padding:0;
}
#navMenu ul
{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li
{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#7777BB;
}
#navMenu ul li a
{
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#ffffff;
border:1px solid #ffffff;
text-shadow:1px 1px 1px #000000;
}
#navMenu ul ul
{
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul
{
visibility:visible;
}
#navMenu li:hover
{
background:#aaaaaa;
}
#navMenu ul li:hover ul li a:hover
{
background:#F2F2F2;
color:#000;
}
#navMenu a:hover
{
color:#0088ff;
}
.clearFloat
{
clear:both;
margin:0;
padding:0;
}
I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help. Kate CSS CODE: #tabs8 { float:left; width:100%; background:#FCF1F6; border-bottom:4px solid #E276A7; overflow:hidden; position:relative; } #tabs8 ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #tabs8 ul li { display:block; float:left; list-style:none; margin:0 0 0 1px; padding:0px 3px; position:relative; right:50%; } #tabs8 ul li a { display:block; margin:0 0 0 1px; padding:3px 0px; background:url("tableft8.gif") no-repeat left top; text-decoration:none; line-height:1.3em;} #tabs8 a span { background:url("tabright8.gif") no-repeat right top; padding:3px 10px; color:#333; line-height:1.3em;} #tabs8 ul li a:hover { background:#369; color:#fff; } #tabs8 ul li a.active, #tabs8 ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }--> HTML CODE: <div id="tabs8"><ul> <li id="current"> <div align="center"><a href="index.html"><span>Home</span></a></div> </li> <li> <div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div> </li> <li> <div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div> </li> <li> <div align="center"><a href="gallery.html"><span>Gallery</span></a></div> </li> <li> <div align="center"><a href="blog.html"><span>Blog</span></a></div> </li> <li> <div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div> </li></ul></div> Hi: I am having some problems getting the background image of a drop-down menu to do what I want. The drop-down menus have different lengths, and I have a gradient image which I would like to have repeat across (repeat-x) but on the y-axis, I want it to be scaled to fit the menu height which differs from drop-down to drop-down. I have the following code in my CSS file. Code: transparent url(../images/style1/submenu_bg.png) repeat-x 0 bottom I cannot figure out how to have the image scale on the y-axis. Any assistance would be appreciated. I am trying to build a menu that will load content either on the right of it or the left. I have looked for a tutorial on how to do this but am having no luck with the search engines. Here is a picture of what I would like to do. If anyone can assist me with this it would be very helpful. Or maybe even point me in the direction of a source. Thank you! Hey guys, New to the forum. Mainly came on here to get help with my nav bar. It works perfectly in FF and IE 8.07+, but the problem it with IE8.06, where it doesn't show at all. Not too worried about pre-8.06, only a small amount of my page hits comes from below that version. I've spent ages looking for a problem, but can't find where I've went wrong. There's may be some superfluous stuff in there that I've added to try and fix the problem.. Please help? =) ------------------------ Code: #PageList1 ul {
height: 1.5em;
overflow:hidden;
margin: 10px -10px 5px;
width: 100%;
padding: 10px;
background-image:url('http://4.bp.blogspot.com/-WKkxGKrRVcw/TbFWFn_2VxI/AAAAAAAAAis/NKf1k3sO9A8/s1600/nav_bg2.jpg');
background-repeat:repeat-x;
}
#PageList1 li {
height: 1.5em;
list-style-type:none;
float:left;
}
#PageList1 li a {
display:block;
height: 1.5em;
width:auto;
clear:left;
font-weight:bold;
font-size:9pt;
line-height: 0.5em;
margin: -9px 0px -23px;
color: #ffffff;
background-image:url('http://3.bp.blogspot.com/_vhqPwC7csIg/TSUQG6Q3tfI/AAAAAAAAAYU/5ceiGi8na3s/s1600/gradient40px.jpg');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;
padding: 10px 10px 15px;
border: 1px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
#PageList1 li a:hover, #PageList1 li a.sfhover {
background:transparent;
font-weight:bold;
color: white;
}
#PageList1 li ul {
left: -999em;
position: absolute;
width: 13em; /* Width to help Opera out */
height: auto;
background-color: #ccc;
colour:#fff;
clear: left;
}
#PageList1 li:hover ul, #PageList1 li.sfhover ul {
left: auto;
margin: 8px -80px 0px;
width: 13em;
height: auto;
background: #ccc;
}
#PageList1 li:hover li a, #PageList1 li.sfhover li a {
background:#ccc;
border: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #fffccc;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding: 0px;
margin: 5px 0px 0px;
-moz-box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
box-shadow: 0px 0px 0px #000;
color: #000;
}
#PageList1 li li a:hover, #PageList1 li li a.sfhover {
background-color: #ccc;
color: #fff;}
<script type='text/javascript'>
sfHover = function() {
var sfEls = document.getElementById("PageList1").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
How do I create roll over tab menu bar in CSS? I keep looking up ways to do this, but I find only ways to download it from a website (which I fear may have a virus) or in dreamweaver (which I don't have). Also if it's not too much to ask please connect the tabs as well. I have spent 2 full days trying to figure this out. The last thing is I would like to have it centered. If anyone can show me how it is done I would be very thankful. Hi guys, This site Valentino dot com has the menu slide out another transparent image when you mouse over it. How is this done? How can I do this? What is the code etc? Peter I have a CSS dropdown menu with 1 sublevel which I want centered on my page. It looks fine when centered if I use Firefox, but in IE, the sublevels now pop out to the right of the main item and the 1st item doesnt show. Here's my CSS for IE: Code: div.menu
{
position:relative;
height:30px;
display:block;
margin: 0 auto;
text-align:left;
}
ul.menu
{
top:0px;
left:0px;
position:relative;
padding:0px;
margin: 0 auto;
display:block;
float:left;
}
ul.menu li {
float:left;
}
ul.menu ul
{
position:relative;
margin:0px;
top:0px;
left:0px;
padding:0px;
display:block;
}
ul.menu ul li
{
display:inline;
float:none;
position:relative;
top:0px;
left:0px;
}
a.menu
{
display:block;
width:100px;
height:30px;
margin-top:-4px;
}
a.menu:hover
{
display:block;
}
And my HTML: Code: <body onload="MM_preloadImages('../Pictures/CoachesY.png','../Pictures/ScheduleY.png','../Pictures/RostersY.png','../Pictures/Sub Buttons/CoachHenriottY.jpg','../Pictures/Sub Buttons/CoachWitteY.jpg','../Pictures/Sub Buttons/CoachSchneiderY.jpg','../Pictures/Sub Buttons/CoachReevesY.jpg','../Pictures/Sub Buttons/FreshmanY.jpg','../Pictures/Sub Buttons/JVY.jpg','../Pictures/Sub Buttons/VarsityY.jpg','../Pictures/CampsY.png','../Pictures/SummerInfoY.png','../Pictures/LinksY.png','../Pictures/YouthInfoY.png','../Pictures/DirectionsY.png')" align="center">
<table width="690" align="center" bgcolor=#8560A9>
<tr><td bordercolor="#FFFFFF" bgcolor="#8560A9">
<table width="690" border="0" align="center">
<tr bgcolor="#FFFFFF" height="227">
<td height="15" bgcolor="#8560A9"><div id="center"><img src="../Pictures/TitlePhoto.jpg" alt="Lady Elks Basketball" width="800" height="200" /><br />
<div class="menu">
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../Pictures/CoachesY.png',1)"><img src="../Pictures/CoachesP.png" name="Image1" width="100" height="30" border="0" id="Image1" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../Pictures/Sub Buttons/CoachHenriottY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachHenriottP.jpg" name="Image4" width="100" height="30" border="0" id="Image4" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../Pictures/Sub Buttons/CoachWitteY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachWitteP.jpg" name="Image5" width="100" height="30" border="0" id="Image5" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../Pictures/Sub Buttons/CoachSchneiderY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachSchneiderP.jpg" name="Image6" width="100" height="30" border="0" id="Image6" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Pictures/Sub Buttons/CoachReevesY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachReevesP.jpg" name="Image7" width="100" height="30" border="0" id="Image7" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a class="menu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../Pictures/ScheduleY.png',1)"><img src="../Pictures/ScheduleP.png" name="Image2" width="100" height="30" border="0" id="Image2" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image8" width="100" height="30" border="0" id="Image8" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image9" width="100" height="30" border="0" id="Image9" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image10" width="100" height="30" border="0" id="Image10" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li> <a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../Pictures/RostersY.png',1)"><img src="../Pictures/RostersP.png" name="Image3" width="100" height="30" border="0" id="Image3" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image13" width="100" height="30" border="0" id="Image13" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image12" width="100" height="30" border="0" id="Image12" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image11" width="100" height="30" border="0" id="Image11" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','../Pictures/CampsY.png',1)"><img src="../Pictures/CampsP.png" name="Image14" width="100" height="30" border="0" id="Image14" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../Pictures/SummerInfoY.png',1)"><img src="../Pictures/SummerInfoP.png" name="Image15" width="100" height="30" border="0" id="Image15" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','../Pictures/LinksY.png',1)"><img src="../Pictures/LinksP.png" name="Image16" width="100" height="30" border="0" id="Image16" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../Pictures/YouthInfoY.png',1)"><img src="../Pictures/YouthInfoP.png" name="Image17" width="100" height="30" border="0" id="Image17" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../Pictures/DirectionsY.png',1)"><img src="../Pictures/DirectionsP.png" name="Image18" width="100" height="30" border="0" id="Image18" /></a></li>
</ul>
</div><br />
</div> </td>
</tr>
</table>
</td></tr></table>
</div>
</body>
Any help would be appreciated. Help!! I am trying to design this website: nitrocanine .com/D/DDesign and the dropdown menus won't work in IE, while they work in Chrome, Safari, Firefox... does anyone know how to make them work in IE as well?? You can view the source and see the css coding and the relevant HTML. Alright, I am developing a new website. I am using a watermark that begins in header and goes over the css menu in box. The positioning of all containers is correct and it views perfectly. I have a wrapper around those 2. *The issue is when the zindex is high it shows water mark beginning in header and stretches over the menu, when that happens the menu will not work properly. If I lower the zindex then the css menu covers bottom of my watermark it works, but then you cant see bottom half of my water mark. The water mark is in .png format. Hi this theme had an old dropdown menu that was acting weird in some browsers so I updated it with a plugin and now to need to customize it to look a certain way. There are a few stylesheets at work because of the plugin but I am unable to discern why the "Contact Us" text is off-center in the button. I can see that it seems to be too long, but I don't know why it is favoring the right side of the background, instead of being centered in the background. If someone could help me demystify this I would be MUCH obliged. I will post a link so that it can be inspected... When I am allowed after 4 more posts! Please inspect the elements (too much code to post with all different style sheets at play!). Thank you. EDIT: here is link: http://drewclifton.com/clients/northern-computer/ You can also see that the dropdown under 'Services' looks funky; I'm thinking a 'sliding door' solution would be appropriate yes? Thank you. Hi, I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. Hi and thanks for the help so far Kravvitz. I checked my menu out on IE and got the following results (see screen captures below). You can probably see the element doesn't seem to go to the edge of the dropdown. Because of this the next ul level is appearing right beside the highlighted area (as it would normally), but since it isn't going to the end of the 'row' it is resulting in overlapping! Is there a way to make this work out in IE as well that you could recommend? Thanks. Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds. but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories. 2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top. can someone help me plz? here my code Code: #suckerfishnav,
#suckerfishnav ul {
float: left;
height: 2.98em;
width: 960px;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
margin: 0.1em 0.1em 0.1em 0.1em;
padding: 0;
}
#suckerfishnav a {
display: block;
color: #7c6240;
text-decoration: none;
padding-top: 0.25em;
padding-right: 0.7em;
padding-bottom: 0.1em;
padding-left: 0.2em;
}
#suckerfishnav li {
float: left;
padding: 0;
width: 13em;
height: 2.8em;
}
#suckerfishnav ul {
position: absolute;
left: -999em;
height: auto;
margin-left: 2em;
line-height: 1;
z-index: 500;
}
#suckerfishnav li li {
width: 9.6em;
border: solid #eda;
border-width: 1px;
padding-top;
10px;
}
#suckerfishnav li ul a {
width: 9.8em;
}
#suckerfishnav li ul ul {
margin: -0.20em 0 0 9.8em;
}
#suckerfishnav li ul {
position: absolute;
left: -999em;
height: auto;
width: 9.9em;
w\idth: 9.8em;
font-weight: normal;
border-width: 0.20em;
margin: 0;
z-index: 500;
}
#suckerfishnav li ul a {
width: 9.9em;
w\idth: 9.8em;
}
#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
left: -999em;
}
#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
left: auto;
}
#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
background: #eda;
width: 9.5em;
w\idth: 9.4em;
}
I'm working on a drop down menu that's entirely in CSS, and since it contains several levels and some go below the visible part of the page needing scrolling down (not good) - I need to have the sublists remain in place when the mouse is no longer over. Is there an easy way to do that without involving Javascript? Or if that is needed, how exactly? Please help!!! Thank you! The padding isn't correct in IE or Firefox. It looks fine on a mac, but it's not rendering right on PC. strategicguru.com/secure-enterprise The menu should fill up the gray bar all the way to the right. What is conflicting here? I am trying to create a website for my business and I cannot seem to center the navigation at the top of the screen and have the areas to the left and right of the screen be filled with the same bg color as the UL. I know usually you would set the margins to 0 auto to center that element on the page but for some reason its not working and the UL is just sticking to the left part of the screen. If anybody knows how to get this centered or how to fix my html/css i would sincerely appreciate it. Here is my code (html then css): <body> <div class="wrap"> <div class="menu"> <ul> <li><a href="products.html" target="_self" >Products</a> <ul> <li><a href="seaisland.html" target="_self">Sea Island Collection</a></li> <li><a href="grandoak.html" target="_self">Grand Oak Collection</a></li> <li><a href="airflow.html" target="_self">Air-Flow </a></li> <li><a href="pure.html" target="_self">Pure Visor</a></li> <li><a href="coldweather.html" target="_self">Cold Weather</a></li> <li><a href="fahrenheit.html" target="_self">Fahrenheit Collection</a></li> <li><a href="caddietowels.html" target="_self">Caddie Towels</a></li> <li><a href="woventowels.html" target="_self">Woven Towels</a></li> <li><a href="sunprotection.html" target="_self">Sun Protection</a></li> <li><a href="" target=""></a></li> </ul> </li> <li><a href="embelishments.html" target="_self" >Embellishments</a> <ul> <li><a href="embroidery.html" target="_self">Embroidery</a></li> <li><a href="wovenlabels.html" target="_self">Woven Labels</a></li> <li><a href="medallions.html" target="_self">Medallions</a></li> <li><a href="laserappliques.html" target="_self">Laser Appliques</a></li> <li><a href="ballmarkers.html" target="_self">Ball Markers</a></li> <li><a href="ultrasuede.html" target="_self">Ultra Suede</a></li> </ul> </li> <li><a href="specials.html" target="_self" >Specials</a> </li> <li><a href="whatsnew.html" target="_self" >Whats New</a> </li> <li><a href="order.html" target="_self" >Order</a> </li> <li><a href="contact.html" target="_self" >Contact</a> </li> </ul> </div> body{ font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; background-color:#b7b7b7; padding: 0px; overflow:auto; border: #0F0 solid 5px; margin: auto; } .wrap{ margin:0 auto; background-color:b7b7b7; border:0px; padding:0px; } .menu{ border:0px; padding:0px; font: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background-color:#F0F; } .menu ul{ background:#b7b7b7; height:35px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ background:#333333 url("images/seperator.gif") bottom right no-repeat; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: #2580a2 url("images/hover.gif") bottom center no-repeat; color:#FFFFFF; text-decoration:none; } .menu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { background:url('images/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background:#2580a2 url('images/hover_sub.gif') center left no-repeat; border:0px; color:#ffffff; text-decoration:none; } .menu p{ clear:left; } http://www.larreamma.com/kids_programs.html On the PC the last 'About Us' menu overlaps the body content when it is expanded. Does not occur on Mac (FF, Safari, Chrome). Tried playing with 'z-index' but if that is the issue then I am not putting it in the right place. Thank you in advance. Im doing a project Located Here *** not work safe *** 96.0.176.55/login.php Please look at the css and html If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images... The problem is when you move the mouse down to the second or third image the dropdown disappears. Can someone please help? Thanks i am designing a website which requires drop down menus, the problem is that all the drop down menus are appearing at the same position, i want the top down menus to be located under the tab which was clicked. i have provided screenshots as well as some of the code. html code: Code:
<ol id="navMenu">
<li class="first"><a href="welcome.php">Home</a></li>
<li><a href="#" onmouseover="drop_down('sm1')" onmouseout="close_soon('sm1')">Reserve Resource</a></li>
<div id="sm1" onmouseover="cancel_timeout()" onmouseout="close_soon('sm1')">
<a href="#">yghvjhb</a>
<a href="#"> jkhjb</a>
</div>
<li><a href="#" onmouseover="drop_down('sm2')" onmouseout="close_soon('sm2')">Inventory</a></li>
<div id="sm2" onmouseover="cancel_timeout('sm2')" onmouseout="close_soon('sm2')">
<a href="#">Reserve Laptop</a>
<a href="#">Reserve Tables</a>
</div></ol>
css : Code:
#navMenu{
clear: left;
background-color: #DA0000;
padding: 0.5em 3em;
padding-left: 8.5em;
margin: 0em;
}
#navMenu li{
display: inline;
margin: 0 0 0 0;
border-right:medium #FFFFFF ridge;
list-style: none;
font-size: large;
font-weight:bold;
}
#navMenu a{
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
color: #FFC1C1;
}
#navMenu li a:hover, #navMenu a:focus{
background-color: #EE3322;
}
#navMenu li.first{
margin-left: 0em;
}
#navMenu li.last{
border-right: 0;
}
#navMenu div{visibility: hidden; display:block; position:absolute; background-color: #EE3322; background-position: inherit; margin-top:0.54em;}
#navMenu div a { position:relative; display:block; width:auto; white-space: nowrap; text-align: left; margin-right:2em; padding: 1em 1em;
}
#navMenu div a:hover{background-color: #EE3322; background: #EE3322;}
I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! 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 I have a horizontal nav menu I've created using <ul> and <li> inside a <div> The problem is I can't get it to vertically center. I tried using padding and/or margin and it didn't work for all browsers. Here is the html: Code: <div class="top_nav"> <ul> <li><a href='/'>HOME</a></li> <li><a href='menu'>MENU</a></li> <li><a href='catering'>CATERING</a></li><li>DETAILS</li> <li><a href='photos'>PHOTOS</a></li> </ul> </div> and the CSS: Code:
.top_nav {
margin: 0 auto 15px auto;
height: 25px;
padding: 10px;
clear: both;
}
.top_nav ul {
list-style: none;
text-align: center;
}
.top_nav li {
padding: 0 25px;
font-family: "Palatino Linotype", "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
display: inline;
letter-spacing: 2px;
}
.top_nav li a {
color: #FFF;
text-decoration: none;
}
.top_nav li a:hover {
text-decoration: underline;
border-bottom: 3px solid #660000;
}
It stays vertically positioned at the top My page at gvtdev .davebezaire .com/journeys/bolivia08/living-experience .html validates for HTML and CSS and works fine in Firefox 3.6, Chrome 9.0, and IE 8.0. My problem is in IE 7 which I test by using IE 8.0 in Compatibility Mode. In Compatibility Mode, links in the main content, located within a div with id="content", are not clickable. This is because I have a conditional CSS section for [lt IE 8] within the <head> section of the page which includes the rule Code: #content {position:relative;z-index:-1;}
If I turn off that rule (e.g., with FirebugLite), the links are clickable. However, the functionality of the main navigation menu items in the little houses across the top of the page does not work properly. Specifically, with the rule turned off, only the first three items in the dropdown menus (such as that under "Our Journeys") are accessible. If you try to move down over the 4th item, the dropdown closes. The main menu is in a ul with class="mnu hmnu". I've made several attempts to set the parent elements to position:relative and giving them a z-index, all to no avail. I would very much appreciate some assistance. Thanks in advance for your help! Dave I've recently tried to make it so that when you hover over something, another background appeared, and when I tried that, I already had a working Selected Page background, which stopped working when the hovering one was implemented. The code is: ul#menu li a:hover { color: #FFF; background: #0066CC url(menu_hover.png) repeat-x;} ul#menu li.selected a, ul#menu li.selected a:hover { color: #FFF; background: #1C2c3E url(menu_select.png) repeat-x:} Hi, I have a few problems... some regarding compatibility and some regarding css basics. lesconstructionsjeanbrunetDOTcom/2011/flicker.html This page is a little messy 1. Slider works perfect in Firefox and NOT in IE 2. CSS menu sub items works in Firefox but NOT in IE 3. CSS menu sub items don't show over the image slider (probably normal but asking anyway...) Any Ideas Thanks Good morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
The css menu I have here on my site flickers when the mouse is moved from a parent category to the sub page menu. For example, if I hover on 'The Academy' link and move to the drop down menu, the sub menu disappears for a second. Any ideas how I can remedy this? 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 there i have a small problem and i think it lies in my nav menu, basically i want my menu to float right which it does but i'm left with this large white area on the right side of my webpage. please could someone take a look and help me my website being webbid.co.uk and the code :- Code: ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul#nav {
float: right;
position: relative;
z-index: 597;
}
ul.dropdown li {
float: right;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 598;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 599;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 100%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
Thanks in advance. I have this problem that the first level sub-menus don't stretch properly can anybody tell me where in the code to correct this thanks image: h ttp://img4.imageshack.us/i/77512707.png/ (can't post links so just join the h and t) css: Code: @charset "UTF-8";
/*------------------------------------------------------------------------------------------------------/
@section Style Framework */
/* First-level expected directory tag - li */
ul.dropdown li {
padding: 5px;
}
ul.dropdown *.dir {
padding-right: 20px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* Non-first level */
ul.dropdown ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul ul *.dir {
background-image: url(images/nav-arrow-right2.png);
}
/* Components override */
ul.dropdown-vertical *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
/*------------------------------------------------------------------------------------------------------/
@section Base Drop-Down Styling */
/* ALL LEVELS (incl. first) */
ul.dropdown {
font: 16px/normal Verdana, Arial, Sans-serif;
letter-spacing:-1.5px;
}
ul.dropdown li {
background-color: #333;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
}
/* Links */
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none;}
ul.dropdown a:hover {
border-top-color: #6a6969 !important;
border-left-color: #6a6969;
background-color: #6a6969;
color: #fff;
}
ul.dropdown ul a.dir:hover { /* proposal */
background-color: #6a6969;
background-image: url(images/comnav-arrowon.png);
color: #fff;
}
ul.dropdown a:active {
background: #6a6969 url(images/nav-sub-press.png) 0 0 repeat-x !important;
color: #fff;
font-family: "Myriad Pro";
}
/* NON-FIRST LEVEL */
ul.dropdown ul {
margin-top: -1px;
border-top: 1px solid #1a1a1a;
border-left: solid 1px #4c4c4c;
width: 100%;
font: bold 11px/1em Verdana, Geneva, Tahoma, sans-serif;
}
ul.dropdown ul li {
background-color: #3a3a3a;
}
ul.dropdown ul ul {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
border-top: none;
border-left: none;
font-weight: normal;
}
ul.dropdown ul ul li {
background-color: #4c4c4c;
}
ul.dropdown ul ul ul li {
background-color: #595959;
}
/* Mixed */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
/* Custom elements */
#n-movies { width: auto; text-align: center; }
#n-movies ul { right: auto; left: 0; width: auto; text-align: left; }
#n-movies ul ul { left: auto; width: auto; }
#n-movies ul a { width: auto; }
#n-movies ul a.dir { width: auto; }
#n-movies ul ul a { width: auto; }
#n-movies ul ul a.dir { width: auto; }
#n-movies ul ul ul { left: 100%; }
I have inserted a CSS driven navigational menu into a WordPress header.php and style.css and have been able to get it working for the most part. However, when you mouseover the menu, images are appearing when they shouldn't be. I suspect it might be some other CSS code conflicting with the menu, but I cannot seem to find it. Any help would be appreciated. Please contact me for the URL's as I it seems they cannot be posted here. Thanks. I have over 700 pages on my website. It has a left-side menu, which appears on all pages, and every time I change anything on the menu I have to manually update all 700 pages. Obviously, this is not efficient(!), but I haven't been able to figure out how to put code on each page that will pull up the menu, aligned correctly with respect to the rest of the page, so that I can just change one file for the menu each time. Surely there is a way to do this? I'm pretty tied to my site's current look and don't want to change it at this time, so solutions that would require a change in appearance won't work for me. All input/advice is much appreciated! Site: webnesia.com Hello, I'm looking for a CSS menu that works like the one liked to below, but without the Javascript. Can something similar be done with just HTML and CSS? dhtmlgoodies dot com /index.html?whichScript=slidedown_menu2 Can anybody help with a code to change the location of a dropdown menu to appear over the image on hover?? I have the code working perfect but can not get the location... <a href="(will be page in site)" class="menuanchorclass" rel="anylinkmenu4"> <img src="images/kids-button.gif" width="260" height="263" alt="Kids" style="border-width:0" /></a> If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers? Here's the code for the dropdown ul ul li a: Code: #dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat !important; margin: 10px 0px 0px 0px ; position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }
#dropmenu .menu ul ul li a:hover { color:#edc951; font-weight:normal; }
Thanks Hey, I have a drop down menu that when i view it in Internet Explorer is aligned fine but isnt working properly in firefox. I think the problem lies in the white spaces either side of the page. If the page fits the screen snug there isn't an alignment problem, this is better explained when viewing the site on different resolutions. I'm pretty sure the problem lies in the css but i don't know enough pinpoint it. I can't post the address on the forum because of the rules but its www northsidestageschool com (where spaces are dots). Sorry if this breaks rules but my problem really doesn't make any sense with out the link! Any ideas? Mike I can't get a drop down menu to display and don't know what I'm doing wrong. My guess is that other styles for this menu are interfering, but I've tried experimenting and it never works. Can anyone kindly assist? Here's the CSS for the part of my navigation menu I'm working on (I know this is not the most streamlined): Code: #nav2 {
float: right;
background-image: url(../2010site/graphics/nav2back.jpg);
background-repeat: no-repeat;
height: 32px;
font-size: 14px;
color: #ffffff;
text-decoration: none;
text-align: center;
margin: auto;
padding: 0px 30px 0px 0px;
}
#nav2 ul li {
display: inline;
list-style: none;
background-image:url(../2010site/graphics/rednavdetail.jpg);
background-repeat: no-repeat;
margin: auto;
padding: 0px 20px 0px 20px;
}
#nav2 a {
color: #ffffff;
margin: auto;
padding: 0px 0px 0px 0px;
}
#nav2 a:hover {
text-decoration: underline;
margin: auto;
padding: 0px 0px 0px 0px;
}
Then I'm trying to add a drop down to a nested list item within that navigation using Code: li ul {display: none;}
li:hover > ul {display: block;}
But whenever I add that at the end of the nav2 styles, I can only see my nested menu that is supposed to appear during the hover. The other menu items beyond the nested UL don't appear at all. Here's the html: Code: <ul>
<li><a href="http://">Schedule</a>
<ul>
<li><a href="http://">item one</a></li>
<li><a href="http://">item two</a></li>
<li><a href="http://">item three</a></li>
</ul>
</li>
<li><a href="http://">Programs</a></li>
<li><a href="http://">Events</a></li>
<li><a href="http://">Donate</a></li>
</ul>
Built a dropdown menu (which I use on all my websites fine) and for some reason it's not working at all in IE (Using 8.0.7600), I've literally no idea why. Here's the CSS for the navigation: Code:
#subnav {
display: block;
margin: 25px 0 0 0;
padding:0 0 0 0;
width: 196px;
}
#subnav ul {
width: 196px;
margin: 0;
padding: 0;
list-style: none;
font: 11px "Verdana", "Arial", "Helvetica", "sans-serif";
}
#subnav ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#subnav ul li {
float: left;
width: 196px;
display: block;
height: auto;
margin: 0;
padding: 0;
font-weight: bold;
}
#subnav ul li a {
color: #017490;
display: block;
width: 100%;
height: auto;
padding: 10px 0 10px 23px;
text-decoration: none;
text-shadow: 0px 1px 1px #fff;
}
#subnav ul li li {
padding: 0;
margin: 0px 0 0 0;
}
#subnav ul li li a {
padding: 10px 0 10px 5px;
line-height: normal;
text-shadow: 0px 1px 1px #000;
}
#subnav ul a.first-level {
background: #047691 url(../images/arrow.gif) top right no-repeat;
}
#subnav ul a.sub-level {
background: #047691 url(../images/arrow.gif) 200px 6px no-repeat;
}
#subnav ul li a:hover, #subnav ul li a:active, #subnav ul li:hover a, #subnav ul li.sfhover a {
/*color: #c7bb98;*/
text-decoration: none;
background: url(../images/nav-bg-over.jpg) 0 2px no-repeat;
}
#subnav ul ul li:hover, #subnav ul ul li.sfhover {
color: #FFF;
}
#subnav ul li li:hover a, #subnav ul li li.sfhover a, #subnav ul li li:hover li:hover a, #subnav ul li li.sfhover li.sfhover a, #subnav ul li li:hover li:hover li:hover a, #subnav ul li li.sfhover li.sfhover li.sfhover a {
color: #FFF
}
/* This line cancels the highlight effect for all sub-level buttons */
body.nav-1 #subnav ul li#subnav ul-1 li a, body.nav-1 #subnav ul li#subnav ul-1 li li a, #subnav ul li li a, #subnav ul li li li a {
background-image: none
}
body.nav-1 #subnav ul li#subnav ul-1 a, body.nav-2 #subnav ul li#subnav ul-2 a {
color: #048451;
}
#subnav ul li ul { /* second-level lists */
position : absolute;
left: -999em;
z-index: 9999;
margin-left : 215px;
margin-top : -32px;
padding: 5px 5px 5px 0px;
background-color:#047691;
text-transform: none!important;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-box-shadow: 0px 2px 2px #033f4d;
-webkit-box-shadow: 0px 2px 2px #033f4d;
box-shadow: 0px 2px 2px #033f4d;
}
#subnav ul li ul ul { /* third-and-above-level lists */
left: -999em;
}
/* Normal color */
#subnav ul li li a:link, #subnav ul li li a:visited, #subnav ul li:hover li a, #subnav ul li.sfhover li a, #subnav ul ul li.sfhover li a,
#subnav ul li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li a,
#subnav ul li:hover li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li.sfhover li a {
color : #FFF;
background: #047691;
}
/* Hover color */
#subnav ul li li a:hover, #subnav ul li li a:active,
#subnav ul ul li:hover a, #subnav ul ul li:hover li:hover a,
#subnav ul li.sfhover li.sfhover a, #subnav ul li.sfhover li.sfhover li.sfhover a, #subnav ul li.sfhover li a:hover,
#subnav ul li.sfhover li li a:hover, #subnav ul li.sfhover li.sfhover li.sfhover li.sfhover a:hover,
#subnav ul li:hover li:hover a, #subnav ul li:hover li:hover li:hover a, #subnav ul li:hover li a:hover,
#subnav ul li:hover li li a:hover, #subnav ul li:hover li:hover li:hover li:hover a:hover
{
color : #FFF;
background-color: #045669}
#subnav ul li:hover ul ul, #subnav ul li:hover ul ul ul, #subnav ul li.sfhover ul ul, #subnav ul li.sfhover ul ul ul {
left: -999em;
}
#subnav ul li:hover ul, #subnav ul li li:hover ul, #subnav ul li li li:hover ul, #subnav ul li.sfhover ul, #subnav ul li li.sfhover ul, #subnav ul li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
The live site is demo2 . abcguide .com (Sorry if I'm not supposed to link that.. I'll take it down.. ?) Im struggling here trying to replace this code. any help would be appreciated. Now To go into details I have a magento template. Im trying to replace the default navigation text menu to a css sprite top image menu. the default navigation text menu css code is stated below Quote: /********** < Navigation */ .nav-container {} #nav {padding:0; margin:0; font-size:11px; border-bottom:1px solid #000; } /* All Levels */ #nav li { text-align:left; position:relative; border-right:1px solid #000;} #nav li a, #nav li a span{background:url(../images/menu_bg.gif) left top repeat-x #141314;} #nav li.first{background:url(../images/menu_corner_left.png) left top no-repeat; padding-left:5px;} #nav li.first a span{padding-left:42px;} #nav li.over.first, #nav li.active.first{background:url(../images/menu_corner_left_active.png) left top no-repeat;} #nav li.last a{background:url(../images/menu_corner_right.png) right top no-repeat; padding-right:5px;} #nav li.last a span{padding-right:38px; padding-left:45px;} #nav li.over.last a, #nav li.active.last a{background:url(../images/menu_corner_right_active.png) right top no-repeat;} #nav li.over a span, #nav li.active a span{background:url(../images/menu_bg_active.gif) left top repeat-x #1E1F1F; padding-bottom:16px;} #nav li.over, #nav li.active{border-bottom:1px solid #2C2B2C;} #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; padding:20px 43px 17px 47px; text-transform:uppercase; white-space:nowrap; cursorointer; } #nav li ul a span { white-space:normal; } /* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:0; color:#FFF; } #nav li a:hover { color:#FFF; } #nav li.over a, #nav li.active a { color:#FFF; } /* 2nd Level */ #nav ul { position:absolute; width:17em; top:50px; left:-10000px; border:1px solid #202020; border-bottom:0; background:#070707; font-size:9px; } #nav ul li { float:none; border-bottom:1px solid #202020!important; background:0; } #nav ul li.last { border-bottom:0; } #nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#888 !important; background:0!important; } #nav ul li a:hover { color:#FFF !important; } #nav ul li a span{padding:3px 5px!important; background:0!important;} #nav ul li.active > a, #nav ul li.over > a { color:#FFF !important; } /* 3rd+ leven */ #nav ul ul { top:7px; } /* Show Menu */ #nav li.over > ul { left:0; } #nav li.over > ul li.over > ul { left:100px; } #nav li.over ul ul { left:-10000px; } /********** Navigation > */ Ok now after viewing the code above i was wondering how can i add the css sprite image code that i made to replace the default navigation text menu. Below is the css code i made for the sprite images. Quote: #navigation { margin: 0; padding: 0; width: 969px; height: 53px; Background-image: url(lastone.gif) ; } #navigation li { margin: 0; padding: 0; list-style-type: none; display: inline; height:53px; text-align: center; float:left; line-height:53px; } #navigation a { display:block; height:52px; } #navigation a:hover { background-image: url(lastone.gif) ; } #nav-home { width:161px; } #nav-home a:hover { background-position:bottom 0; } #nav-Service { width:161px; } #nav-Service a:hover { background-position:bottom -162px; } #nav-Quicklinkz { width:161px; } #nav-Quicklinkz a:hover { background-position:bottom -323px; } #nav-Advertise { width:161px; } #nav-Advertise a:hover { background-position:bottom -484px; } #nav-Contact { width:161px; } #nav-Contact a:hover { background-position:bottom -645px; } #nav-About { width:161px; } #nav-About a:hover { background-position:bottom -806px; } #navigation span { display: none; } AS you can see below i also have inserted the HTML that correspond to the css sprite image menu code. I link the css code into the html. so my final 2 questions is. can anyone replace the css code i made in the default css code. and after thats done which root do i upload the html code to. Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Navigation Menu</title> <link rel="stylesheet" type="text/css" href="menu.css"/> </head> <body> <ul id="navigation"> <li id="nav-home"><a href="#"><span>Home</span></a></li> <li id="nav-Service"><a href="#"><span>Service</span></a></li> <li id="nav-Quicklinkz"><a href="#"><span>Quicklinkz</span></a></li> <li id="nav-Advertise"><a href="#"><span>Advertise</span></a></li> <li id="nav-Contact"><a href="#"><span>Contact</span></a></li> <li id="nav-About"><a href="#"><span>About</span></a></li> </ul> </body> </html> I've messed with this for a couple days now. I can't seem to get it to do what I need it to. Any help would be much appreciated I need to add a 3rd column to the menu My code between the body and /body tags I marked the place I need the 3rd column with: *** ( Need to add a 3rd column for the filters ) *** Code: <ul id="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Maps</a> </li> <li><a href="history.php">History</a> </li> <li><a href="#">Contractors We Recommend</a> </li> <li><a href="#">Products We Recommend</a> <ul> <li><a href="#">Pool Accessories</a> <ul> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> </ul> </li> <li><a href="#">Pool Chemicals</a> <ul> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> </ul> </li> <li><a href="#">Pool Filters</a> <ul> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> </ul> </li> *** ( Need to add a 3rd column for the filters ) *** <li><a href="#">Pool Heaters</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <li><a href="#">Pool Motors</a> <ul> <li><a href="#">Pool Motors</a></li> </ul> </li> <li><a href="#">Pool Sweeps</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <div id="content"> </div> Thanks for any help! Hi, I am struggling to find a solution for a drop down menu over a week in this site: http://tinyurl.com/47apbad In firefox it looks good but not in IE6 and IE7, can someone help me to find a solution? Code: /* -- top menu --*/
#main-menu {
width:980px;
padding-top: 15px;
padding-bottom: 10px;
}
#main-menu ul {
list-style:none;
padding:0px;
margin-left:15px;
font-size:15px;
margin-bottom:0px;
text-transform:uppercase;
}
#main-menu ul.sf-menu li {
float:left;
*width:80px;
margin-left: 5px;
}
#main-menu ul.sf-menu li:hover {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
}
#main-menu ul.sf-menu li a{
padding:5px 10px 0 10px;
*padding:5px 8px 0 8px;
color:#fff;
height: 31px;
}
#main-menu ul.sf-menu li.current_page_item a {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
padding-right: 10px;
padding-left: 10px;
font-weight:bold;
margin-bottom:-5px;
float:left;
/*width: 80px;*/
}
#main-menu ul.sf-menu li.current_page_item a:hover {
margin-top:0px;
}
#main-menu ul.sf-menu li.current_page_ancestor a {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
padding-right:10px;
padding-left:10px;
font-weight:bold;
margin-bottom:-5px;
}
#main-menu ul.sf-menu li ul {
background:url(images/topnav_bg.gif);
padding:0px 15px;
margin:0px;
margin-top:-7px;
-moz-border-radius: 0 0 8px 8px;
}
#main-menu ul.sf-menu li li ul.children {
margin:0 0px 0 45px;
background:url(images/topnav_bg.gif);
}
#main-menu ul.sf-menu li.current_page_ancestor li a {
background-image:none;
color:#fff;
padding-left:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:0px;
font-weight:normal;
}
#main-menu ul.sf-menu li.current_page_ancestor li:hover a {
margin-bottom:1px;
}
#main-menu ul.sf-menu li.current_page_item li a {
background-image:none;
color:#fff;
padding-left:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:0px;
font-weight:normal;
}
#main-menu ul.sf-menu li li a {
padding:0px 0px;
padding-top:10px;
padding-bottom:10px;
margin:0px;
height:auto;
background:none;
}
#main-menu ul.sf-menu li li:hover {
background:none;
padding:0px;
margin:0px;
padding-bottom:4px;width:240px;
}
#main-menu ul.sf-menu li li a:hover {
color:#a6b4bc;
background:none;
padding:0px;
padding-top:10px;
padding-bottom:12px;
}
#main-menu ul.sf-menu li li {
padding:0px;
margin:0px;
background:none;
}
On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code: Code: .homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}
.homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}
.homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}
.homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}
.homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}
Thank you Hi, Ive been asked to create a webpage for a website, the page must be 99% identical to the current website but the problem is I had to build the new page from scratch because a problem with joomla. While creating the page I ran into a big problem aligning the menu bar. Right now the menu bar lines up exactly how it should on my desktop, but on my laptop which has a much larger screen the menu bar is slide way over to the left. here's the website Im making a copy for http://www.curacao.vatcar.org/home/ and here's the page I've made so far http://brandynstestserver.zymichost.com/flight/downloads.html I know it still needs alot of tweaking but I just want to solve the menu problem Heres the HTML, please ignore the comments those are just for the current webmaster (who doesn't know much) until they find another one. Also I just noticed a now unneeded <div id="banner"> tag ignore that too. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Curacao FIR Downloads</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<script type="text/javascript">
var timeout = 50;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
</script>
<body>
<div id="page-background"><img src="images/bg.JPG" width="100%" height="100%" alt="Smile"></div>
<div id="content"><div id="banner"><center><img src="images/banner.png"/></center></div>
<ul id="sddm">
<li><a href="http://www.curacao.vatcar.org" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Home</center></a>
</li>
<li><a href="http://www.vatcar.org/website/index.php?option=com_content&view=article&id=5&Itemid=40" onmouseover="mopen('m2')" onmouseout="mclosetime()"><center>Roster</center></a>
</li>
<li><a href="http://www.vatcar.org/forum/index.php?board=6.0&Itemid=54" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Forum</center></a>
</li>
<li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_jobline&Itemid=61" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Career Opportunities</center></a>
</li>
<li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_content&view=article&id=56&Itemid=66" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Contact Us</center></a>
</li>
<img src="images/menuspacer.jpg" /></ul>
<table width="982" border="0" cellspacing="0" cellpadding="0" background="images/body.jpg" align="center">
<tr>
<td> </td>
<td><h2>Downloads</h2></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<!--Downloads will go under this comment, dont edit anything above this-->
<h2><center>Charts</center></h2><!-- this little piece of code it just a centered heading, hence the <h2> and <center> tags around the words you want to be the heading-->
<!-- use this format to add downloads, type <a href="LINK TO DOWNLOAD HERE">Name of the download</a> and thats it. That code will display text saying what ever you typed in the "Name of the donwload" section and when you click on the words it will download the file that is located in the "LINK TO DOWNLOAD HERE" section. Heres a few working downloads below for you go go off of-->
<center><a href="downloads/charts/TNCA/TNCACharts.zip">TNCA Charts package</a><br /> <!-- The <br /> is just a line break-->
<a href="downloads/charts/TNCB/TNCBCharts.zip">TNCC Charts package</a><br />
<a href="downloads/charts/TNCC/TNCCCharts.zip">TNCB Charts package</a><br /></center>
<h2><center>ATC</center></h2>
<center><a href="downloads/ATC/Training Files.zip">Training package</a><br />
<a href="downloads/ATC/TNCF Control.zip">TNCF Control package</a><br /></center>
<!-- Dont edit anything below this comment-->
</td>
<td> </td>
</tr>
<tr>
<td colspan="3"><img src="images/bottom.jpg"/></td>
</tr>
</table>
</div>
</body>
</html>
Heres the CSS Code:
@charset "utf-8";
/* CSS Document */
html, body {height:100%; margin:0; padding:0; font-family: Arial, sans-serif, Verdana, Helvetica; }
#page-background {position: fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#sddm
{ margin:0 0 0px .6em;
padding: 0;
z-index: 30
}
#sddm li
{ margin:0 auto;
padding: 0;
text-align: left;
list-style:none;
float: left;
font: bold 15px sans-serif}
#sddm li a
{
display:block;
margin-left: auto;
margin-right: auto;
padding: 8px 5px;
background: url(images/mainmenu.jpg) repeat-x left top;
color: #FFF;
text-decoration: none
}
#sddm li a:hover
{
background: #000;
width:auto;
font-size: 15px;
}
Thank you in advance for the help! Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css). Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script: http://javascript-array.com/scripts...drop_down_menu/ And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code: Code:
<html>
<head>
<style>
<!--
#sddm a
{ display: block;
}
#sddm span
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #3D97D6;
border: 1px solid #5970B2}
#sddm span a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #3D97D6;
color: #FFF;
font: 11px arial}
#sddm span a:hover
{ background: #2875DE;
color: #FFF}
-->
</style>
<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
</head>
<body>
<span id="sddm">
<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
<a href="#">Add as Friend</a>
<a href="#">Send message</a>
<a href="#">View Profile</a>
<a href="#">Report</a>
</span>
</span>
this text comes after the username
</body>
</html>
So i hope its clear what i wanna do, i always find it hard to explain things Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. |