Jump to content

Search the Community

Showing results for tags 'active'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 4 results

  1. Hi! I am reading the HTML5 tutorial from www.w3schools.com. All the examples I've tried have worked well, but not the following one: I want to change the link colours of one of my pages. The "visited", "active" and "hover" are working, but not "link", I don't know why. Could anyone help? This is what I have put in a .css file: <style> a:link { color: black; background-color: transparent; text-decoration: none; } a:visited { color: red; background-color: transparent; text-decoration: none; } a:hover { color: green; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> Thanks!
  2. Hey, is there in W3 already a script, or do i even need one, when i want, that: my active menu background to switch colors, when i scroll to a new section on my page? thx for the feedback!
  3. Hello, I had some help here a little while ago on getting some code to work so that the buttons of the main navigation of the site reflected with page and/or section you are in/on. I am trying to re-use the code on a new site and am running into some issues...mainly, it's not working. The new site is here: http://clarkwireless.oiw10.com I ended up using this code to target all the "main/top layer" buttons: <script> var current = window.location.href; if ( current == "http://clarkwireless.oiw10.com" || current == "http://clarkwireless.oiw10.com/" || current == "http://clarkwireless.oiw10.com/index.htm" ){ jQuery('#menu > li > a[href=/index.htm]')().addClass("active"); } else if ( current.indexOf("http://clarkwireless.oiw10.com/about-us/") > -1 || current.indexOf("http://clarkwireless.oiw10.com/news") > -1 || current.indexOf("http://clarkwireless.oiw10.com/resources") > -1 || current.indexOf("http://clarkwireless.oiw10.com/videos") > -1 || current == "http://clarkwireless.oiw10.com/contact-us.htm" ){ jQuery('#menu > li > a[href$=/about-us/index.htm]').parent().addClass("active"); }</script> And I ended up using this code to catch the buttons in the drop downs: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); $('li.active').parents().not('ul').addClass('active'); } }); } </script> I've tried a few things with the CSS and within the Javascript, but it's a little over my head. Any help would be greatly appreciated! m@
  4. I've been messing around with the map and area elements (for the first time) to build a navigation bar with images, and I've run into a couple problems. The first problem is the images used in the navigation bar aren't aligning in firefox how I think I set them to align. Here is capture, from firefox, showing what I mean: However, they align exactly how I want them to align in all the other major browsers. For instance, here is capture from chrome: The code in question is the cell with the id of navigation. Additionally I would like to be able to create a hover state, and an active state for these images used in the navigation bar. This is the second problem I've been having. I don't know if it's even possible to use CSS on images to create a hover state for a link. If it is, I'm surely doing something wrong, based on the things I've tried. I'd like to be able to change the image when hovered over, and at the very least I'd like to be able to underline the image on hover. I checked around to see what I could find, but I didn't find anything that I perceived as an answer to my problems. Any help would be greatly appreciated. This is my 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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /></head><body id="theHeader" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="logoBox"> <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td> <td> <table id="rightsideHeader" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p> </td> </tr> <tr> <td align="left" valign="top" id="navigation"><img src="images/home.png" usemap ="#home" id="home"/><map name="home"><area shape="poly" coords="-3,0,74,0,74,8,79,16,74,24,74,33,-3,33" href="index.html" alt="Home"/></map><img src="images/about-us.png" id="aboutUs" usemap ="#aboutUs"/><map name="aboutUs"><area shape="poly" coords="0,0,105,0,105,8,110,16,105,24,105,33,0,33,0,24,5,16,0,8" href="index.html" alt="About us"/></map><img src="images/route-and-schedule.png" id="routeAndSchedule" usemap="#routeAndSchedule"/><map name="routeAndSchedule"><area shape="poly" coords="0,0,173,0,173,8,178,16,173,24,173,33,0,33,0,24,5,16,0,8" href="index.html" alt="Route And Schedule"/></map><img src="images/flight-information.png" id="flightInfo" usemap="#flightInfo"/><map name="flightInfo"><area shape="poly" coords="0,0,179,0,179,8,184,16,179,24,179,33,0,33,0,24,5,16,0,8" href="index.html" alt=" Flight Information"/></map><img src="images/fare.png" id="fare" usemap="fare"/><map name="fare"><area shape="poly" coords="0,0,70,0,70,33,0,33,0,24,5,16,0,8" href="index.html" alt="Fare"/></map></td> </tr> </table> </td> </tr></table><table id="mainTable" align="center"> <tr> <td> </td> </tr> </table> </body></html> This is my CSS: @charset "utf-8";.body {font-family: Verdana, Geneva, sans-serif;}.table {margin: 0px;padding: 0px;}.td {margin: 0px;padding: 0px;}/*==== header ====*/#theHeader {background-repeat: repeat-x;background-image: url(images/header-gradient.png);margin: 0px;}#headerTable {height: 150px;width: 1024px;margin-left: auto;margin-right: auto;/*==== leftside header ====*/}#logoBox {width: 268px;padding-left: 50px;}/*==== rightside header ====*/#rightsideHeader {height: 150px;}#tagLine {font-family: Verdana, Geneva, sans-serif;font-size: 16px;font-style: italic;text-align: left;color: #FFF;padding-top: 12px;}#phoneNumber {padding-left: 80px;} #navigation {height: 67px;width: 700px;padding-left: 0px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;text-decoration: none;}#navbar {padding: 0px;height: 34px;width: 605px;}#home { } /*==== main content ====*/#mainTable {background-image: url(images/background-gradients.png);height: 618px;width: 1024px;}#aboutUs {position: relative;right: 5px;}#routeAndSchedule {position: relative;right: 10px;}#flightInfo {position: relative;right: 15px;}#fare {position: relative;right: 20px;}
  • Create New...