|
CSS - Basic Question About Navagation Menus Using Css And Javascript
I need the following with this simple example
1) Horizontal Tabs: the <dt> appears along the top in one horizontal line, and when you click on the name, it'll display the <dd> content below. As you click on other tabs, the content area will be replaced by the corresponding tab content. If you click on a tab that's already opened, it'll close the display of its content. 2) Vertial Tabs: the <dt> appears long the left side of the page, each tab taking up one line. When you click on the name, the <dd> content will display to the right of the tabs. Same as above, as you click on other tabs, the content area will be replaced by the corresponding tab content. [php] <dl> <dt>Tab 1</dt> <dd>Content 1<br>Content 1<br>Content 1<br></dd> <dt>Tab 2</dt> <dd>Content 2<br>Content 2<br>Content 2<br></dd> </dl> [/php hope someone can help Similar TutorialsHi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? I have a CSS call for all p, like this p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; } now I want headings to be ital, so I add p.ital { font-style: italic; } and set the class for some p to ital, and they inherit font family and font size. Now I want further inherit, italBold p.italBold { font-weight: bold; } That is, I want p.italBold to inherit from p.ital, which inherits from p. How can I do this? Thanks for your help CJB I am new to this stuff started php about a month ago now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page also in FF the nav menu is fine just not in the right location in IE the bottom half of the nav menu sticks out one inch past the top half here is my css PHP Code: #divNav { background: transparent url(../images/bk-nav.jpg) no-repeat top left; margin: 0; padding: 0; height: 80px; width: 800px; } #nav { position: relative; top: 55px; height: 80px; width: 800px; } #nav li ul, #nav li ul { margin: 0; padding: 0; } #nav a { text-decoration: none; } #nav li { /*float the main list items*/ margin: 0; float: left; display: block; padding-right: 15px; } #nav li ul { display: none; } #nav li.off ul, #nav li.on ul { /*put the subnav below*/ position: absolute; top: 25px; left: 0; padding-top: 15px; background: #224d6f; height: 28px; width: 740px; padding-left: 60px; } #nav li.on ul { background: #f90; } #nav li.on:hover ul, #nav li.over ul { /*for ie*/ background: #224d6f; } #nav li a { color: #224d6f; font-weight: bold; display: block; width: 93px; padding: 0; } #nav li.on a { color: #f90; } #nav li.on ul a, #nav li.off ul a { border: 0; float: left; /*ie doesn't inherit the float*/ color: #f90; width: auto; margin-right: 15px; } #nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/ background: #224d6f; } #nav li.on ul { display: block; } #nav li.off:hover ul, #nav li.over ul { display: block; z-index: 6000; } #nav li.off a:hover, #nav li.on a:hover { color: #f90; } /*do the image replacement*/ #nav li span { position: absolute; left: -9384px; } #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a { display: block; position: relative; height: 26px; background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/ } /*first, put the initial states in place*/ #liRenaissance a { background-position: 0 0; } #liArtNouveau a { background-position: -102px 0; } #liModern a { background-position: -204px 0; } #liPostModern a { background-position: -306px 0; } #liDigital a { background-position: -408px 0; } /*active area - for this demo - the code could be based on a body class, and probably work better.*/ #liModern.on a { background-position: -204px -37px; } /*add selectors for the other li's and background-positions*/ /*hover states*/ #liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a { background-position: 0 -73px; } #liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a { background-position: -102px -73px; } #liModern a:hover, #liModern:hover a, #liModern.over a { background-position: -204px -73px; } #liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a { background-position: -306px -73px; } #liDigital a:hover, #liDigital:hover a, #liDigital.over a { background-position: -408px -73px; } /*subnav formatting*/ #nav li.off ul a, #nav li.on ul a { display: block; background: #224d6f; color: #fff; font-family: arial, verdana, sans-serif; font-size: small; } #nav li.on ul a { background: #f90; } I am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed. Here is the code: Code:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Header Test</title>
<style type="text/css">
body {
font-family:arial;
font-size:10pt;
}
h1 {
text-align:center;
margin:0;
padding:0;
}
div.letter {
page-break-after:always;
}
.from {
text-align:center;
}
.to {
font-style:normal;
margin-top:30px;
}
.date {
}
.footer {
position:absolute;
bottom:0;
}
</style>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="letter">
<h1>Stanley Road Baptist Church</h1>
<address class="from">
Stanley Road, Morecambe, Lancashire, LA3 1UP
</address>
<address class="to">
Joe Bloggs
</address>
<p class="date">
Friday 27th August 2004
</p>
<p>
Dear Joe,<br />
Blah blah blah.
</p>
<p>
Yours sincerely,
</p>
<p>
Matt Fletcher
</p>
<div class="footer">
The Footer In Question
</div>
</div>
<div class="letter">
...
</div>
<div class="letter">
...
</div>
</body>
</html>
I can get it to stick to the bottom of only the first page, but it doesn't appear on any others. I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example: <head> <title>right position</title> <style type="text/css"> #maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;} .left {font-size: 2em;} .right {padding-left: 350px} </style> </head> <body> <div id="maindiv"> <span class="left">hello world</span> <span class="right">hi there</span> </div> </body> This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths. Thanks in advance, CSS Newbie! how do you set the width with CSS? i'd like to have a table with two columns, 70% and 30% with text-align left on the 70%, and text-align right on the 30%. any ideas? thanks. Hey guys, I am brand new to these forums, this seems like a good place to ask for help. So I am a novice web designer, I use AdobE Dreamweaver CS3. I have designed and coded some websites quite successfully, but now I keep running to the same problem. I have made my layout and turned it into different divs on Dreamweaver. This is in a very basic early stage. Next I want to add content, and I know how to do that, but every time I have done that and I add more content downward outside of the original "content" div's borders, the whole layout sometimes gets screwed up. Here is the address to the basic website that only looks to be alright: vivanidesign.com/newvivani/design.html. Then as I add content, to this particular page, it overflows, as shown in this website: vivanidesign.com/newvivani/designfail.html. How can I fix this? How can I make the background content image follow the text, so it will move down with it? Not just the content div, but the sidebar div also. Any help would be really great, I've tried to find out the answer to this for a while! Thanks! I have this: all my css files in one subdomain, html.website.com all my iamges in another subdomain, images.website.com i link my stylesheet: <link href="http://html.website.com/html/style.css" rel="stylesheet" type="text/css" /> and in the CSS: background:#333 url("../images/bodybg.png") repeat-x fixed top center; does not work. i have to put the whole domain in there? as far as relative paths, since the image is relative from the path of the location of the stylesheet? so I would think ../images/ should work? Argh - I am not very good with CSS (uhm, obviously) and all I am trying to do is change the color of some list items in a blog menu. It's Wordpress, and, it's not as if the blog is important - but this is driving me insane. I've installed Firebug in an effort to figure out what is making these items red - or #333. I can alter the code in Firebug and it gives a visual representation of what the edit would look like. But when I actually make the edit, nothing happens. And I've deleted my browsing history, used every browser, etc. - and I can change everything else! I am trying to change the text color in the right hand menu from red to, well, something else. The pages is at: http://www.webputzer.com The .css file looks like this: Code:
/*
Theme Name: alibi
Theme URI: http://www.blogchemistry.com/
Description: 2 column, with RHS widget sidebar
Version: 1.2
Author: BlogChemistry
Author URI: http://www.blogchemistry.com/
*/
body {
margin: 0;
padding: 0;
color: #333;
text-align:center;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #fff;
}
#wrapper2{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#wrapper3{
border-left: 1px solid #666;
border-right: 1px solid #666;
}
#wrapper4{
}
#wrapper{
width: 770px;
margin: 0px auto;
padding: 0px;
text-align:left;
font-size: 85%;
line-height:20px;
background: #fff;
border-left: 3px solid #333;
border-right: 3px solid #333;
}
#header{
padding: 1px 0px;
margin: 0;
background: #ccc;
}
#header-inner{
margin:0;
padding:0;
}
#content{
clear:both;
margin: 0;
padding: 5px 5px 5px 10px;
background:#fff;
}
#content-inner{
}
#main {
width: 550px;
float:left;
margin: 0;
padding: 5px 0 10px 0;
overflow:hidden;
}
#sidebar {
padding: 0;
margin: 0 0 0 560px;
background: #fff;
}
#footer {
clear: both;
margin: 0;
padding: 10px 16px;
text-align: center;
font-size: 85%;
}
#footer-inner{
background: #f2f2f2;
height: 50px;
}
#footer p{
margin:0;
padding:15px 0;
}
#navigation{
padding: 5px 15px;
}
#navigation div.fleft{
float:left;
}
#navigation div.fright{
float:right;
}
#credit{
text-align:right;
padding: 0 15px;
}
#credit p{
margin:0;
color:#777;
font-size:85%;
}
#credit p a, #credit p a:hover{
color:#999;
font-weight:100;
}
/* ********** default styles *********** */
p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: georgia, 'Times New Roman', sans-serif;
}
h1{
font-size: 190%;
}
h2{
font-size: 160%;
}
h3{
font-size: 120%;
}
h4{
font-size: 130%;
}
h5{
font-size: 100%;
}
h6{
font-size: 70%;
}
a{
color:red;
font-weight:800;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
a img{
border:0px;
}
hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}
form{
margin: 0;
padding:0;
}
fieldset{
padding:10px;
margin:0;
border:none;
}
legend{
font-weight:800;
}
code{
font-size: 90%;
font-family: "Courier New", Courier, monospace;
white-space: pre;
}
td{
vertical-align:top;
}
#tabs {
float:left;
width:100%;
font-size:90%;
background:#000;
line-height:18px;
border-top: 1px solid white;
}
#tabs ul {
margin:0;
padding:4px 10px 0 10px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
padding:5px 15px 3px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
/* Headings */
form#searchform2{
display: block;
float:right;
margin: 55px 10px 0px 5px;
}
#header h3{
margin: 0;
padding: 30px 0 0 10px;
}
#header h3 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 220%;
letter-spacing: 1px;
}
#header h2{
margin: 0;
padding: 10px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 130%;
letter-spacing: 1px;
}
h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:8px 10px 5px 10px;
background: #f2f2f2;
color: #444;
}
/* post styles */
.post{
margin: 0 0 10px 0;
padding: 0 5px 5px 5px;
}
.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}
.post h2 {
color: #333;
font-size: 150%;
font-weight:100;
padding: 7px 0 2px 2px;
margin: 10px 0 15px 0;
}
.post h2 a{
color: #333;
text-decoration:none;
font-weight:100;
}
.post h2 a:hover{
text-decoration:none;
color: #333;
}
.postmetadata{
font-size:80%;
padding: 1px 8px 1px 5px;
margin: 0;
border-top: 1px solid #ccc;
}
.postmetadata p{
line-height: 18px;
padding: 0;
margin: 2px 0;
}
.date{
float:left;
text-align:center;
font-weight:800;
margin: 0 10px 0 0;
padding: 0 10px;
border-right: 1px solid #ccc;
color: #444;
}
.dateDay{
display:block;
font-size: 16px;
line-height: 16px;
text-align:center;
}
.dateMonth, .dateYear{
display:block;
font-size: 11px;
padding:0;
line-height: 12px;
}
/* Comments */
h3#comments, h3#postcomment{
font-size: 100%;
font-family:verdana, sans-serif;
}
ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}
ol#commentlist li{
padding: 0px 3px;
margin: 0;
}
ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}
ul#commentlist{
padding: 0;
margin:0;
list-style-type:none;
}
ul#commentlist li{
display: block;
padding: 0;
margin: 0 15px 5px 15px;
font-size:90%;
background: #f2f2f2;
}
ul#commentlist p{
margin: 6px 0;
}
ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}
ul#commentlist li div.gravatar {
width:50px;
float:left;
padding: 10px 0 0 10px;
}
ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}
ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}
ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}
/* sidebar styles */
#subscribe p{
font-size: 85%;
margin: 3px 0 10px 0;
}
.menu{
padding:0;
font-size:90%;
}
.menu a{
font-weight: 100;
}
.menu a:hover{
text-decoration:none;
}
.menu ul{
margin:0;
padding:0;
list-style-type:none;
}
.menu ul li.widget{
padding:2px;
margin:0 0 0px 0px;
}
.menu ul li.widget ul{
margin: 0;
padding:0;
}
.menu ul li.widget ul li{
border-bottom:1px dotted #ccc;
background: #f2f2f2;
padding: 2px 0 2px 15px;
margin:0;
}
.menu ul li.widget ul li ul{
}
.menu ul li.widget ul li ul li{
border-top: 1px dotted #ccc;
border-bottom: none !important;
padding: 2px 0 2px 15px;
}
.menu ul li.widget h3{
font-family: arial;
font-size:120%;
padding:2px 0 1px 4px;
margin:0;
border-top: 3px solid red;
border-bottom: 1px solid #bbb;
color: #333;
font-weight: 800;
font-variant:small-caps;
}
.menu ul li h3 a{
color: #333;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}
.menu form{
display:block;
margin:0px;
padding:4px;
}
.menu input{
margin:3px 0;
font-size:90%;
}
li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}
/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}
#wp-calendar a {
display: block;
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar td {
padding: 3px 0;
text-align: center;
}
#footer a{
font-weight: 100;
}
If anyone could tell me what the heck is making this uneditable - man...I'd sure like to know... Really basic question. I've created a CSS text class. How do I reference it to apply to a text sample? I've been using this page as my guide: http://www.htmlgoodies.com/beyond/css/article.php/3470231 But they only reference commands such as <I class="name"> and <U class="name">. I don't want to add any Italics or Underlines, so how do I only reference the class? I've got limited experience with CSS and I've never done anything with divs, only tables. So my question is really, really, really basic: Not being as adept at CSS as I could be, especially positioning, I'm sort of at a loss as to how to best structure my page using divs. Looking at the comp at http://homework.describe.org/esdcar_home.jpg, would it be best to make everything from the top to the start of the brown bar at the bottom and from the left to the start of the picture one "column" (with nested divs), with everything to the right of the picture's edge a second "main content" column with nested divs inside it? Or should I make one header div that runs from left to right until either above or below the navigation (?), and everything below that point be a 2-column layout (until the brown bar at the bottom)? Does it matter one way or the other? Will it one day be clear to me immediately exactly how best to divide up and structure a page from a comp? Am I just a confused soul, or does everyone kind of struggle with this at the beginning? Sorry to ask such basic questions, but... Thanks in advance. T. Good Day All, I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all. http://029c92a.netsolhost.com/abrasives/cutmetalm.html Colin Hi all, I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest? I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix). Thanks very much for any pointers. I have three-level menu that is almost entirely CSS-driven (there's a little javascript for IE to get a clue; the system is based on the suckerfish dropdowns, which I learned about through A List Apart (http://www.alistapart.com/articles/dropdowns) and then visited HTMLDog to find out more (http://www.htmldog.com/articles/suckerfish/dropdowns/ ). In our case, Level 1 is always visible. Level 2 is visible when one mouseovers over the relevant Level 1 item, and Level 3 appears when one mouseovers the relevant Level 2. Levels 1 and 2 display horizontally; 3 displays vertically. We currently only have levels 2 and 3 for one menu 1 item, but the menus are built to be expandable. In trying to get to the right-most level 2 items, sometimes the a user might mouse might slide off the level 2 menu. The level 2 menu disappears, of course, because the CSS "thinks" maybe the user wants a different level 1 item, or that the user is done with the menus entirely. Is there a way to make this level 2 a little stickier and still ... -- use CSS for that? -- allow access to other level 1 items without confusing the user? -- have this level 2 menu vanish when a different Level 1 is chosen? -- allow for later expansion (level 2 menus under other items) -- drive this with mouseovers, not clicks (I could entirely rewrite the menu system to use more javascript and require mouseclicks, as the example he http://www.wpdfd.com/editorial/wpd1004news.htm#feature ...I'd prefer of course to use the work so far, but that may not be feasible.) One simple solution is to never let the current level 2 vanish, but that does defeat the idea of later expansion, and causes some confusion with what the different menu items really link to. So we can't use that solution. So. Help is welcome!! Please comment. I am looking for a robust drop down menu solution. Javascript is fine for controlling the functionality but the items must be positioned with CSS so that they are SEO. At the moment we have full javascrip menu's but the links don't get picked up by the search engines as they are encapsulated. I have tried the suckerfish stuff and it's a nightmare to be honest. Horrible to customise and very difficult to get a result you actually want. Hello there I would like to ask you a question concerning pop up menus. It turns out that I have seen some techniques which use just CSS. Nevertheless, what I usually see is techniques that use javascript to achieve this pop up menus. It seems to me that javascript might be a more simple and straightforward technique for this purpose although I do not know because I have not implemented neither of them yet. Since I want to build a pop up menu, I would like to hear your suggestions in terms of advantages and disadvantages of css driven pop up menus against javascript menus. As far as I know, javascript is a disadvantage because it might not work sometimes when it is disabled in the browser. But, tell me your point of view, because I am sure you have lot to say about this. Another thing that I would like to do is defining myself the shape and colors of this pop up menus so please, you can bear in mind this point for any suggestion concerning the previous paragraph. In conclusion, bearing in ming that lot of you will have had some experience working with pop up menus, I would appreciate any sound suggestion about the best or the most standard approach to let me start working on a custom pop up menu. If you there might be other more interesting and useful way of doing these pop up menus that is not css or javascript, please tell me as well. I look forward your replies. Thanks in advance. Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included? This is nice, but the css in too messy. http://www.bluescopesteel.com If you have any betterones please tell me. Cheers Hi there. I've become fond of the idea of non-javascript menus. I've been experimenting a little. So with help from various sources I managed to get a simple set working. I have this... Code:
#menu ul li > ul {
display: none;
position: absolute;
top: 18px;
left: 0;
width: 170px;
}
which correctly 'hides' the sub-menu. Then I have this Code:
#menu ul li:hover > ul {
display: block;
}
which should 'unhide' the sub-menu. Now, because I'd had success with the menu, I thought I should now look at validating my html and css. So far, I've just looked at the html part. My question is, why does it work with this code (which doesn't validate under Strict doctype)? Code:
<div id="menu">
<ul>
<li class="small"><a href="blah.php">About</a>
<li>Details On...
<ul>
<li class="small"><a href="blah.php">Registering</a>
</ul>
</ul>
</div>
and not this (which does validate)? Code:
<div id="menu">
<ul>
<li class="small"><a href="blah.php">About</a></li>
<li>Details On...</li>
<li>
<ul>
<li class="small"><a href="blah.php">Registering</a></li>
</ul>
</li>
</ul>
</div>
I'll listen to any thoughts on this, even the use (or not) of doctype strict. Thanks for listening! Stay JOLLY H Please help me. This is driving me crazy. I am getting a problem in IE and I can't seem to figure out how to fix it. Of course, it works just fine in Firefox, but not IE. In IE, go to to this page. On the horizontal drop-down menu, go to "Guides." Then scroll through the three drop-down options and back up. Notice how the 3rd level menu suddenly dissapears behind the 2nd level menu? Here's the portion of my CSS file controling the menu: Code: /********** LAYOUT - HEADER **********/
#header {background: #ffffff;
margin-top: 10px;
margin-bottom: 25px;
padding: 0 0 8px;}
img.headerimg {margin-left: 25px;}
/** NAV - top horizontal nav **/
#nav,
#nav ul
{padding: 0;
margin: 0;
list-style: none}
#nav {height:1.5em;
font: 80% arial;
margin-top: 1em;
margin-left: 75px;}
#nav li {position:relative;
float: left;
width: auto;
display:block;
margin: 0;
padding:0}
#nav a
{display: block;
padding: 3px 10px 2px;
border-bottom: 1px solid rgb(98,61,15);
border-top: 1px solid rgb(98,61,15);}
/************* 2nd tier *************/
#nav li ul {width: 15em;
position: absolute;
left: -999em;
background: #ffffff}
#nav li:hover ul,
#nav li.sfhover ul
{left: 10px;
z-index:55555}
#nav li li {background:#9BCD9B;
float:none;
border: 1px solid rgb(98,61,15);
border-top: none;
padding-left: 0}
#nav li li a,
#nav li li a:link,
#nav li li a:visited,
#nav li li a:hover
{color:#000;
padding: 3px 10px;
border-bottom: none;
border-top: none;}
#nav li li a:hover {color: #000;
background: #FFDAB9;}
#nav li.active {background: #FFDAB9;}
#nav li.active a {color: #000000}
/************* 3rd tier *************/
#nav li ul ul {width: 30em;
font-size: 100%;
margin-left: 7em;
margin-top: -.7em}
#nav li:hover ul ul,
#nav li.sfhover ul ul
{left: -999em;}
#nav li li:hover ul,
#nav li li.sfhover ul
{left: auto;}
#nav li li li
{background: #f6f6f6;
border-top: 1px solid #fff;}
#nav li li li a,
#nav li li li a:link,
#nav li li li a:visited,
#nav li li li a:hover
{color: #006400}
/************* 4th tier *************/
#nav li ul ul ul{width: 30em;}
#nav li:hover ul ul ul,
#nav li.sfhover ul ul ul
{left: -999em;}
#nav li li li:hover ul,
#nav li li li.sfhover ul
{left: auto;}
#nav li li li li {background: #FFDAB9;}
#nav li li li li a:hover {color: #000;
background: #9BCD9B;}
Please help me! Thanks! Manny Hi, I wanted to do a horizontal popout menu. I have the code and it works but I am trying to undertsand it better. It uses a csshover.htc file which i didn't download but the thing still works fine with a ie sniffer code in it. It doesn't use any javascript which I thought it needed. There seems a few ways to do expanding menus in css (with/without javascript)? Menus are more complicated than they look but I would some explanation on the above points before i continue. |
|||||||