|
HTML - Navigation Frame, Active List Item
I'm bulding a basic website navlist at the top of the screen. My problem is with the active link and how each is highlighted. I have not done this in many years so i'm sure i'm missing something simple as I just don't remember a lot of things. I believe the problem is with how my list is set up.
HTML: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="home.html" target="main" id="current">HOME</a></li> <li><a href="about.html" target="main">ABOUT</a></li> <li><a href="services.html" target="main">SERVICES</a></li> <li><a href="design.html" target="main">DESIGN</a></li> <li><a href="contact.html" target="main">CONTACT</a></li> </ul> </div> CSS: #navcontainer { margin: 100px; padding: 0; height: 30px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #CBC9C9; width: 108px; height: 28px; border-top: 1px solid #7A7A7A; border-left: 1px solid #7A7A7A; border-bottom: 1px solid #7A7A7A; border-right: 1px solid #7A7A7A; padding: 0; margin: 0 0 10px 0; color: #494949; text-decoration: none; display: block; text-align: center; font: normal 20px/28px "Lucida Grande", "Lucida Sans Unicode", Arial; } #navcontainer ul li a:hover { color: #CBC9C9; background: #989797; } #navcontainer a:active { background: #7A7A7A; color: #CBC9C9; border-top: 1px solid #7A7A7A; border-left: 1px solid #7A7A7A; border-bottom: 1px solid #7A7A7A; border-right: 1px solid #7A7A7A; } #navcontainer li#active a { background: #7A7A7A; border: 1px solid #CBC9C9; color: #9B9B9C; border-top: 1px solid #7A7A7A; border-left: 1px solid #7A7A7A; border-bottom: 1px solid #7A7A7A; border-right: 1px solid #7A7A7A; } I guess I don't know how to properly identify the active link. If you'll go to www.njcomplete.com, enter, you will see what I am talking about. The initial load looks right. However when I click on another link the page changes but the active link highlight isn't right. Any idea what I'm doing wrong? Similar TutorialsI need some way to automatically change a Frame's contents based upon the title of the RSS feed on the left, I need some way to automatically specify the APPNAME in this URL (for the frame) "http://www.google.com/search?btnI=1&q=APPNAME+site:appshopper.com". This URL loads the App Shopper page for the app it corresponds with. If there is any way to do this, I would be greatly appreciative. Thank you how to make a navigation frame?... Hi, I am making a web site and stuck in a place and need help in resolving the issue. Let me explain the issue. I have 3 frames... top, left, right(the main page). The top frame non navigable and has banner. In the left frame I have created tree menus to navigate between different links. The first link is to show the main page in the right frame. I have make a link in the right frame which will take you to the google web site. When I click on the link to take me to the google web page I get the google web page on the right frame. But when I click on the home link which is in the left frame tree menu I AM UNABLE TO GO TO THE MAIN PAGE on the right frame. That mean that the google page that was showing on the right frame should go off and the main page should show in the right frame when I click on the home link ( on the left hand frame tree menu). But it does not happen in that way. I do not understand the reason...... Please help me to resolve this issue........ Hey, I'm just wanting to put together a simple page with frames, which has a navigation frame on the left, then the main section on the right. I want to navigation links to open up in the main section on the right, but currently they are opening on the left, within the nav section. Does anyone know how i can do this? Currently i have as my nav links, which opens a new browser window for that page: <a href="functions.html" target="main.html">Functions</a> I'm just wanting to put together wireframes information, like this http://i2.sitepoint.com/graphics/wireframes2.png Thanks for any help! If I try using the IMG tags in the frame that contains my navigation bar, it moves the picture down and it looks very ugly. In the other hand, I need to create an image map for it but I can't seem to find a way to do that. Halp. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Navigation Bar</TITLE> <LINK REL="shortcut icon" HREF="favicon.ico" TYPE="image/x-icon"> <LINK REL="icon" HREF="favicon.ico" TYPE="image/x-icon"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META NAME="author" CONTENT="CENSOREDCENSOREDCENSORED"> <META NAME="version" CONTENT="0.7"> <META NAME="description" CONTENT="CENSOREDCENSOREDCENSORED."> <META NAME="keywords" CONTENT="CENSOREDCENSOREDCENSORED"> </HEAD> <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" HEIGHT="145"> <TR ALIGN="left" VALIGN="top"> <TD HEIGHT="145" WIDTH="780" BACKGROUND="navbar.jpg" NORESIZE BORDER="0" ALT="Navigation Bar"></TD> <MAP NAME="navbar"> <AREA SHAPE="rect" COORDS="341,99,434,124" HREF="main.html" ALT="Home"> </MAP> </TR> </TABLE> </BODY> </HTML> Obviously incomplete, I was trying to get the map to work. I removed the USEMAP="#navbar" because using it with the IMG tags made it look like crap. navbar.jpg is similar to this. Hi everyone, I am a noob. I am creating a website with frames. Using PHP or javascript how can I prevent a user from navigating directly to the subpages on the website? I want them to navigate to index.htm first. thanks Is it possible to have a <li> without it showing the bullet symbol? I want a list item that does everything a normal <li> does but doesn't look like a list item. Alternatively, is it possible to end a <ul> without unwanted space appearing after it? I want the next item to appear exactly on the next line but no matter what margins I specify in my <ul>'s CSS it leaves a blank line. A solution to either of these issues will solve my problem! Thanks, -sbs I am an HTML n00b and don't understand why this simple example is not working as I would like. I want 2 levels of indentation for list items and then I want the next line to be back at the zero margin. However, the last line is coming out indented as far as the previous list item as though the browser is remembering the margin settings for that item. How do I get the last line back to the zero margin? Code: <html>
<head>
<style>
<!--
p.Standard
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level1
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level2
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:1cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
-->
</style>
</head>
<body lang=EN-AU link=blue vlink=blue style='tab-interval:36.0pt'>
<li class=Level1>This is a list item</li>
<li class=Level2>This is indented</li>
<p class=Standard>I want this back with zero margin</p>
</body>
</html>
How do I get the selected item from a select option list? I dont need the value I need the text associated with the value. I can get the value with (in vbscript): strValue = .mylist.value Have searched google exhaustively to see how to do this simple thing but have found nothing. Thanks. Hi there, I was wondering if anyone knows how to centre an image link in another frame (yes I know frames are bad but its an old website I am updating) i have <a href="picturelink" target="mainframe"> <img src="thumbnail" border="0"></a> I have tried everything from class="center" to editing the original frameset and the original page loaded into the window but I can't get the jpeg file to load up centred and so I was hoping someone might be able to help as I don't want to link all the pictures to seperate html documents with only a centred image in... Thanks for any help. Hey. I have a frame and inside it there is a link. I want it to target an anchor called Code: <a name="anchor"></a> that is INSIDE it's own frame. I tried Code: <a href="#anchor"> but it tries to reload the entire page, and doesn't just "jump" to the anchor like it normally would. How do I do this? Thanks Hi! I am using Dreamweaver 8 to develope my site. I have broken the page in three pieces(frames) So that the top frame shows the title, the left frame is for links that I want to show as flash movies in the right frame. I have studied the help file and I have looked on the web and I can't find an explanation that I can understand on how to do this. I believe the clickable link should be an href but I don't know how to code it. Can someone explain this to me? Thanks in Advance! Paul Reference: http://test2.tarashryniw.com I have the following the css code: HTML Code: .tab-text a:link {
text-decoration: none;
color: #000;
}
.tab-text a:visited {
text-decoration: none;
color: #000;
}
.tab-text a:active {
text-decoration: none;
color: #adcce8;
}
.tab-text a:hover {
text-decoration: none;
color: #000;
}
This code is for the links in the tabbed menubar. a:active should be a bluish color, and it's my understanding that if you're on the page for which that link is then a:active should apply. Well go to a few different pages, the link colors don't change. Why? Css document this code is in is css/default.css. Thanks for the help! Hi there, When running a website from my Hard Drive or CD, the Active X message pops up, saying: "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options..." I know that if you disable the Windows security, this message goes away. I would like this message to not pop up regardless of your security settings... much like the format /y command in the good ol' DOS days. Is there a command that will force the computer to accept the page without user intervention? Thanks in advance! I Hello. I am having a tough time fixing this problem I'm having. I am creating a site using web expression 2. So far, everything is working fine, except for a couple of browser issues regarding active x controls. When I open the site on firefox, which from what I've read, doesn't use active x controls, everything loads fine. But, when I open the site on IE, the latest IE8, contents of my site aren't displayed properly due to blocked active x controls. How and what can I change in my code so that people viewing my site in IE8 can see it normally? Here is the source code and css: Code: <!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 content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Facpros</title> <link rel="stylesheet" type =" text/css" href="1css.css"/> </head> <body> <script type =" text/javascript"> //code for showing/hiding div dropdown comming soon </script> <div class="head" > <div id="Navigation" style="left: 313px; top: 244px" > <ul class="nav" > <li class="notparent"><a href="location"><span>Home</span></a></li> <li class="notparent"><a href="location"><span>About Us</span></a></li> <li class="notparent"><a href="location"><span>Contact Us</span></a></li> <li class="notparent"><a href="location"><span>Leadership</span></a></li> <li class="notparent" ><a href="location"><span>Events</span></a></li> <li class="notparent"><a href="location"><span>Our Members</span></a></li> <li class="notparent"><a href="location"><span>Inquiry</span></a></li> <li class="parent"><a href="location"><span>Language</span></a></li> </ul> </div> </div> <div class ="body" > </div> <div class ="foot"> </div> </body> </html> Code: body{
background-color:gray;
background-image:url('backgroundimg.png');
}
p{
font-family:Copperplate33bc;
}
ul.nav{
font-family:Copperplate33bc;
list-style:none;
padding: 0;
margin: 0; font-size:14px;
height:29px;
}
div.head{
top:0px;
background-color:maroon;
height: 275px;
width: 1000px;
margin-left:auto;
margin-right:auto;
}
div.body{
background-color:teal;
height:600px;
width: 1000px;
margin-left:auto;
margin-right:auto;
}
div.foot{
background-color:black;
height:100px;
width: 1000px;
margin-left:auto;
margin-right:auto;
}
li.notparent{
}
li.parent{
}
a:link{
text-decoration:none;color:black;
}
a:hover{
color:white;
}
#Navigation{
width:723px;;position:relative;
}
#Navigation li
{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:5px;
padding-right:5px;
width:auto;
height:29px;
line-height:3em;
}
Hi there, I`ve been doing some programming in java and delphi, but now its time for me to try to learn some html/css, and later some php. Anyways, I`m making this test site, where the meny consists of 4 text elements, all containing a href: <a href="foto.html" target="myFrame" id="menu_items">foto</a>; I`m using an external .css file to controll the graphics of the site, and there I have edited the a:visited, hover, active... When I click on one of the menu items, the color changes, as when I hover too. But I would like the first element of my menu, home, to be active when the page loads. How can I do this? Hope you understand my question. Thanks in advance! EDIT: Ok, there has to be an easy answer to this one, so maybe I just didn't explain my problem good enough. =) When I enter the page for the first time (after writing the adress in the adressbar and clicking "GO"), the page loads, and shows the "home" section. My page contains the site-logo, menu, and an iframe which shows the pages (home, foto, contact, and so on) as html files included in the site. As a default, it loads with the home.html in the iframe, and therefor the text "home" in the menu wont change color to the active color, which I set in the external .css file. But when I click on either of the menu items now, after loading the page, it changes color and works fine. What I want, is to set the "home" text in the meny to the active color (or in the active state) when the page is loaded. Sorry for any bad english, doing my best. And again, thanks using IE7 this is fine but in IE6 not so much. we have a page where we have a javascript function which can sort columns when the user presses an html hyperlink. This is fine but in IE6, when you click on a link, it seems to also highlight the oher links as purple (visited) when this is not true. how can we stop it from doing this and what about "resetting" it back to the default blue color when the page is navigated to again? Thanks when I preview my website a active x bar shows up and another thing is that my pictures are not showing. What can I do? Is there any way to embed windows media video into html without using active-x. This would be for a computer without administrative priveledges (unable to download active-x components) to view video through an html interface. I can only think of using a direct link to the file, which would require the player to be used externally. I think any embedded call up of the player will need to use embed or object tags, which need active-x (as far as I can tell, and my testing has shown) Any light shone on this black math would be greatly appreciated-- Thanks, Tim |
|||||||