holmedwa04 Posted September 9, 2010 Share Posted September 9, 2010 Dear AllMy website has a navigation where the links change if you are on that page, have a look at it to see what I mean: http://www.goathland.co.ccOn the gallery I have done a similar thing to show the user what gallery they are in but I am having trouble getting it to work for the main gallery page. This is the HTML for the page: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head id="galleryh"><title>Goathland - Gallery</title><LINK rel="stylesheet" type="text/css" href="../stylesheet.css"><LINK rel="stylesheet" type="text/css" href="../print.css" media="print"><link rel="shortcut icon" href="../favicon.ico"><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body id="gallery"><div class="container"><div class="header"><?php include("../elements/header.php"); ?></div><div class="nav"><?php include("../elements/nav.php"); ?></div><div class="right"><?php include("../elements/right.php"); ?></div><div class="main"><h1>Image Gallery</h1><p>Welcome to my image gallery. Here you will find all images that I have taken during building my layout. These are split up into smaller galleries. Please click on the image of the gallery you would like to see or select one of the links below. To return to this page click the home button at the bottom of each gallery, the "Gallery Home" link or the back button on your web browser.</p><?php include("navtime.php"); ?><table><tr><td class="w25"><a title="Click to enter gallery" href="buildingbaseboard"><img alt="Building Baseboard Image" src="buildingbaseboard/thumbs/001_grey.jpg" onMouseOver="this.src='buildingbaseboard/thumbs/001.jpg'" onMouseOut="this.src='buildingbaseboard/thumbs/001_grey.jpg'"></a></td><td class="w25"><a title="Click to enter gallery" href="electronics"><img alt="Electronics Image" src="electronics/thumbs/013_grey.jpg" onMouseOver="this.src='electronics/thumbs/013.jpg'" onMouseOut="this.src='electronics/thumbs/013_grey.jpg'"></a></td><td class="w25"><a title="Click to enter gallery" href="fittingpointsmotors"><img alt="Fitting Points Motors Image" src="fittingpointsmotors/thumbs/018_grey.jpg" onMouseOver="this.src='fittingpointsmotors/thumbs/018.jpg'" onMouseOut="this.src='fittingpointsmotors/thumbs/018_grey.jpg'"></a></td><td class="w25"><a title="Click to enter gallery" href="general"><img alt="Goathland From Footbridge Image" src="general/thumbs/010_grey.jpg" onMouseOver="this.src='general/thumbs/010.jpg'" onMouseOut="this.src='general/thumbs/010_grey.jpg'"></a></td></tr><tr><td class="w25"><p class="gal">Building Baseboard</p></td><td class="w25"><p class="gal">Electronics</p></td><td class="w25"><p class="gal">Fitting Points Motors</p></td><td class="w25"><p class="gal">General</p></td></tr><tr><td class="w25"><a title="Click to enter gallery" href="lightingeurostar"><img alt="Ligthing Eurostar Image" src="lightingeurostar/thumbs/010_grey.jpg" onMouseOver="this.src='lightingeurostar/thumbs/010.jpg'" onMouseOut="this.src='lightingeurostar/thumbs/010_grey.jpg'"></a></td><td class="w25"><a title="Click to enter gallery" href="makingtrackplan"><img alt="Making Track Plan Image" src="makingtrackplan/thumbs/008_grey.jpg" onMouseOver="this.src='makingtrackplan/thumbs/008.jpg'" onMouseOut="this.src='makingtrackplan/thumbs/008_grey.jpg'"></a></td><td class="w25"><a title="Click to enter gallery" href="night"><img alt="Night Time Image" src="night/thumbs/007_grey.jpg" onMouseOver="this.src='night/thumbs/007.jpg'" onMouseOut="this.src='night/thumbs/007_grey.jpg'"></a></td><td class="w25"><a title="Click to enter gallery" href="preparingloft"><img alt="Preparing Loft Image" src="preparingloft/thumbs/009_grey.jpg" onMouseOver="this.src='preparingloft/thumbs/009.jpg'" onMouseOut="this.src='preparingloft/thumbs/009_grey.jpg'"></a></td></tr><tr><td class="w25"><p class="gal">Lighting Eurostar</p></td><td class="w25"><p class="gal">Making Track Plan</p></td><td class="w25"><p class="gal">Night Time</p></td><td class="w25"><p class="gal">Preparing Loft</p></td></tr><tr><td class="w25"> </td><td class="w25"><a title="Click to enter gallery" href="scenery"><img alt="Making Tree Image" src="scenery/thumbs/017_grey.jpg" onMouseOver="this.src='scenery/thumbs/017.jpg'" onMouseOut="this.src='scenery/thumbs/017_grey.jpg'"></a></td><td class="w25"><a title="Click to enter gallery" href="trackcleaning"><img alt="Electronic Track Cleaners Image" src="trackcleaning/thumbs/003_grey.jpg" onMouseOver="this.src='trackcleaning/thumbs/003.jpg'" onMouseOut="this.src='trackcleaning/thumbs/003_grey.jpg'"></a></td><td class="w25"> </td></tr><tr><td class="w25"> </td><td class="w25"><p class="gal">Scenery</p></td><td class="w25"><p class="gal">Track Cleaning</p></td><td class="w25"> </td></tr></table></div><div class="footer"><?php include("../elements/footer.php"); ?></div></div></body></html> And this is the CSS: #cse-search-results iframe {width: 99%;}a.nav:link {color: #ffffcc;font-size: 13px;font-weight: bolder;text-decoration: none;}a.nav:visited {color: #ffffcc;font-size: 13px;font-weight: bolder;text-decoration: none;}a.nav:hover {color: #ffffcc;font-size: 13px;font-weight: bolder;text-decoration: underline overline;}a.bot:link {color: #ffffcc;font-size: 11px;font-weight: bolder;text-decoration: none;}a.bot:visited {color: #ffffcc;font-size: 11px;font-weight: bolder;text-decoration: none;}a.bot:hover {color: #ffffcc;font-size: 11px;font-weight: bolder;text-decoration: underline overline;}a.gal:link {display: inline-block;color: #990033;font-weight: bolder;padding: 5px;text-decoration: none}a.gal:visited {display: inline-block;color: #990033;font-weight: bolder;padding: 5px;text-decoration: none}a.gal:hover {display: inline-block;color: #339900;font-weight: bolder;padding: 5px;text-decoration: underline overline}a:link {color: #000000;font-size: 12px;font-weight: bolder;text-decoration: none;}a:visited {color: #000000;font-size: 12px;font-weight: bolder;text-decoration: none;}a:hover {color: #339900;font-size: 12px;font-weight: bolder;text-decoration: underline overline;}#menu {list-style-type: none;margin: 0px;padding: 0px;}#index #indexn, #lights #lightsn, #archive #archiven, #about #aboutn, #layout #layoutn, #news #newsn, #gallery #galleryn{background-color: #ffaaaa;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc;}#index #indexn a.nav, #lights #lightsn a.nav, #archive #archiven a.nav, #about #aboutn a.nav, #layout #layoutn a.nav, #news #newsn a.nav, #gallery #galleryn a.nav {color: #990033;font-size: 13px;font-weight: 900;text-decoration: none;}#buildingbaseboard #buildingbaseboardn, #electronics #electronicsn, #fittingpointsmotors #fittingpointsmotorsn, #general #generaln, #lightingeurostar #lightingeurostarn, #makingtrackplan #makingtrackplann, #nighttime #nighttimen, #preparingloft #preparingloftn, #scenery #sceneryn, #trackcleaning #trackcleaningn {display: inline-block;color: #ffffcc;font-weight: bolder;text-decoration: none;padding: 5px;background-color: #990033;}#menu li {background-color: #990033;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc;}#nav {list-style-type: none;margin: 0px;padding: 0px;}#nav li {margin-left: 10px;padding: 10px;color: #000000;font-size: 16px;font-weight: bold;text-decoration: none;}#connect {list-style-type: none;margin-top: 1em;padding: 0px;}#connect li {margin-left: 10px;text-align: center;color: #000000;font-size: 16px;font-weight: bold;text-decoration: none;}#connect li img {display: inline;padding: 5px;vertical-align: middle;}body {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;background-color: #990033;margin: 5%;}table { color: black;font-size: 12px;font-family: calibri, arial, sans-serif;empty-cells: show;border-collapse: collapse;margin: 0px auto;width: 99%;} td {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;border: 2px solid black;}.w70 {width: 70%;}.w25 {width: 25%;border: none;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 10px;text-align:center;}.w33 {width: 33%;border: none;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 10px;text-align:center;}.w15 {width: 15%;text-align: center;}.add {width: 20%;text-align: center;border: none;}th {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;font-weight: bold;font-style: italic;text-align: center;border: 2px solid black;}h1, h2, h3, h4, h5, h6 {margin-top: 12px;margin-bottom: 12px;padding: 0px;}div.container {line-height: 150%;background-color: #ffffcc;margin: 0;width: 100%;}div.header {color: black;padding-top: 20px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;clear: left;}div.nav {text-align: center;margin: 0px;padding: 1em;width: 160px;float: left;}div.right {text-align: center;margin: 0px;padding: 1em;width: 160px;float: right;}div.main {padding-left: 195px;padding-right: 190px;padding-top: 15px;}div.footer {padding: 20px;clear: both;}div.footerbox {padding: 8px;clear: both;background: #990033;border: 2px inset #ffffcc;font-family: calibri, arial, sans-serif;font-size: 11px;color: #ffffcc;line-height: 120%;width: 305px;text-align: center;margin: 0px auto;}div.gal {font-family: Calibri, arial, sans-serif;font-size: 13px;color: #000000;line-height: 120%;width: 85%;text-align: center;padding: 5px;margin: 0px auto}img {display: block;margin: auto;border-width: 0px;}img.imggalnav {display: inline;margin: 5px;border-width: 0px;}p {font-family: calibri, arial, sans-serif;text-align: justify;font-size: 12px;}p.browser {border: 2px dashed #990033;color: #990033;font-weight: bolder;text-decoration: none;padding: 5px;}p.nav {padding-left: 10px;}p.ref {margin-bottom: 0px;font-family: calibri, arial, sans-serif;font-style: oblique;font-weight: bold;color: #666666;text-align: center;font-size: 12px;}p.gal {margin-top: 0px;margin-bottom: 15px;margin-left: 0px;margin-right: 0px;font-family: calibri, arial, sans-serif;font-style: oblique;font-weight: bold;color: #666666;text-align: center;font-size: 12px;}pre {font-family: calibri, arial, sans-serif;} When I add "#gallery #galleryn" to this line: "#buildingbaseboard #buildingbaseboardn, #electronics #electronicsn, #fittingpointsmotors #fittingpointsmotorsn, #general #generaln, #lightingeurostar #lightingeurostarn, #makingtrackplan #makingtrackplann, #nighttime #nighttimen, #preparingloft #preparingloftn, #scenery #sceneryn, #trackcleaning #trackcleaningn {" everything goes all funny, I can only assume because ive used those IDs before?How do I get around this? Any help would be greatly appreciated Link to comment Share on other sites More sharing options...
dsonesuk Posted September 9, 2010 Share Posted September 9, 2010 you already know the answer, you have dupicate id assigned to two elements, just rename one. Line 70, Column 20: ID "GALLERYN" already defined <a class="gal" id="galleryn" href="/gallery/">Gallery Home</a> | ✉ An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element). Line 31, Column 9: ID "GALLERYN" first defined here <li id="galleryn"><a class="nav" href="/gallery/index.php">Image Gallery</a></l… Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 10, 2010 Author Share Posted September 10, 2010 Sorry im really confused... I was told that I could use an ID on the body of every page and an ID on each link in the navigation to make the page you were on "light up" as such in the navigation. This is what ive done but as can be seen where ive "nested" two navigations as such on the gallery pages when you are on the gallery home, I would like a different style applied to this link on the horizontal navigation to the vertical one. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 10, 2010 Author Share Posted September 10, 2010 Actually yes, I see the error now! :) Ive changed this now... as can now be seen from the main gallery page the two links are lit up differently, is it possible to get the one in the vertical navigation to always stay lit when you are on any of the gallery? Bearing in mind there are literally hundreds of pages in it? I mean can I set an ID on say the head of every page and then make a selector in the CSS which looks for the ID in the head and the one in the vertical navigation maybe? :S Link to comment Share on other sites More sharing options...
dsonesuk Posted September 10, 2010 Share Posted September 10, 2010 As the warning said 'An "id" is a unique identifier' if its used more than once, it is not unique, even if it is used on different element type. It should be only used once on every page, for multiple uses within a page you would use classes, that is what classes are for. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 10, 2010 Author Share Posted September 10, 2010 Is there a simple way of identifying any page within the gallery folder of my site as a gallery page and styling the vertical navigation to show this though? Im not brilliant with CSS and only just about understand what my stylesheet does! Sorry it takes me a while to grasp some of the concepts Link to comment Share on other sites More sharing options...
dsonesuk Posted September 10, 2010 Share Posted September 10, 2010 you need to identify an item that identify which folder/page you are on, then use this to assign a class, which will change menu colour.Is the menu produced dynamically using php, if yes, when the menu is produced look at current page, and compare to the menu link, if same ("http://www.goathland.co.cc/gallery/"), assign class.javascript can be used to produce the same effect based on same principle. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 10, 2010 Author Share Posted September 10, 2010 No the navigation is a PHP include file. I figured creating a huge selector to apply the styles was a bit daft? Link to comment Share on other sites More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 No the navigation is a PHP include file. I figured creating a huge selector to apply the styles was a bit daft?You don't need a huge selector (and by selector, I assume you mean switch or if/else). Are you generating the links within a loop? You could do something like this:$arrLinks = ("www.google.com", "www.w3schools.com", "www.php.net");foreach ($arrLinks as $Link) { $class='normal'; if ($Link == $currPage) { $class='active'; } echo "<li class='".$class."'><a href='".$Link."'>".$Link."</a></li>";} $currPage will equal the current page. You can get that in one of the $_SERVER variables, I think. EDIT: Yep, $_SERVER['PHP_SELF'] should do it. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 10, 2010 Share Posted September 10, 2010 that won't work in this case, as he needs to highlight the menu when in the sub directories pages as well.try this<?php$arrLinks = array ("www.google.com", "www.w3schools.com", "www.php.net", "/gallery/index.php");$currPage = $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];foreach ($arrLinks as $Link) {$CheckLink=str_replace("index.php", "",$Link);$class='normal'; if (strpos(" ".$currPage, $CheckLink)!=0) { $class='active'; } echo "<li class='".$class."'><a href='".$Link."'>".$Link."</a></li>\n";}?>if because it is one menu causing problem<?php$currPage = $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];$class='normal'; if (strpos(" ".$currPage, '/gallery/')!=0) { $class='active'; } echo '<li id="galleryn" class="'.$class.'"><a class="nav" href="/gallery/index.php">Image Gallery</a></li>';?>edit fix error bold Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 10, 2010 Author Share Posted September 10, 2010 Thanks for your posts everyone.@dsonesuk: where would I place the two piece of code you have given me? Also presumably this can be replaced with any links: "www.google.com", "www.w3schools.com", "www.php.net" or deleted altogether?Everyone's help is much appreciated Link to comment Share on other sites More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 Also presumably this can be replaced with any links: "www.google.com", "www.w3schools.com", "www.php.net" or deleted altogether?That array was just used as a sample to illustrate the concept behind the code so yes it can be changed/removed. The array would be replaced by your list of links that need to go in the menu, however you are generating that list. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 10, 2010 Share Posted September 10, 2010 I think your best option will be option 2, as option 1 will mean creating arrays for id, link titles, as well as links.in the nav file<ul id="menu"><li id="indexn"><a class="nav" href="/index.php">Home</a></li><li id="lightsn"><a class="nav" href="/lights.php">How to Make Lights</a></li><li id="archiven"><a class="nav" href="/archive.php">News Archive</a></li><li id="aboutn"><a class="nav" href="/about.php">About the Layout</a></li><li id="layoutn"><a class="nav" href="/layout.php">Track Plan</a></li><li id="newsn"><a class="nav" href="/news.php">Layout News</a></li><?php$currPage = $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];$class='normal';if (strpos(" ".$currPage, '/gallery/')!=0){$class='active';}echo '<li id="galleryn" class="'.$class.'"><a class="nav" href="/gallery/index.php">Image Gallery</a></li>';?></ul>change class name 'active' and 'normal' to your requirements Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 11, 2010 Author Share Posted September 11, 2010 Thanks for your help, do I need to define what class active and normal are? If so what would they be? This bit? #menu li {background-color: #990033;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc;}#nav {list-style-type: none;margin: 0px;padding: 0px;}#nav li {margin-left: 10px;padding: 10px;color: #000000;font-size: 16px;font-weight: bold;text-decoration: none;} Or part of that bit? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 12, 2010 Share Posted September 12, 2010 #index #indexn, #lights #lightsn, #archive #archiven, #about #aboutn, #layout #layoutn, #news #newsn, #gallery #galleryn, #gallery .active {background-color:#FFAAAA;border:1px solid #FFFFCC;margin-left:10px;padding:3px;}#index #indexn a.nav, #lights #lightsn a.nav, #archive #archiven a.nav, #about #aboutn a.nav, #layout #layoutn a.nav, #news #newsn a.nav, #gallery #galleryn a.nav, #gallery .active a.nav {color:#990033;font-size:13px;font-weight:900;text-decoration:none;}Don't bother with normal as it will default to your current normal state anyway. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 12, 2010 Author Share Posted September 12, 2010 Thanks for your help... it doesn't seem to be working though. This is the CSS code i'm using: #index #indexn, #lights #lightsn, #archive #archiven, #about #aboutn, #layout #layoutn, #news #newsn, #gallery #galleryn, #gallery .active{background-color: #ffaaaa;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc;} This is the navigation code im using: <ul id="menu"><li id="indexn"><a class="nav" href="/index.php">Home</a></li><li id="lightsn"><a class="nav" href="/lights.php">How to Make Lights</a></li><li id="archiven"><a class="nav" href="/archive.php">News Archive</a></li><li id="aboutn"><a class="nav" href="/about.php">About the Layout</a></li><li id="layoutn"><a class="nav" href="/layout.php">Track Plan</a></li><li id="newsn"><a class="nav" href="/news.php">Layout News</a></li><?php$currPage = $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];$class='normal';if (strpos(" ".$currPage, '/gallery/')!=0){$class='active';}echo '<li id="galleryn" class="'.$class.'"><a class="nav" href="/gallery/index.php">Image Gallery</a></li>';?></ul> Sorry to be such a pain Link to comment Share on other sites More sharing options...
dsonesuk Posted September 12, 2010 Share Posted September 12, 2010 You have one crazy way of defining you button statesanyway try this#index #indexn, #lights #lightsn, #archive #archiven, #about #aboutn, #layout #layoutn, #news #newsn, #gallery #galleryn, .active {background-color:#FFAAAA;border:1px solid #FFFFCC;margin-left:10px;padding:3px;}#index #indexn a.nav, #lights #lightsn a.nav, #archive #archiven a.nav, #about #aboutn a.nav, #layout #layoutn a.nav, #news #newsn a.nav, #gallery #galleryn a.nav, .active a.nav {color:#990033;font-size:13px;font-weight:900;text-decoration:none;} Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 13, 2010 Author Share Posted September 13, 2010 Thanks, that kind of works, it is changing the text but it isn't changing the bgcolour of the bullet. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2010 Share Posted September 13, 2010 we are going to have to use id instead of classeschange php script to this<?php$currPage = $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];$idref='galleryn';if (strpos(" ".$currPage, '/gallery/')!=0){$idref='active';}echo '<li id="'.$idref.'"><a class="nav" href="/gallery/index.php">Image Gallery</a></li>';?>then change#index #indexn, #lights #lightsn, #archive #archiven, #about #aboutn, #layout #layoutn, #news #newsn, #gallery #galleryn, #menu #active{background-color: #ffaaaa;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc;}#index #indexn a.nav, #lights #lightsn a.nav, #archive #archiven a.nav, #about #aboutn a.nav, #layout #layoutn a.nav, #news #newsn a.nav, #gallery #galleryn a.nav, #menu #active a.nav {color: #990033;font-size: 13px;font-weight: 900;text-decoration: none;}the id are taking precedence over classes, so changing to id, should fix this. (tested amendments in firebug and it worked) Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 13, 2010 Author Share Posted September 13, 2010 Oh wow! Thank you so much dsonesuk!!! You have been such a help! That works great. I don't know any PHP or shall I say very little, don't worry if not but could you possibly explain what the code in the PHP bit does? Also does it need all of the carriage returns? THANKS SO MUCH though! Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2010 Share Posted September 13, 2010 <?php$currPage = $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']; assign current address to $currPage variable 'http://www.goathland.co.cc/gallery/index.php'$idref='galleryn'; predefines value for $idrefif (strpos(" ".$currPage, '/gallery/')!=0) checks to see if /gallery/ appears anywhere in address{$idref='active'; if yes change predefined value to new value}echo '<li id="'.$idref.'"><a class="nav" href="/gallery/index.php">Image Gallery</a></li>'; echo/print li list with current id ref value?> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.