|
CSS - Highlight Current Page Without Body Id
Hi There,
Is it possible to highlight the current page without specifying a unique body id? I have been asked to implement current page style on a dynamic site where it is not possible to do this. Any ideas would be greatly appreciated. Thanks, Similar TutorialsThis is what i am using as my page, and i only want to highlight the top part i.e only test and not the lowers. when i include the current page highlight class to the menu the whole section is highlighted, is there a way to highlight just the li and not the ul under the li that are contained within the same class. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Test</title> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> <style type="text/css" media="screen"> /* horizontal menu coding */ #nav { float: left; margin: 0 0 1em 0; padding: 0; list-style: none; } #nav li { float: left; } #nav li a { display:block; padding: 7px 23.9px; text-decoration: none; font-family:"Arial"; color: white; border-right: 1px solid #ccc; border-bottom: 1px dashed #ccc; font-size: 14px; background-color: #3f6fb7; } } #nav li a:hover { color: #3f6fb7; background-color: #d1cf9f; } #nav pageHorizontal a { background:#d1cf9f; color: white; } #nav ul.current-pagelowerHorizontal a { background:#d1cf9f; color: white; } #nav #nav-home a { background:#d1cf9f; color: white; /* declarations to style the current state */ } /* Print menu coding */ </style> </head> <body onLoad="preloadImages();" bgcolor="#ffffff"> <div class="ts-1-13"> <ul id="nav"> <li id="nav-home" > <a href="testnewMenu.html">test</a> <!--for the new menu --> <ul id="nav"> <a href="XXX.html">Lower 1 </a> </ul> <ul id="nav"> <a href="XXX.html">Lower 2</a> </ul> <ul id="nav"> <a href="XXX.html">Lower 3 </a> </ul> <ul id="nav"> <a href="XXX.html"> Lower 4</a> </ul> <!--for the new menu ul under a list --> </li> <li> <a href="XXX.html">Test2</a> </li> <li> <a href="XXX.cfm">test 3</a> </li> <li> <a href="About_Us.html">About Us</a> </li> </ul> </div> </body> </html>
I've been at this for hours and hours and I've tried about 50 different ways to get this to work but I'm totally stumped. I've switched the id and class around (in my site's theme.php and template.html) so often that I'm dizzy. I've searched Google and these forums (among others) for help but still, I'm getting nowhere. Maybe my CSS skills are lacking but this seems simple enough (or is it?). Anyway, here's the problem: The CSS (below) just won't work...so what's wrong with it? What am I missing? Code: ul#navigation {
list-style: none;
margin:0 auto;
padding:0;
font-family: Arial, Verdana, Serif;
font-weight:bold;
background:#32478A;
text-transform:uppercase;
height:25px;
line-height:25px;
font-size:12px;
}
ul#navigation li {
float:left;
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
background:none;
}
ul#navigation li a {
display:block;
padding:0 15px;
text-transform:uppercase;
letter-spacing:1px;
border:none;
color:#fff;
}
ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li.current_page_item a {
color:#242169;
background:#fff;
}
My template.html UL ID looks like this... Code: <ul id="navigation">
{SYS_MENU}
</ul>
...and the theme.php CLASS (login link for example) looks like this: Code: <!-- BEGIN login -->
<li><a href="{LOGIN_TGT}" title="Click here to log in" class="current_page_item"> Log in</a></li>
<!-- END login -->
Here's a link to my site: The hover and active bits seem to work but not the CURRENT...which is what I need to fix. Simply put, the current tab at the top of the page doesn't change to reflect what page you're on. I apologize in advance for the coding mess on my site but I'm just now getting around to cleaning things up. I could really use a hand fixing this little monster. Anyone with stellar CSS skills ready to school this lazy bum? Cheers. EDIT: The link (BBCode) above (to my site) doesn't work, so click my homepage in the drop-down menu under my user name. Thanks. I'm a CSS newbie, so forgive me if I'm going about this the wrong way entirely. I'm trying to build a website with a menu that changes the source of an iFrame. So I have: Code: <html> <body> <div>**MENU**</div> <div><iframe id="contentFrame" src="home.htm"></iframe></div> </body> </html> Clicking a menu item, say "Contact Us", changes the src of the iFrame using: Code: <a href="javascript:document.getElementById('contentFrame').src='ContactUs.htm'">Contact Us</a>
The menu is pure CSS, with each item underlining as it's rolled over, and some submenus that show up when hovering. What I'm looking to do is have the selected menu item have a different text color. So when you click "Contact Us", that item will change color and stay that other color while navigating the ContactUs.htm page in the iFrame. Is that even remotely do-able? I saw some examples where you use body classes and id's to match the id of the menu item to the body class of the related page. However, I think that would require loading completely separate pages (with the same menu, header, and footer code). I want to avoid the entire page flickering when changing content. I don't seem to be able to access the body class value of the page being loaded in the iFrame. Is that possible to do? Thanks for any guidance you all could offer. is there a way to make all text on a page a certain size unless otherwise noted, this is what i have and its not working and im not sure how else to do it body { margin:0px; font-size: 10px; } or would i have to do it for each "span" or "div" "p" i have? I have a menu at the bottom of my page and want the menu item to be highlighted when the visitor is on that particular page so they know where they are. I want to embed this on a couple of pages because I have built a top level menu with drop downs using p7's Pop Menu Magic. Those menu items are highlighted when one is on a certain page. I don't know if I can do this by embedding. Could someone help me please. To see the example go to: www.coloradofoxden.com/deckscapes/index.html. The links at the bottom are what I am trying to fix. Thanks. I have a css list menu which uses background images in place of bullets. What I'd like is for the user to visit the 'about' page and have the 'about' links background image be different from the rest. So the user can see from looking at the menu, what page they are on. Anyone able to suggest any methods of doing this? Would be appreciated =D #bg-one { background: white url(some.png); } #bg-two { background: white url(someother.png); } =========== ... </head> <body id=bg-one"> ... ... </head> <body id=bg-two"> Hey all, I have a webpage w/a top, left column, and content column. The page has been designed using CSS. Is there anyway to load a seperate HTML page (of which I have no control) in my content column and keep the top (and possibly left) columns in place? Is there a way to do this w/CSS? (Basically I want frame functionality using CSS). So far my instincts say no... but before I spend too much time on solution I thought I'd check here. Thanks! BB Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't. Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id. This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in. CSS Code: Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }
.nav1 {float:left; position:relative;display:block;}
html4strict Code: Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul> <ul class="nav1"> Any help is greatly appreciated, I would imagine I am missing something simple. I have this: Code: img.decor{
text-decoration:none;
border:#CCCCCC thin solid;
padding: 4px;
}
My HTML: Code: <a href="google.com"><img class="decor" src="images/birds.jpg" /></a> when I hover over the image "decor" in my CSS, I would like the whole image to turn grey. I tried this: Code: img.decor a:hover{background-color:#CCCCCC;}
but it doesn't work. Any ideas?? I just start learning CSS. thanks I'm using external style sheets on a couple of sites, and have the following problem: When I click and drag down over the text, to copy & paste it into an email or whatever, all the text on that page is automatically highlighted .... I can't control the drag / selection, it's all or nothing. When I click and drag upwards, nothing happens at all ... it won't work. Any way to solve this? I don't get this problem with internal style sheets. Andy Hi folks. Long time lurker, first time poster. I've got some navigational menus that look great and work well in Firefox and Opera, but there are some odd issues in Internet Explorer. (I'm currently testing with IE7, but am fairly certain the same problems occur on IE6.) Interesting. The system won't let me put the URL in my post as I'm a new user, but this works... The URL for my test page is at a machine named www in the domain bobramstad.com and has the filename menu.html Just run that all together and you'll find the page OK. I'd cut and paste it here but I use a lot of whitespace and the file is kind of long, easier to hit the URL and view source it. For some unknown reason, under IE7, when I highlight any of the entries on the left which have submenus, the formatting of the main entry jumps around. It's odd. I have my own theories as to why this is happening, but frankly, none of them have panned out, or at least, I'm not sophisticated enough to hit on the right solution. FWIW, the current version of our home page uses an older mix of javascript and CSS which is not compatible with Safari or Opera and is also a bit clunky. Strangely, however, it looks fine in Firefox and IE, which might provide some clues as to what I'm doing wrong. I've been looking at this literally for three weeks, on and off, and have made some strides... the last problem is main menu jumping around when hover occurs... Any and all help gratefully received! -- Bob My problem is getting very frustrating been trying to fix it for ages, and its probably something simple but if i dont fix it soon my laptops going to find a river very quickly. I have a site using CSS(duh!) and when i highlight over a link on the site some of my text moves around. then when i highlight over my javascript drop down menu it moves back. its very strange. heres the link to one of the worse pages for jumping. http://zephyr-wgtn.co.nz/newsite/eventS.aspx Any help much appreciated. Regards Dan how can I highlight the link which I am currently viewing? How do you get the input text areas and selections to highlight or glow once active? For examples, visit Zappos.com or Amazon.com - when you click in the text fields to login it sort of glows. Hey, y'all, can you help me out here? Well, first, here's an example I'd like to accomplish at http://www.sparkplug.com/ I'd like to type the text OVER or ON an image but it's not part of the image so you can highlight it. I found some examples from Google using layers, however, these layers are positioned differently using different browsers. I tested using Firefox, IE 6 and Safari. I'm pretty sure that a 'professional' website like sparkplug does not use an amateur-ish technique as layers. :S. P.S Don't suggest me to include the text IN the image, lol, that's not what I would like. -Respect & thanks! Hi guys, just want to ask for help and if this is possible? I have a textlink inside of a row ,and I want to highlight the row color when mouseovers on that row or textlink. (maybe row color white will change to gray.) pls help. thanks in advance ok, so after i click a link it goes to the css visited link. .menu_1a a:link {color:#666666; text-decoration: none;} .menu_1a a:hover {Background: #666666; color:white;} .menu_1a a:visited {color:#666666; text-decoratoin: none;} is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link any ideas? -kevin |
|||||||