|
CSS - Css Rendering Horizontal Menu Vertically In All Browsers
Similar TutorialsEDIT: no longer required All the text is at the top of the menus, how do i get them so they are in the center of the divs ? Code:
#navbar2 { float:right; position:relative; }
ul.menu2 { list-style-type:none; margin:0; padding:0; }
#navbar2 .leaf2 { width:70px; height:35px; float: left; display: inline; list-style-type:none; display:inline; text-align:center; color:#F7941D; font-weight:bold; font-size:12px; background-color:#2E2E2E; margin-left:8px; border-top-left-radius: 5px; border-top-right-radius: 5px; opacity:0.85; filter:alpha(opacity=85); }
#navbar2 li:hover, #navbar2 li.active { opacity:1; filter:none; }
#navbar2 li a { width:70px; height:35px; display:block; padding-top:3px; }
.leaf2 a { width:70px; }
Code:
<div id="navbar2">
<ul class="menu2">
<li class="leaf2<? if ($activePage=="home") {?> active<? } ?>"><a href="." title="Home">home</a></li>
<li class="leaf2<? if ($activePage=="item2") {?> active<? } ?>"><a href="2.php" title="2">item<br>2</a></li>
<li class="leaf2<? if ($activePage=="item3") {?> active<? } ?>"><a href="3.php" title="3">item<br>3</a></li>
<li class="leaf2<? if ($activePage=="item4") {?> active<? } ?>"><a href="4.php" title="4">item4</a></li>
<li class="leaf2<? if ($activePage=="item5") {?> active<? } ?>"><a href="5.php" title="5">item5</a></li>
</ul>
</div>
I have a div which displays horizontally and contains 4 pictures which when clicked on change a picture on a main div to the left of it. When I view the page on safari or firefox however this div displays vertically down the side of the larger div. Any ideas as to why and how to fix it? I have tried setting margins to zero and allowing scroll for overflow content to no avail. Thanks! Hi all, I'm trying to get this mock up's structure finished STAT so that I can move on to the graphical, stylistic, and textual elements that need to be done, but I'm running into issues with IE... (surprised?) The goal is to get it to render as it does in FF and Safari. The issue right now is that, while the #body div is where I want it, it is not accepting the 85px bottom margin I am trying to code. Any help? (keep in mind I had to throw it in quirks mode to get it all to render like this) SITE is at: w w w [DOT] w h o l l y l i f e [DOT] o r g [SLASH] d r u m 2 [SLASH] Thanks, Michael I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page: http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE. As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box. Here's my <hr> definition in the css: hr { border: 0; color: #D5D5D5; background-color: #D5D5D5; height: 1px; text-align: left; padding: 0px; margin: 0px; } Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks! 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 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 */
hi guys, i've modified a script that i found on the web that creates a CSS dropdown menu (without using any javascript whatsoever). The menu's work flawlessly in Google Chrome, Firefox and IE 7/8. However, IE 6 like usual is giving me a problem. However, it is only a minor problem but i cant seem to fix it. Please find attached a copy of my HTML and CSS code. Please note:- The css code in the test.txt file is used for styling in all browsers. The css code found in the test_dropdown_ie.txt file is for IE 6 only. If you create these files and open test.html in IE 6 then it will appear fine at first. But if you hover over one of the menu's in the middle, then you will notice that the left hand border of the resultant dropdown menu does not display. However, it does display when you hover over one of the options on the resultant dropdown menu. I need the left hand side border to appear at all times. I did manage to get it working by changing the following CSS rule:- Code:
.menu ul li a:hover ul
{
left: -1px;
}
I changed this to:- Code:
.menu ul li a:hover ul
{
left: 0;
}
This solved the disppearing left hand side border issue but it threw up an even worse issue. If you make this fix and hover over the first or last menu item, you will notice the border of the dropdown menu does not line up with the top menu. I do not like this and find it less acceptable than the initial problem. What i need to do is find a way of lining up the top menu's border with the resultant dropdown menu's border and stop the disappearing left hand side border issue. Any help would be greatly appreciated. Thanks. Hello. This is probably not good practice but I have two problems arising with the same piece of code. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
background: #cfcf00;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
padding-bottom: 2em;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #303030; } /* end body */
#logo_search {
width: 100%;
min-width: 957px;
max-height: 79px;
padding: 32px 0 0 0;
border: 0;
margin: auto;
overflow: hide;
background: #ffffff; } /* end #logo_search */
#logo_container {
width: 40%;
float: left;
background: #ffffff;
text-align: right;
border: 0;
border-bottom: 1px solid #ffffff;
height: 51px;
padding: 0;
margin: auto; } /* end #logo_container */
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #c0c0c0; } /* end #base */
#main_block {
background: #ff0000;
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content {
background: #ffffff;
border-left: 1px solid #ff0000;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #ff0000; } /* end #main_content */
#top_main_content ul {
float: left;
list-style-type: none;
border-spacing: 0;
padding: 0;
text-align: right;
border-top: 1px solid #00ff00;
height: 243px;
width: 266px; } /* end #top_main_content #links_table */
#top_main_content ul li {
vertical-align: middle;
color: #0000ff;
border-bottom: 1px solid #00ff00; } /* end #top_main_content #links_table td */
#top_main_content ul li a {
line-height: 26px;
padding-right: 1em;
display: block;
color: #0000ff;
width: 259px; } /* end #top_main_content ul li a */
#top_main_content ul li a:hover {
background: #cfcf00;
color: #000000; } /* end #top_main_content ul li a:hover */
#top_main_content img {
border-bottom: 1px solid #00ff00;
border-top: 1px solid #00ff00;
margin-top: 12px;
text-align: right;
vertical-align: top; } /* end #top_main_content img */
</style>
</head>
<body>
<div id="logo_search">
<div id="logo_container">
</div>
</div>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
<img src="#" alt="" id="main_graphic" height="243" width="687"/>
</div>
</div>
</div>
</div>
</body>
</html>
Problem 1 (Opera rendering): Opera (and only Opera from what I've noticed) is extended the border for the menu options into the side border. How can I eliminate this behavior? I added a margin-left: 1px to the menu and that will render it correctly in Opera but have an extra 1px of whitespace everywhere else. Problem 2: I'm trying to position this menu such that it lines up exactly with an image 243px high. One question I have is that if I add a 1px top and bottom border to an image that is 243px high, would that object still be 243px high or now 245px high? Also, I want to indent the menu options slightly so that they aren't exactly next to the image but I still need the entire bar to serve as a link. What would be the best approach to line up these objects. I can sort of do it with margin-top but I'm sure that's not the best way to go. Edited to add: Problem 3: The menu does not align with the left edge of the main section in IE and only IE. What can I do to fix this? 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? 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? 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 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);
}
--- 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? |
|||||||