navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
FrontPage Alternative
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

CSS Menus Dilema

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> CSS Menus Dilema 		Page: [1]
 
boonedawg

 

Posts: 36
Joined: 4/8/2006
Status: offline

  		CSS Menus Dilema - 4/9/2006 18:35:33   
Back again with yet another dilema :).

I am trying to get 2 different menus to work on my page, but I have run into some difficulties. My vertical pop out menu is displaying fine in FF and IE, but my top menu is taking on the width of my vertical pop out menu. I am unsure how to change the code of my top menu so it's not grabbing the ul code from my vertical pop out menu script?

Here is what i have so far;
Test Page

Here is the code iI am using;

test.html

<!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>Keyword</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="scripts/pageStyles2.css" rel="stylesheet" type="text/css" media="all" />
<link href="scripts/textStyles2.css" rel="stylesheet" type="text/css" media="all" />
<link href="scripts/headnav.css" rel="stylesheet" type="text/css" media="all" />
<link href="scripts/sidenav.css" rel="stylesheet" type="text/css" media="all" />
<script src="noRC.js" type="text/javascript"></script>
<script src="bookMark.js" type="text/javascript"></script>

</head>

<body>
<div id="headnav">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</div>

<div id="sidenav">
<ul id="menu">
<li><a href="#">» Link</a></li>
<li class="folder">
<a href="#" class="submenu">» Link</a>
<ul>
<li><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
</ul>
</li>
<li class="folder">
<a href="#" class="submenu">» Link</a>
<ul>
<li><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
<li><a href="#">» Link</a></li>
</ul>
</li>
<li><a href="#">» Link</a></li>
</ul>
</div>
</body>
</html>



headnav.css

/* header nav */
#headnav {
float: right;
margin: 10px 0 0 30px;
padding: 0;
height: 20px;
}

#headnav ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#headnav ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#headnav ul li a {
background: #fff;
width: 78px;
height: 18px;
border-top: 1px solid #f5d7b4;
border-left: 1px solid #f5d7b4;
border-bottom: 1px solid #f5d7b4;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
}

#headnav ul li a:hover {
color: #930;
background: #f5d7b4;
}

#headnav a:active {
background: #c60;
color: #fff;
}

#headnav li#active a {
background: #c60;
border: 1px solid #c60;
color: #fff;
}


sidenav.css

body {
behavior:url(scripts/csshover.htc);
}

/* the menu */
#sidenav {
float: left;
padding-left: 0;
margin-left: 0;
width: 195px;
}

ul,li,a {
display: block;
margin: 0;
padding: 0;
border: 0;
}

ul {
width: 195px;
border: 1px solid #e3e3e3;
background: #ffffff;
list-style: none;
}

li {
position: relative;
padding: 1px;
background: #ffffff;
z-index: 9;
}

li.folder {
background: #ffffff;
}

li.folder ul {
position: absolute;
left: 195px; /* IE */
top: 5px;
}

li.folder>ul {
left: 185px;
} /* others */

a {
padding-left: 3px;
border: 1px solid #ffffff;
text-decoration: none;
font-weight: bold;
width: 100%; /* IE */
}

li>a {
width: auto;
} /* others */

li a.submenu {
background: #ffffff;
text-decoration: none;
}

/* regular hovers */
a:hover {
border-color: #e3e3e3;
background-color: #f7f7f7;
color: #000000;
text-decoration: none;
}

li.folder a:hover {
background-color: #f7f7f7;
text-decoration: none;
}

/* hovers with specificity */
li.folder:hover {
z-index: 10;
text-decoration: none;
}

ul ul, li:hover ul ul {
display:none;
}

li:hover ul, li:hover li:hover ul {
display: block;
}

<!--[if lt IE 7]>
<style type="text/css">
body {behavior: url(scripts/csshover.htc);}
</style>
<![endif]-->

Any help with this would be greatly appreciated. Thanks in advance. :)

boonedawg

< Message edited by boonedawg -- 4/9/2006 20:45:00 >
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		RE: CSS Menus Dilema - 4/9/2006 20:25:02   
both lots of css appear to be called headnav

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to boonedawg)
boonedawg

 

Posts: 36
Joined: 4/8/2006
Status: offline

  		RE: CSS Menus Dilema - 4/9/2006 20:45:34   
Fix the title, thanks. :)

(in reply to jaybee)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> CSS Menus Dilema 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.