|
HTML - Nav Menu Effect - Making It Stay Active After The Click
Im making a nav menu for my Wordpress page. I made it with PNG sprite and with some jquery hover effects.
I deliberately made the menu with PNG sprites, because the menu is static, no new categories will be added to it so I figured I'll do it with png. What I want to do is to make the menu item stay in the hover state after the click - that way the user can see on what part of the website he currently is. Code: <ul id="navigation">
<li ><a class="aa" href="test1.html"></a></li>
<li ><a class="bb" href="test2.html"></a></li>
<li ><a class="cc" href="test3.html"></a></li>
<li ><a class="dd" href="test4.html"></a></li>
<li ><a class="ee" href="test5.html"></a></li>
<li ><a class="ff" href="test6.html"></a></li>
<li ><a class="gg" href="test7.html"></a></li>
</ul>
Code: #navigation li a { background-image:url(menu-a.png); display:block; }
.aa { background-position: 0px 0; height: 38px; width: 108px; margin-left: 16px; }
.bb { background-position: -108px 0; height: 38px; width: 110px; }
.cc { background-position: -218px 0; height: 38px; width: 116px; }
.dd { background-position: -334px 0; height: 38px; width: 158px;}
.ee { background-position: -492px 0; height: 38px; width: 104px; }
.ff { background-position: -595px 0; height: 38px; width: 141px;}
.gg { background-position: -736px 0; height: 38px; width: 78px; }
#navigation a .hover { background:url(menu-a.png) no-repeat; display: block; opacity: 0; position: relative; top: 0px; left: 0; height: 100%; width: 100%; }
#navigation a.aa .hover { background-position:0px -38px; width:108px; height:38px; }
#navigation a.bb .hover { background-position:-108px -38px; width:110px; height:38px; }
#navigation a.cc .hover { background-position:-218px -38px; width:116px; height:38px; }
#navigation a.dd .hover { background-position:-334px -38px; width:158px; height:38px; }
#navigation a.ee .hover { background-position:-492px -38px; width:104px; height:38px; }
#navigation a.ff .hover { background-position:-595px -38px; width:141px; height:38px; }
#navigation a.gg .hover { background-position:-736px -38px; width:78px; height:38px; }
This is as far as I've got. The menu works, hovers correctly etc. But how do I make the hover effect for "aa" stay active when the visitor lands on test1.html page, "bb" for test2.html etc.? Thanks! Similar TutorialsHi there, Not sure if this is HTML or CSS - I've got a <ul> menu that I've set up and it's changing nicely in colour when you mouseover (using a:hover etc.) I've seen a few menus though where if you click on home, it loads home and that option stays a different colour to show you what page you're currently on.. any ideas? Hi all, If you go to http://kvc.dk/CTC7/index.htm Press "ctc-info" in the top menu you goes to a page with an iframe and links on top. When you press these links i want the current link to stay active until you press on another link. I have tried this: http://forums.htmlhelp.com/index.php...ndpost&p=38645 But i cant get it to work. Heres the code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/> <title>CTC</title> <link rel="stylesheet" type="text/css" href="../stylesheet.css"/> </head> <body> <table border="0" width="950" cellspacing="0" cellpadding="0" height="500"> <tr> <td align="right" bgcolor="#000000" valign="top" style="padding-right: 10px; padding-top: 70px" background="../images/Frontimages/ombygning.jpg"> <table border="0" width="500" cellspacing="0" cellpadding="0" > <tr> <td style="border: 2px solid #FFFFFF"> <table border="0" width="100%" cellspacing="0" cellpadding="0" background="../images/hvidbg.png" > <tr> <td style="padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:14px"> <a target="menu" href="Text/CTCinfo/omctc.htm">Om CTC</a> | <a target="menu" href="Text/CTCinfo/ansatte.htm">Ansatte</a> | <a target="menu" href="Text/CTCinfo/samarbejdspartnere.htm">Samarbejdspartnere</a> | <a target="menu" href="Text/CTCinfo/dopingpolitik.htm">Dopingpolitik</a> | <a target="menu" href="Text/CTCinfo/job.htm">Job</a> | </font><a target="menu" href="Text/CTCinfo/downloads.htm"> Downloads</a></td> </tr> <tr> <td> <iframe name="menu" src="Text/CTCinfo/omctc.htm" width="500" height="329" frameborder="0" allowtransparency="true" background-color="transparent"></iframe> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> hello everyone. I'm a newbie at this HTML stuff. I've made my first webpage and everything is working fine. I added some .SWF files and placed them where I wanted using <div> coding. My problem is whenever you resize the browser window, the flash movies move with it, they "float" over the rest of the page. How do I make them stay static when you resize the window? Could someone please help me with this problem? I appreciate it very much. I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> Code: #menu {
background: #3f8cc5;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 100% "Arial";
font-weight: bold;
margin: 0;
padding: 0;
}
#menu li.right {
margin-top:3px;
float: right;
}
#menu a {
background: #3f8cc5;
color: #ffffff;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #cdc8b2 url("...") bottom center no-repeat;
color: #0066CC;
padding-bottom: 8px;
<ul id='menu'>
<li><a href='#' title='Home'>Home</a></li>
<li><a href='#' title='Season 1'>Season 1</a></li>
<li><a href='#' title='Season 2'>Season 2</a></li>
<li><a href='#' title='Season 3'>Season 3</a></li>
<li class='right'>
.....
</li>
****** Drown Down Tab here ******
</ul>
I'd like to be able to transform this menu into a drop down menu. I tried different things and read guides but I cant seem to understand. I'll be really happy if someone could tell me what I need into the css part Hello! My name is David Hogberg, and I'm working with websites. I wounder if someone can help me with this since I dont know how to do that, I want an dropdown menu like facebooks button and when you click on it you can log out and so and the menu is still there when you have your mouse somewere else, and when you click somewere else on the page, dont need to be a link, it goes away. How can you do that? I already made images of the button, one when its normal, one when you have mouse over when its flashes and one who is white with black button. How can I do this? I have searched alot on youtube and google but cant find something similar.. Please help me! Hi all, I created a very simple Spry menubar using dreamweaver. It copied all the necessary CSS and JS into a folder for me. I have one question. whenever i selected (clicked) on an item(link) on the submenu. the submenu stays open while the page load in the frame. Is there a way to configure it so when i click on an item in the submenu, the submenu will close and the page will still load in the frame? Hello lady's and gentelmen.. I have a really short question (almost so small it's not even worth waste a whole thread on it!) But, here it goes When I go to my homepage: www.sp34k.dk and maybe select "blog", then I can see the link "www.sp34k.dk/blog.htm" and if it go to billeder (picture) then its www.sp34k.dk/billeder.htm. Are there any possibility for that I can do such it dosent change? So it would ALWAYS stay as "www.sp34k.dk"? Kind regards Mike Bertelsen Denmark I have listed items inside a div that display just find in FF v3.0.1, but not in IE v7. Here is the link to my page. http://web.missouri.edu/~mdsybf/ Here is the CSS of a class div that surrounds the previously mentioned div. .MainEdit { clear:both; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; text-decoration: none; float: left; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; padding-top: 10px; margin-left: 10px; width: 700px; clear: right; display: inline; vertical-align: top; height: auto; } What is wrong with my code that makes the listed items appear outside the div box? Hi there, I am currently making an iPhone/Touch website, and would like to know how I can make it so the top banner stays at the top, while the main body of the site scrolls up and down below it. Can you help? Josh I'm using NVU. I've got code that was generated by Omnipage - it is full of boxes and divs and spans which I don't understand yet. Anyway I'm doing alright except when I put a line of links (forward,back,index,main) in at the bottom of each of these pages, above the bottom-of-the-page 'credits', I find I can't keep them separate. I put a few carriage returns in and there's some clear space - four or five lines or more - between them. I save the file, close the file, pick the file up again and look at it and they've closed up again! Dreamweaver doesn't seem to be able to sort it out, either. You can see the pages and their code at mbccc.net and follow the 'parent information' link. regards, ab hi i have built two pages using DW, an INDEX page and a FORM page. They both contain divs. I want to have the FORM page appear in the MAIN CONTENT div of the INDEX page. I got that to work, however the problem is the Form itself does not stay in the Div it is placed in, it floats out under the DIv and on top of other content. thanks for the help - my code is too long to post in one thread - will post the index code in part two here is the FORM code: 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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
}
img {
}
h1 {
}
h2 {
}
h3 {
}
#retailWrapper {
height: 540px;
width: 980px;
}
#retailWrapper #retailHeader {
height: 50px;
width: 980px;
float: left;
}
#retailWrapper #leftImage {
float: left;
margin-top: 10px;
clear: none;
}
#retailWrapper #form {
height: 400px;
width: 680px;
margin-top: 10px;
padding-top: 10px;
float: left;
}
.style1 {font-family: Arial, Helvetica, sans-serif}
.style19 {font-size: 12px}
.style21 {font-size: 16px}
.style23 {color: #000000}
.style25 {color: #FFFFFF}
.style27 {color: #BEBEBE}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }
.style30 {font-size: 14px}
.style31 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
-->
</style>
</head>
<body>
<div id="retailWrapper">
<div id="retailHeader"><img src="_Art Files/newRetailerInq.gif" width="980" height="51" /></div>
<div id="leftImage"><img src="_images/_galleryImages/retailDisplay.jpg" width="200" height="480" /></div>
<div id="form">
<form id="form1" name="form1" method="post" action="">
<table width="51%" align="center" cellpadding="8" cellspacing="6">
<tr>
<td width="131"><div align="right" class="style29">
<label for="name">Name:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="name" id="name" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="storeName">Store Name:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="storeName" id="storeName" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="addressLine1">Address Line 1:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="addressLine1" id="addressLine1" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="addressLine2">Address Line 2:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="addressLine2" id="addressLine2" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="city">City:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="city" id="city" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="state">State:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="state" id="state" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="zip">Zip:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="zip" id="zip" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="email">Email:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="email" id="email" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="phone">Phone:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="phone" id="phone" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="comments">Comments:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<textarea name="comments" rows="4" id="comments"></textarea>
</div></td>
</tr>
<tr>
<td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td>
<td width="196"><div align="left" class="style31">
<input type="checkbox" name="subscribe" id="subscribe" />
<label for="subscribe">Subscribe newsletter</label>
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Reset Form" />
</div></td>
<td width="196"><div align="left" class="style31">
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td>
<td width="196"><div align="left"><span class="style1"><span class="style21"><span class="style30"></span></span></span></div></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
For some reason when there is little content on the page, the layout doesn't remain centered. What can I do to fix this? Here is the link to my website: Check out the difference between about and knowledge http://www.organicgardencafe.com/about.php How do I make a table with a fixed width stay centered even if the browser window's horizontal size is smaller than the table's horizontal size? align="center" makes the table centered as long as the browser window is bigger than the table. If the browser window is smaller, the table will be cropped on the right size only, not on both size. I would like to do this to have a table with a fixed width and a background image, so that no horizontal scrolling bar appears if the screen resolution if too small for the table. The image should howerver stay centered no matter what the windows size is. Thanks. I'm working on my new site and my next step is to figure out how to make a cell stretch to the width of a page regardless of the size. I'm not sure what this is called. Here is the site. Let's just use the yellow menu bar for an example. I need to make it stretch to the right of the page. http://C-41productions.com/C-41_2008 Thanks so much. Hi Guys, How can i make my footer stay at the bottom of the page so when the user holds down ctrl and zooms out i want to the footer to stick to the bottom of the screen, i have done this before but i cant remember for the life of me and its actually killing me know can someone put me out of my misery please. heres the HTML and CSS its called BottomBanner HTML Code: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!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 runat="server">
<title>Vodafone One Net Express</title>
<style type="text/css">
body{background: none repeat scroll 0 0 #F4F4F4; margin:0px !important; padding:0px !important;}
.PageSetter{margin-left:auto; margin-right:auto; margin-top:-2.3%; background: none repeat scroll 0 0 #F4F4F4; position:relative; }
.TopBanner{background-color:#C51906; width:100%;height:80px;}
.TopBanner h1{font-size:2.7em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;}
.BottomBanner{background-color:#C51906; width:100%;height:80px; margin-bottom:-0.1% !IMPORTANT}
.BottomBanner h1{font-size:2.3em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;}
.IframeContiner{width:980px; margin-left:auto; margin-right:auto; margin-top:10px}
.IframeStyle{Width:982px; height:1000px; border:0px}
</style>
</head>
<body>
<div class="PageSetter">
<div class="TopBanner">
<h1>
Vodafone One Net Express
</h1>
</div>
<div class="IframeContiner">
<iframe scrolling="auto" class="IframeStyle" src="http://www.telegraph.co.uk/finance/yourbusiness/businesstechnology/9209385/Review-Vodafone-One-Net-Express.html">
</iframe>
</div>
</div>
<div class="BottomBanner">
<h1>
Call Now 0800 1980 000
</h1>
</div>
</body>
</html>
Can someone show me how to make a background stay still when you scroll up and down the page? I am having a very frustrating issue that seems to have crept up over the last month or so. This problem did not exist on my site before, but it certainly exists now. Whenever I resize IE6 or IE7, the Google Ads I use on my site stay in place instead of following the browser resize shift. Needless to say, this makes the site look horrible when someone resizes their browser. And the real kicker is I haven't changed this section of code in months and now its suddenly not working. However, I have started using some other ads that use an <iframe> tag, and those ads do not have this issue. I know that Google uses javascript to serve the ads. Could there be some strange interaction between my code and Google's code? Has anyone else run into this? If so, how did you solve it? Here is a sample of my code that has this problem: Code: <div id="adPad"> <div class="floatArea1" style="margin:0 5px 0 0;"> <div class="noBorder"> <a href = "URL"><img src="img/image.png" alt="ALT" width="x" height="y"/></a> </div> </div> <div class="floatArea1" style="width:728px; height: 92px; margin: 0 0 5px 0;"> GOOGLE AD GOES HERE </div> </div> relevant CSS: Code: #adPad{width:955px; padding:5px;}
.floatArea1{
float:left;
margin-left: 10px;
font-weight: normal;
width: auto;
padding: 0px;
display: inline;
overflow: hidden;
}
.noBorder {
float: left;
width:auto;
}
.noBorder img {
border: 0px;
/*width: 312px;
height: 90px;*/
overflow: hidden;
}
Any help on this is greatly appreciated! Thanks! Hope the title made sense, I am using Microsoft Expression Web and, I am also using Frames on my website. I have 3 Frames, One complete at the top, one on the left side and then a main page frame to fill the rest. I am using a 19" wide screen monitor, and because of that the pages I make are all unaligned with each other as they get stretched to fill the monitor. now the top frame and left frame stay where they should I have done that, but I can't keep the main page frame from moving over to the right and making everything look untidy and nasty. so could anyone help me out with this problem please, I use a background Image, text and images on the page so they all need to stay centered bu to the left of the page. Or maybe center all the frames to the middle of the screen such as www.myspace.com looks on a wide screen monitor (although i know they do not use frames.) Thanks in advance |
|||||||