|
CSS - Horizontal Menu Problem!
Hi people.
In need of some help with this horizontal navigation. IE7 positions everything correctly, but when testing in firefox, chrome and safari the issues then arise. Got two images of the working styled in IE7 which is the way I was planning on having it and then the non working menu in other browsers... Live example: please click here for live example Code Code:
/* Start Menu */
#topmenu {
height: 32px;
margin-bottom:20px;
background: #FFFFFF url(menu_bg.png) repeat-x top;
width: 100%;
overflow: hidden;
float: left;
}
#topmenu li {
border-left: 1px solid #dedbd1;
float: left;
line-height: 32px;
}
#topmenu li a {
color: #333333;
display: block;
margin: 0 1px 0 0;
padding: 0 15px;
}
#topmenu li a:hover, #topmenu li.active a {
color: #425775;
text-decoration: none;
}
#nav, #nav ul {
padding: 0;
float:left;
list-style: none;
}
#nav {
padding: 0;
}
#nav a {
display: block;
}
#nav li {
float: left;
line-height:32px;
}
#nav li a:hover {
background: none;
background: #FFFFFF url(menu_bgmo.png) repeat-x top;
}
#nav li ul {
position: absolute;
width: 100%;
left: -999em;
padding-top:1px;
overflow: hidden;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
z-index:1000;
}
#nav li ul li {
border-bottom:1px solid #dedbd1;
border-left:1px solid #dedbd1;
border-right:1px solid #dedbd1;
line-height:32px;
width: 100%;
overflow: hidden;
}
#nav li:hover, #nav li.hover {
position: static;
}
#nav li ul ul {
margin: -29px 0 0 100%;
overflow: hidden;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
left: auto;
overflow: hidden;
}
/* Finish Menu */
Any help would be great. Thanks very much in advance! terra Similar TutorialsHi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com Im a little new to css so dont be to hard on me here is the code that I have based my menu on, http://www*dynamicdrive*com/style/csslibrary/item/suckertree-menu-horizontal . What I changed was the ".suckertreemenu ul li a" style width to auto instead of 90px. I need the style to auto so that the width of each button is proportionate to the text in the button. My problem is that in IE6 each button stretches across the entire area. Does anyone have a hack for this? Any help is greatly appreciated. Thanks I am having a problem with a CSS Menu in which the sub menu items are disappearing before I am able to get my mouse over them. I have tried adjusting the padding for the nav items but it did not have any effect but to shift all of the menu elements. Here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<!--<script src="javascript/javascript.js" type="text/javascript" language="javascript"></script>-->
<title>ACS Web Group - Administration Interface</title>
</head>
<body>
<div id="pageContainer">
<div id="header">
<div id="headerLeft">
<img src="images/acs_header.jpg" width="332" height="55" hspace="0" vspace="0" />
</div>
<div id="headerRight">
<a href="#"><img src="images/header_logout.jpg" width="60" height="55" hspace="0" vspace="0" border="0" /></a>
</div>
</div>
<div id="menu">
<ul id="navbar">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1 - Sub 1</a></li>
<li><a href="#">Menu 1 - Sub 2</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2 - Sub 1</a></li>
<li><a href="#">Menu 2 - Sub 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3 - Sub 1</a></li>
<li><a href="#">Menu 3 - Sub 2</a></li>
</ul>
</li>
</ul>
</div>
<div id="body">
<div id="menuShade">
</div>
</div>
<div id="footer" align="center">
<a href="http://www.ACSWebGroup.com">www.ACSWebGroup.com</a> 905-827-7882
</div>
</div>
</body>
</html>
Here is the menu.css: Code: /* CSS Document */
#navbar {
margin: 0px;
padding: 0px;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #fff;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0px;
padding: 0px; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
/*background-color: #fff;*/
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #fff; }
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0px;
padding: 0px; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
/*background-color: #fff;*/
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
color: #000; }
and here is the css.css: Code: /* CSS Document */
html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
body{
margin:0px;
padding:0px;
height:100%;
}
#pageContainer{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#header{
background-image:url(../images/header_background.jpg);
background-repeat:repeat-x;
height:55px;
margin:0px;
padding:0px;
padding-right:25px;
}
#headerLeft{
float:left;
margin:0px;
padding:0px;
}
#headerRight{
float:right;
margin:0px;
padding:0px;
}
#menu{
background-image:url(../images/menu_background.jpg);
background-repeat:repeat-x;
height:20px;
margin:0px;
padding:0px;
vertical-align:top;
overflow:hidden;
z-index:250;
}
#menuShade{
background-image:url(../images/menu_shading.png);
background-repeat:repeat-x;
position:relative;
top:0px;
left:0px;
height:9px;
margin:0px;
padding:0px;
}
#body{
overflow:auto;
margin:0px;
padding:0px;
height:100%;
width:100%;
position:absolute;
top:75px;
z-index:100;
}
#footer{
background-image:url(../images/footer_background.jpg);
background-repeat:repeat-x;
background-color:#003;
position:relative;
bottom:93px;
left:0px;
height:18px;
margin:0px;
padding:0px;
font-size:10px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#BFC0AD;
padding-top:2px;
}
Any help would be greatly appreciated. Thanks, LiquidBuRn Heya! I am really new to html - creating my first website for uni course now. My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one. The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome. this is the html: <div id="ourproject"> <ul> <li>OUR<br> PROJECT <ul> <li><a href="index.html">Project Overview</a></li> <li><a href="Introduction.html">Introduction</a></li> <li><a href="participants.html">Participants</a></li> </ul> </li> </ul> </div> and my css: #ourproject ul { position:relative; color: #FFF; text-decoration: none; width: 102px; top:0px; left:0px; height:86px; list-style:none; float:left; padding-left:20px; border-left-width: 3px; border-left-style: solid; border-left-color: #FFF; } #ourproject ul:hover { color:#FF9900; border-left-color: #F90; padding-left:20px; } #ourproject ul ul { position:relative; visibility:hidden; z-index:2000; background-color:#0E1221; font-size: 12px; width: 602px; display: inline-block; height: 45px; float: left; top:25px; left:-23px; } #ourproject ul li { display: inline-block; margin-right:30px; height: 25px; float: left; margin-top:4px; width: 125px; } #ourproject ul:hover ul { visibility:visible; } #ourproject ul ul li{ width:80px; padding: 0; text-align:left; } In IE9 compatibility view, the menu is distorted. I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts. I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed. I hope to get some answer soon! Please ask any more question if you need to- i will be happy to answer. Thanks in advance. Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input 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! 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 */
what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ 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? I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages. When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below. Ideas anyone? Code: Code: Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> Jake Hi I am haveing some trouble implimenting a sub menu on some of my pages. I want to have a menu that mirrors the titles rounded edges by placing a graphic at either end of the menu with the text set in the centre. So far i can produce the title no problem but the menu is proving a little more tricky. Example page with the issues My css: Code:
#services-menu ul{
margin :0;
white-space :nowrap;
color: #FFFFFF;
line-height: 30px;
height: 30px;
padding: 0px;
background-image: url(/graphics/service_menu_back.gif);
background-repeat: repeat-x;
}
#services-menu ul li{
display : inline;
}
#services-menu ul li a{
color:#FFFFFF;
text-decoration:none;
margin: 0px;
padding-left: 4px;
}
#services-menu ul li.services_menu_right {
background-image: url(/graphics/services_menu_right.gif);
background-repeat: no-repeat;
background-position: right top;
height: 30px;
float: right;
width: 10px;
}
#services-menu ul li.services_menu_left {
background-image: url(/graphics/service_menu_left.gif);
background-repeat: no-repeat;
background-position: left top;
height: 30px;
float: left;
width: 10px;
}
My HTML is: Code: <div id="services-menu">
<ul>
<li class="services_menu_left"></li>
<li><a href="/index.html">Assets</a></li>
<li><a href="/pages/company.html" target="_self">Risk</a></li>
<li><a href="/pages/services.html" target="_self">Surveillance</a></li>
<li><a href="/pages/humanitarian.html">Counter Terrorism</a></li>
<li><a href="/pages/forms/procure.php" target="_self">Close Protection</a></li>
<li><a href="/pages/forms/recruit.php" target="_self">Contingencey</a></li>
<li><a href="/pages/forms/contact.php" target="_self">Training</a></li>
<li class="services_menu_right"></li>
</ul>
</div>
Ps - i have tried producing the menu in the same way as i have made the title but the right hand graphic continues to drop down a line. ANY IDEAS - I'M REALLY STUCK NOW!!!! Hi, I have a horizontal menu, now what I would like to know how to do, is that once one of the element has focus, I would have another row underneath it that would have my links link1 | link2 | link3, etc... here is my menu bar, any info, or ideas would be great <html> <head> <style type="text/css"> .navh LI { DISPLAY: inline; LIST-STYLE-TYPE: none } .navh UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; WHITE-SPACE: nowrap } .navh A { border:1px solid #333333; PADDING-RIGHT: 8px; PADDING-LEFT: 24px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BACKGROUND-COLOR: #999999 } .navh A:link { COLOR: #eeeeee; TEXT-DECORATION: none } .navh A:visited { COLOR: #eeeeee; TEXT-DECORATION: none } .navh A:hover { border:1px solid #333333; COLOR: #333333; BACKGROUND-COLOR: #ff6600 } </style> </head> <body> <div class="navh"> <ul> <li><a href="#" >Item 1</a></li> <li><a href="#" >Item 2</a></li> <li><a href="#" >Item 3</a></li> </ul> </div> </body> </html> It's been a long while since I did anything using HTML or CSS so I might be prone to silly mistakes. A site I'm working on is giving me unusual results. The second HR is being forced to the right of the horizontal menu. No other element in it's place does the same thing. Placing another element before it makes the HR positions correctly. index.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>Faithful 32x32</title> <meta http-equiv="Content-Type" content="text/html;charset=uft-8" /> <link rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> <link rel="stylesheet" type="text/css" href="css/main.css" media="all" /> <link rel="shortcut icon" href="images/favicon.png" /> </head> <body> <div id="container"> <img src="images/logo.png" class="centered" alt="Faithful 32x32 logo"/> <h2>A double resolution texture pack that stays faithful to the original <a href="http://www.minecraft.net">Minecraft</a> textures.</h2> <hr /> <div id="centeredmenu"> <ul> <li><a href="#">Main</a></li> <li><a href="#">Download</a></li> <li><a href="#">Mod Packs</a></li> <li><a href="#">Support Us</a></li> <li><a href="#">Credits</a></li> </ul> </div> <hr /> </div> </body> </html> main.css Code:
/* basic elements *********************************************************************************************/
html {
height: 100%;
}
body {
height: 100%;
background-color:#8ca5ff;
background-image:url('/images/darkstone.png');
font: 0.85em Cambria, Georgia, sans-serif;
color:#333;
}
img.centered {
display:block;
margin:0 auto;
padding-top:30px;
}
h2 {
text-align:center;
margin-top: -20px;
font-size: 1.2em;
}
hr {
height:1px;
border-width:0;
color:#175287;
background-color:#175287;
width:638px;
margin:10px auto;
}
a {
color:#3072b3;
text-decoration:underline;
}
a:active,
a:focus {
outline:dotted;
outline-width:1px;
}
/* specific divs *********************************************************************************************/
#container {
background: url('/images/bg.png');
margin:0 auto;
width:800px;
min-height:100%;
}
/* top menu *********************************************************************************************/
#centeredmenu {
clear:both;
float:left;
width:100%;
position:relative;
}
#centeredmenu ul {
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
float:left;
position:relative;
left:50%;
}
#centeredmenu ul li a {
display:block;
padding:0 .4em;
font-size:1.5em;
}
reset.css Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Both the HTML and CSS validates. I'd post a link to the site but it's against the rules. Hopefully we can figure this out. Cheers. |
|||||||