Navigation Menu Marker Not Displaying

4 replies [Last post]

Sun, 2010-02-07 20:52

fodderstompf

Offline

Regular

Joined: 2008-04-02

Posts: 20

Points: 16

Hi,

Thanks as always. This kind of relates to another post I had last week...

I recently changed my naviagation menu to a pull-down with sub menus. After doing this my navigation marker for the current page no longer works?

Before, the current page was highlighted with a red block in the menu bar now it doesn't seem to work. Is there another conflict somewhere?

Tried everything I can think of, driving me nuts!

http://www.pilofficial.com/zzinfo1.html

CSS

/* pilofficial.com 2010 */
 
* {
	margin: 0px;
	padding: 0px;
	}
 
html {
	font-size: 100%;
	}
 
body {
		background: #fff;
		font-size: 62.5%;
		font-family: Century Schoolbook, Times New Roman, Times, serif;
		margin-top:10px; 
		margin-bottom:30px;
		}
 
/* body margin-top controls space at top, was set to 10 marks1.png lines.jpg */
 
 
#wrapper {
	background: #fff url(/images/marks1.png) repeat;
	min-width:800px;
	max-width:950px;
	min-height:900px;
	margin:0 auto;
	padding: 10px 15px 0px;
	position:relative;
		}
/* wrapper padding also controls space at top, was set to 15 now 0 */
/* min-width was 760 now 800, max-width was 900 now 950 */
 
* html #wrapper{
		width:950px
		}
/* width was 800 */
 
#masthead {
	background: #fff url(/images/lines.jpg) repeat;
	}
 
#masthead p {
		color:#ca513c;
		font: 1.1em Century Schoolbook, Times New Roman, Times, serif;
		font-weight:bold;
		padding: 0px 10px 0px;
	}
/* added with 0 pad to bring next to mast */	
 
 
#navContainer {
		float:right;
		background:#FFF;
		font: 1.2em Century Schoolbook, Times New Roman, Times, serif;
		font-weight:bold;
		text-align: center;
		padding: 0;
		}
/* navcont top padding controls top space, was 20 now 10, now 0 to bring next to mast Times New Roman, Times, serif */
 
	/* Submenus should appear below their parent */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: auto;
	position: absolute;
	left: -1000em;
}
 
/* Submenu that is showing with class designation MenuBarSubmenuVisible */
#navigation ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
	padding-bottom: 0;
}
 
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	float: none;
	width: auto;
}
 
/* Menu items are a light gray block with padding and no text decoration */
#navigation ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	margin-right: 0;
	padding: 0.5em 0.75em;
	text-decoration: none;
	border: 1px #ca513c dotted;
}	
/* this adds the line in subs */
 
#navContainer li { 
	float: left;
	}
 
#navContainer li li { 
	float: none; text-align: left 
	}
 
#navigation ul {
		padding: 0 0 5px;
		}
/* had to change bottom from 4 to 5 to remove line */		
 
#navigation li {
		display: inline;
				}
/* border-top: 0.5px solid #ca513c;
		border-bottom: 0.5px solid #ca513c; */
 
#navigation a:link, #navigation a:visited {
		text-transform: uppercase;
		text-decoration: none;
		color: #ca513c;
		background: #fff;
		padding: 5px 10px;
		position: relative;
		margin-right: 1px;
		}
/* nav margin right controls space between tabs, orig 5, even at 0 still space, needs to set -5 or border changed capitalize*/ 
/* nav background = tab colour */
 
#navigation #merchPageLink a:link, #navigation #merchPageLink a:visited {
		margin-right: 0px;
		}
 
#navigation a:visited {
		color: #000;
		}
 
#navigation a:hover {
		color: #FFF;
		text-decoration: underline;
		background: #ca513c;
		}
 
#infoPage #infoPageLink a:link, #infoPage #infoPageLink a:visited,
#showsPage #showsPageLink a:link, #showsPage #showsPageLink a:visited, 
#discoPage #discoPageLink a:link, #discoPage #discoPageLink a:visited, 
#bioPage #bioPageLink a:link, #bioPage #bioPageLink a:visited, 
#miscPage #miscPageLink a:link, #miscPage #miscPageLink a:visited,
#imagePage #imagePageLink a:link, #imagePage #imagePageLink a:visited,
#videoPage #videoPageLink a:link, #videoPage #videoPageLink a:visited,
#linkPage #linkPageLink a:link, #linkPage #linkPageLink a:visited,
#contactPage #contactPageLink a:link, #contactPage #contactPageLink a:visited,
#merchPage #merchPageLink a:link, #merchPage #merchPageLink a:visited {
		color: #fff;
		background: #ca513c;
		border-bottom-color: #fff;
		}	
		/* this changes colour of present page */
 
		#logo {
padding-top:6px;
}
 
 
#content {
		color: #000;
		min-height: 350px;
		font: 1.1em Century Schoolbook, Times New Roman, Times, serif;
		padding: 20px 20px 60px;
 
		}
/* probably remove this main content border so it lines up with navcont */
/* approx 770 made as 750, 20 pad+345+20 marg+345+20 (690 dub col length) */
/* change height back 550 */
 
#leftCol {
		float: left;
		width: 70%;
		text-align: left;
		padding-right: 10px;
		}
 
#rightCol {
	float: left;
	width: 27%;
	text-align: left;
	padding-left: 10px;
	position:relative;
		}
 
		/* width was 48.5 x2 = 97 (more bursts) */
 
#leftCol1 {
		float: left;
		width: 58.5%;
		text-align: left;
		padding-right: 10px;
		}
 
#rightCol1 {
		float: left;
		width: 38.5%;
		text-align: left;
		padding-left: 10px;
		position:relative;
		}
 
		/* width was 58.5 + 38.5 = 97 */
 
		#leftCol2 {
		float: left;
		width: 80%;
		text-align: left;
		padding-right: 10px;
		}
 
#rightCol2 {
		float: left;
		width: 17%;
		text-align: left;
		padding-left: 10px;
		position:relative;
		}
 
		/* width was 58.5 + 38.5 = 97 */
 
 
#fullCol {
		float: left;
		width: 97%;
		text-align: left;
		padding-right: 10px;
		}
 
.clearFix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}	
 
.clearFix {
		display:inline-block;
		}
/* mac hide \*/
 
* html .clearFix {
		height: 1%;
		}
.clearFix {
		display: block;
		}
/* End hide */
 
 
.contentFooter {
		background: #ffffff;
		font: 1em Century Schoolbook, Times New Roman, Times, serif;
		height: 15px;
		border-top: 2px solid #ca513c;
		border-bottom: 1px solid #ca513c;
		margin:0 auto;
		padding: 10px 15px 10px;
		}
 
 
#wrapper, #content, #leftCol, #rightCol, #masthead, #navContainer, #navigation, #navigation ul, #navigation li {
		zoom:1;
		}
 
 
/* home page only */
#txtlaya {
		position:absolute;
        width:335px;
        height:63px;
        z-index:1;
        left: 39px;
        top: 313px;
        visibility: visible;
        text-align: center;
	}
 
#galltxt {
		position:absolute;
		width:311px;
		height:83px;
		z-index:1;
		left: 37px;
		top: 290px;
		visibility: visible;
		}
 
.captions {
		font: 1em Arial, Helvetica, sans-serif;
		padding-top: 2px;
		}
 
 
#skipLink {
	}
 
 
p {
		font: 1.2em Century Schoolbook, Times New Roman, Times, serif;
		line-height: 1.5em;
		margin-bottom: 1em;
	}
 
	/* Lucida Grande, Lucida Sans Unicode, Lucida, Geneva, sans-serif */
 
p1 {
		font: 1.2em Arial, Helvetica, sans-serif; 
		line-height: 1.5em;
		margin-bottom: 1em;
	}
 
	/* Lucida Grande, Lucida Sans Unicode, Lucida, Geneva, sans-serif */
 
 
 
h1 {
		font: 2em Arial, Helvetica, sans-serif; 
		color: #000033;
		}
 
h2 {
		font: 1.5em Century Schoolbook, Times New Roman, Times, serif;
		font-weight:bold;
		color: #ca513c;
		line-height: 1.5em;
		text-transform: capitalize;
		border-top: 2px solid #ca513c;
		border-bottom: 1px solid #ca513c;
		margin-bottom: 1em;
		}
 
h3 		{
		font: 1.2em Century Schoolbook, Times New Roman, Times, serif; 
		color: #000000;
		font-weight: bold;
		line-height: 1.5em;
		margin-bottom: 1em;
		}
 
h4 		{
		font: 1.2em Century Schoolbook, Times New Roman, Times, serif;
		color: #ca513c;
		line-height: 1.5em;
		margin-bottom: 1em;
	}
 
	/* same as para but red */
 
	h5 		{
		font: 1em Century Schoolbook, Times New Roman, Times, serif;
		color: #ca513c;
		line-height: 1em;
		margin-bottom: 1em;
	}
 
	h6 		{
		font: 1em Century Schoolbook, Times New Roman, Times, serif;
		font-style:normal;
		line-height: 1em;
		margin-bottom: 1em;
	}
 
 
h2+p:first-letter {
		}
 
	/* float: left; font-size: 2em; line-height: 1.0em; margin-top: -0.5px; margin-right: 0.15em; */
 
blockquote {
	}	
 
cite {
	}
 
img 	{
	border-top: 2px #ca513c solid;
  	border-bottom: 1px #ca513c solid;
  	border-left: 1px #ca513c solid;
  	border-right: 2px #ca513c solid;
		}
 
	/* was border: 0;  1px solid #000000 */
 
#masthead img, footer img {
	border: 0;
	}
 
 
.thumb { 
		margin: 3px; 
		}
 
.botimage { 
		margin-bottom: 10px;  
		}
 
.noBorder { 
	 border:0;
		}	
 
.imagecenter { 
		display: block;
    margin-left: auto;
    margin-right: auto;
	text-align: center; 
		}
 
.imageleft { 
		text-align: left; 
		margin: 5px; 
		float:left;
		}
 
	/* was margin-right: 3px; margin-bottom: 3px; */
 
.imageright { 
		text-align: right; 
		margin: 5px;
		float:right;
		}
 
.imagerightnomargin {
	text-align: right;
	margin: 0px;
	float:right;
		}
 
	/* font info */
strong {
	font-weight: bold;
	}
 
 
/* links and navigation */
a:link {
	color: #ca513c;
	text-decoration: underline;
	}
a:visited {
	text-decoration: underline;
	color: #000;
	}
a:hover {
	text-decoration: underline;
	}
a:active {
	text-decoration: none;
	}
 
div.piccaptions {
  float: right;
  width: 25%;
  border-top: 2px #ca513c solid;
  border-bottom: 3px #ca513c solid;
  border-left: 1px #ca513c solid;
  border-right: 2px #ca513c solid;
  margin: 0.5em;
  padding: 1em;
}
div.piccaptions p {
  text-align: center;
  font-style: italic;
  font-size: 1em;
  text-indent: 0;
}
 
div.piccaptions1 {
  float: right;
  margin: 0.5em;
  padding: 0.5em;
}
/* took out width: 25% */
div.piccaptions1 p {
  text-align: center;
  font-style: italic;
  font-size: 1em;
  text-indent: 0;
  }
 
/* same but no border */	
 
/* if cols the same list as one and use comma border: 1px #ca513c solid; */	
 
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
 
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
 
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
 
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
 
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
 
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
 
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
 
 
/* new stuff */
 
.uppercase {
	text-transform: uppercase;
}
 
.titlecase {
	text-transform: capitalize;
}
 
.lowercase {
	text-transform: lowercase;
}
 
 
 
/* end */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>PiL Official | Info | Public Image Ltd</title>
 
<link rel="shortcut icon" href="http://www.pilofficial.com/images/pil.ico">
 
<link href="/_css/pilsite3.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
 
<body id="infoPage">
<div id="wrapper">
    <div id="masthead">
 
      <div id="navContainer">
 
       <div id="navigation">
         <ul id="MenuBar1" class="MenuBarHorizontal">
            <li>
              <script language="JavaScript" type="text/JavaScript">
<!--
function wimpyPopPlayer(theFile,id,stuff) {
  window.open(theFile,id,stuff);
}
//-->
        </script>
              <a href="javascript:;" onClick="wimpyPopPlayer('http://www.pilofficial.com/mp3s/myWimpy.html','wimpyMP3player','width=180,height=300')">Audio Player</a></li>
            <li><a href="/info.html">Info</a></li>
            <li><a href="/shows.html" class="MenuBarItemSubmenu">Shows</a>
              <ul>
                <li><a href="/shows.html">Tour Dates</a></li>
                <li><a href="/showsarchive.html">Gig Archive</a></li>
              </ul>
            </li>
            <li><a href="/disco.html" class="MenuBarItemSubmenu">Records</a>
              <ul class="MenuBarHorizontal">
                <li><a href="/disco.html#albums">Albums</a></li>
                <li><a href="/disco.html#comps">Compilations</a></li>
                <li><a href="/disco.html#live">Live Albums</a></li>
                <li><a href="/disco.html#sings">Singles</a></li>
                <li><a href="/disco.html#dvd">DVD</a></li>
                <li><a href="/concertlivepil.html">Concert Live CD's</a></li>
              </ul>
           </li>
            <li><a href="/bio.html" class="MenuBarItemSubmenu">Bio</a>
              <ul>
                <li><a href="/bio.html">Timeline</a></li>
                <li><a href="/pil.html">PiL Members</a></li>
              </ul>
           </li>
            <li><a href="/misc.html" class="MenuBarItemSubmenu">Misc</a>
              <ul>
                <li><a href="/press.html#ints">Interviews</a></li>
                <li><a href="/press.html#gigs">Concert Reviews</a></li>
                <li><a href="/misc.html#pr">Press Releases</a></li>
              </ul>
        </li>
            <li><a href="/image.html">Image</a></li>
            <li><a href="/video.html" class="MenuBarItemSubmenu">Video</a>
              <ul>
                <li><a href="/video.html#2009">2009</a></li>
                <li><a href="/video.html#promo">Promos</a></li>
                <li><a href="/video.html#tv">TV</a></li>
                <li><a href="/video.html#ints">Interviews</a></li>
              </ul>
        </li>
            <li><a href="/links.html">Links</a></li>
            <li><a href="/contact.html">Contact</a></li>
            <li><a href="http://pil.shop.venda.com/" target="_blank">Merchandise</a></li>
          </ul>
 
       </div> <!-- end of nav -->
 
      </div> <!-- end of nav cont -->
    <a href="/info.html"><img src="/images/pil_mast.png" alt="Public Image Limited: PiL Official" width="105" height="96" style="margin: 0px 0px 0px 20px"></a>
	</div> <!-- end of mast -->
    <div id="content" class="clearFix">
 
	<div id="leftCol">
	  <h2>January 28th, 2010</h2>
<p>XXXXX  XXXXXXXXXXXXXXXXXXXXXXXXX XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX  XXXXX </p>
<p>&nbsp;</p>
 
<h2>January 20th, 2010</h2>
<h3> XXXXX</h3>
<p>&nbsp;</p>
<p class="titlecase">hhhh gg hhhh hh</p>
<p>&nbsp;</p>
 
<p>&nbsp;</p>
</div> 
	<!-- end of leftCol -->
 
	<div id="rightCol">
	  <p class="imagecenter"><a href="/pilpr4.html">PiL to Perform at Coachella Valley Music &amp; Arts Festival, USA  2010</a></p>
	  <p class="imagecenter">&nbsp;</p>
	  <p class="imagecenter"><a href="/concertlivepil.html">PiL: ALiFE<br>
	    Encore download info and tracklistings etc</a></p>
	  <p class="imagecenter">&nbsp;</p>
	  <p class="imagecenter"><a href="http://pil.shop.venda.com" target="_blank">Official PiL webstore now open. <br>
      T-shirts, posters, keyrings etc</a></p>
	  <p class="imagecenter"><a href="/concertlivepil.html" target="_blank"><br>
	    </a></p>
	  <p class="imagecenter"><a href="/press.html">Press Interviews / Reviews<br>
Updated: Jan 15th, 2010</a></p>
      <p class="imagecenter">&nbsp;</p>
       <p class="imagecenter"><a href="/contact.html">Mailing List: <br>
    Sign Up For Updates</a></p>
        <p class="imagecenter">&nbsp;</p>
        <p class="imagecenter"><a href="/concertlivepil.html"><img src="/images/concertlive198.gif" width="199" height="199" alt="Concert Live"></a></p>
        <p class="imagecenter">&nbsp;</p>
        <p class="imagecenter"><a href="http://pil.shop.venda.com" target="_blank"><img src="/images/webstore198.gif" width="198" height="198" alt="PiL Webstore"></a></p>
      <p class="imagecenter">&nbsp;</p>
<p class="imagecenter"><strong><a href="http://www.myspace.com/pilofficial" target="_blank"></a></strong><a href="http://www.myspace.com/pilofficial" target="_blank"><img src="/images/MySpace_32x32.png" width="32" height="32" style="margin: 0px 5px" alt="PiL MySpace"></a><a href="http://www.facebook.com/pages/PIL/282252360360" target="_blank"><img src="/images/FaceBook_32x32.png" width="32" height="32" alt="PiL Facebook"></a><a href="http://twitter.com/pilofficial" target="_blank"><img src="/images/Twitter_32x32.png" width="32" height="32" style="margin: 0px 5px" alt="PiL Twitter"></a><a href="http://www.youtube.com/pilofficial" target="_blank"><img src="/images/Youtube_32x32.png" width="32" height="32" alt="PiL YouTube"></a></p>
<p class="imagecenter">&nbsp;</p>
<p class="imagecenter"><a href="/contact.html"><img src="/images/mailinglist.jpg" alt="PiL Mailing List" width="198" height="58"></a></p>
 
    </div> <!-- end of rightCol -->
	</div> <!-- end of content -->
 
 
	<div class="contentFooter"> 
&copy; 2009
    <script type="text/JavaScript">
	var d=new Date();
	yr=d.getFullYear();
	if (yr!=2006)
	document.write("- "+yr);
	</script>
    Public Image Ltd | <a href="/credits.html">Site Credits</a>
	</div> <!-- end of footer -->
	</div> <!-- end of wrapper -->
 
 
 
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
    </script>
</body>
</html>

Tags:

CSS Layouts

Mon, 2010-02-08 06:00

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

#infoPage #infoPageLink

#infoPage #infoPageLink a:link, #infoPage #infoPageLink a:visited,
#showsPage #showsPageLink a:link, #showsPage #showsPageLink a:visited, 
#discoPage #discoPageLink a:link, #discoPage #discoPageLink a:visited, 
#bioPage #bioPageLink a:link, #bioPage #bioPageLink a:visited, 
#miscPage #miscPageLink a:link, #miscPage #miscPageLink a:visited,
#imagePage #imagePageLink a:link, #imagePage #imagePageLink a:visited,
#videoPage #videoPageLink a:link, #videoPage #videoPageLink a:visited,
#linkPage #linkPageLink a:link, #linkPage #linkPageLink a:visited,
#contactPage #contactPageLink a:link, #contactPage #contactPageLink a:visited,
#merchPage #merchPageLink a:link, #merchPage #merchPageLink a:visited

The first ID is for the body, the second ID is for the list item - you don't have any of those second IDs in your HTML, so you'll have to add them in.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mon, 2010-02-08 11:25

fodderstompf

Offline

Regular

Joined: 2008-04-02

Posts: 20

Points: 16

Where should they be? I tried

Where should they be? I tried changing the MenuBar1 ID and it threw up some java errors, I then tried giving the li an ID but it doesn't seem to do anything.

Thanks as always.

Mon, 2010-02-08 12:32

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

You've got #infoPage on the

You've got #infoPage on the body, so then you need:

<li id="infoPageLink"><a href="/info.html">Info</a></li>

etc.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tue, 2010-02-09 12:39

fodderstompf

Offline

Regular

Joined: 2008-04-02

Posts: 20

Points: 16

Thanks

Thanks. Much appreciated.

Navigation Menu Marker Not Displaying

#infoPage #infoPageLink

Where should they be? I tried

You've got #infoPage on the

Thanks

New forum topics

User login

Navigation