|
CSS - Highlight The Link Being Viewed
how can I highlight the link which I am currently viewing?
Similar Tutorialsok, 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 Hi, I have designed a webpage for a local organization, and am having some trouble with the navbar at the top of the page. This issue only happens in Firefox, as far as I can tell. The homepage (go to radnorhistory.org) is correct, and several other pages are messed up (click on 'membership,' for example); the first link, titled "collection" shows up as a text link above the navbar and not an image. Any ideas? -Thanks! Hi, this is my first posting on these forums, so my apologies in advance if I break some unwritten rules. I have developed a web page for friend who wanted four large area of the home page to act as buttons but not look like buttons. Each area contains an image and some text and the complete are should be clickable and should change colour when the mose moves over it. I prefer a pure html/CSS solution rather than resorting to Javascript, so I came up with the following The html for each area is: <div id="homePageTopicArea"> <ul> <li> <a href="workshops.html"> <img src="images/homePage/topic1Image.jpg" /> <div class="homePageTopicTextHeader"> <h1>Inspiring Workshops</h1> </div> <div class="homePageTopicText"> <p> This range of clear .......... </p> </div> </a> </li> and the CSS is #homePageTopicArea { height: 100%; width: 734px; margin-top: 10px; margin-left: 280px; } #homePageTopicArea ul { list-style-type: none; width: 734px; padding-left: 0px; margin-left: 0px; } #homePageTopicArea li { outline: none; border: 0; margin-top: 15px; height: 145px; } #homePageTopicArea li a { display: block; height: 145px; outline: none; text-decoration: none; } #homePageTopicArea li a:hover { background-color: #AEB8CB; } This works great when the page is viewed in Safari. But when I use Firefox 3.5.6 or IE7, I get an error on the page, the images are correctly positioned but the text from one of the boxes, always the second or third, never the first or last, is displayed in the wrong position, way too low down the screen, and it is in the bright blue, or purple, of an unmodified link code. If you click on the refresh button the page always displays correctly. Can anyone explain this behaviour? I have screenshots but dont know how to attach them. Hi, im having problems with disjointed rollovers. It works fine in explorer but wont work in firefox. It seems to be about 10px lower in firefox. Someone please help!!!!!!!! Go to mediahost.aib.ac.uk/fdashow07/gibson/louise/coast.php to see the page im having truble with. This is my html code of the dis jointed rollovers, <div class="projtitle"><h1>Coast, 2007</h1></div> <div class="thumbnailscolumn"> <a class="thumbnail" href="coast.php"><img src="images/cliff1_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff1.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff2_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff2.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff3_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff3.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff4_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff4.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> </div> This is my css, .projtitle{ float: left; width: 800px; height: 20px; padding-top: 27px; } .thumbnailscolumn{ float: left; padding-top: 0px; width:100px; height: 456px; margin-top: 24px; } .thumb{ margin: 0px 5px 5px 0px; } .thumbnailtwo{ margin: 0px 5px 5px 0px; } .thumbnailtwo:hover{ background-color: transparent; } .thumbnailtwo span{ position: absolute; visibility: hidden; text-decoration: none; } .thumbnailtwo:hover span{ top: 206px; visibility: visible; left: 610px; } Thanks Sam 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 This 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>
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 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 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. 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 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! 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. 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, Here's the problem: aparently Opera places an inverse color highlight on links that receive the keyboard focus (see Javascript Development: How do I hide focus on Opera?), and I'd like to hide it. CSS3 property
Code: outline-style is useless here, and I've also tried setting the JScript Code: hideFocus property, but aparently this only works on IE. In fact, I've tried everything I can think of except blurring the link, which would completely defeat my purpose. I tried Javascript Development and got nothing, so maybe the answer is not Javascript. Is there possibly some proprietary CSS extension in Opera that would hide the highlight? If so, what is it and how do I use it? 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. Hello, I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works. The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work. http://www.tpxdesign.com/test/Valliant/alpha/index7.php My nav menu code and nav style sheet: Code: <!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav">
<li><a href="demoreel.php" class="port">Portfolio</a>
<ul>
<li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
<li><a href="shorts.php" class="port">Shorts</a></li>
<li><a href="musicvid.php" class="port">Music Video</a></li>
<li><a href="comvid.php" class="port">Commercial</a></li>
<li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
<li><a href="gallery.php" class="port">Photo. Gallery</a></li>
</ul>
</li>
<li><a href="services.php" class="serv">Services</a>
</li>
<li><a href="newupdate.php" class="newe">News & Events</a>
<ul>
<li><a href="newupdate.php" class="newe">News/Updates</a></li>
<li><a href="eventblog.php" class="newe">Event Calendar</a></li>
</ul>
</li>
<li><a href="bio.php" class="about">About Valliant</a>
<ul>
<li><a href="resume.php" class="about">Resume</a></li>
<li><a href="bio.php" class="about">Biography</a></li>
<li><a href="contact.php" class="about">Contact</a></li>
</ul>
</li>
<li><a href="links.php" class="link">Links</a></li>
<li><a href="index7.php" class="home">Home</a></li>
</ul>
</div>
</div>
<!--[if !IE]><!-- end nav --><![endif]-->
Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 198px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}
PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? |
|||||||