HTML - Menu Stay Active On Click
Hi 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? Similar TutorialsIm 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! 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> 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> 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? 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? 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 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 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 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 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! 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> 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. 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 Hi, I have a framed page, two frames, a small top frame with a drop-down menu, the drop down menu are links to external pages, the external links are displayed within the lower frame. I have everything set up and working fine, but then I had to find a little "snag"...(of course) When I browse within the lower window (clicking links on the pages displayed in the lower window) some links override my frames and open up on top of my framed site. So my question is: Is there a way to make my frames "absolute" (stay on top nomatter what), that is, all links within the lower frame will be opened up within the frame and not on top? (bare in mind that these are external pages and I do not control the nature of the links such as target tags etc.) I have my code here... INDEX: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <frameset rows="35px,*" frameborder="0"> <frame name="menu" src="dropdown.html" scrolling="no" noresize> <frame name="content" src="blank.html"> </frameset> </HTML> DROPDOWN.HTML Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <base target="content"> <script language="javascript" type="text/javascript"> <!-- function menu_goto( menuform ) { var baseurl = "" ; selecteditem = menuform.newurl.selectedIndex ; newurl = menuform.newurl.options[ selecteditem ].value ; if (newurl.length != 0) { parent.content.location.href = baseurl + newurl ; } } //--> </script> </HEAD> <BODY topmargin="2" leftmargin="2"> <form action="dummyvalue"> <select name="newurl" onchange="menu_goto(this.form)"> <option value="" selected="selected">----- Choose a link -----</option> <option value="http://www.sitenumber1.com">first link</option> <option value="http://www.sitenumber2.com">second link</option> </select> </form> </BODY> </HTML> any suggestions? Can someone show me how to make a background stay still when you scroll up and down the page? 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. Hey everyone, I feel like this is a noob question, but I'm going to ask anyway. How do write my site so that my body stays in the same place and doesn't smash together when I manually resize my page? Any help is greatly appreciated. Thanks Hi, I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside. the fourth row of the table has three cells side by side that I use as the header design. 1) picture 2) space 3) title I want all these to have fixed widths and heights. underneath is a cell that spans the length of all three of those. This is where I want my content. 4) content The length of this stays fixed but the height changes as more content is addes. The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell. Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell. And this really messes up the nice spacing I had. Any thoughts on why this would happen??? I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help! Thanks so much, heres my code: [font="Courier New"] <body> <table width="875" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td> </tr> <tr align="center"> <td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666"> <h1 class="menu"> <ul> <li><a href="#" class="mainmenu">Home</a></li> <li><a href="#" class="mainmenu">Party in the Park</a></li> <li><a href="#" class="mainmenu">Info</a></li> </ul> </h1></td> </tr> <tr> <td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td> </tr> <tr align="left" valign="top"> <td width="190" rowspan="2"> <img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td> <td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td> <!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! --> <td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td> <td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td> <td width="370" height="275"> <p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party <br /> in the Park</strong></font><br /> <h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br /> <font color="#666666">DATE </font>Saturday, October 13 2008 <br /> <font color="#666666">TIME</font> From 8am until late afternoon<br /> <font color="#666666">INFO</font> Call 704.463.1308</h2></p> </td> </tr> <!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! --> <tr> <td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33> <img src="../images/10spacer.png" width="10" heigh="10"><br /> <h2 class="text">Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! </h2> <br /><img src="../images/25spacer.png"><br /> <p><h1 class="menu2">Features</h1></p> <p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p> <p><h1 class="menu2">Flyer</h1></p> <p><h1 class="menu2">Directions</h1></p> </td> </tr> <!-- And everything from here on out seems to be fine from what I can tell --> <tr> <td height="75" colspan="5"> </td> </tr> <tr> <td colspan="5" valign="top"><hr width="100%" padding-bottom="1px"> <div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td> </tr> </table> </body> thanks again for any help guys! |