|
HTML - Drop Down Menu Formatting Problem
I'm trying to center the drop menu x horizontal code from the following url:
http://www.gosu.pl/MyGosuMenu/ The problem is every time I center it all browsers except Internet Explorer mess up when you try to resize the window. For example in Firefox if you center the drop down menu and hover your mouse over the drop down menu it will line up but then if resize the Firefox window and hover your mouse over the drop down menu again the drop down options will not line up. For centering I've tried centering with CSS and using the <center> tag and both ways cause this same problem. Any help with this would be appreciated. Thanks, Jeff Similar TutorialsHello, I'm working on website and I want to use spry drop down menu bar and I have trouble with it. This is how I want it to be like : When menu is active(rollover hover), it turns darker blue from light blue, and the submenu is same light blue when its not active, but it turns to pink when its active. By far, what I got is : When I roll over submenu, the color is not different from the menu unless the submenus has subsubmenu.... (its orange, but I'm gonna change to pink) like this: It is kinda hard to explain.. but I hope you understood. Thank you very much! --------- here is code : I didn't make any change for the upper part, and this is only part that I made changes. and I only changed colors. --------- } ul.MenuBarHorizontal a{ display: block; cursor: pointer; background-color: #33CCFF; padding: 0.5em 0.75em; color: #FFFFFF; text-decoration: none; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #336699; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #FF3366; i have this particular drop down menu in a wordpress PHP sidebar template, but i cant get it to execute once an option is selected. when i had this in another PHP page through a DW library item, it would execute just fine. here is the code... Code: <form name="guideform" id="guideform" action="#"> <select name="guidelinks" id="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <option selected value="#">default</option> <option value="option 1 url">option 1</option> <option value="option 2 url">option 2</option> <option value="option 3 url">option 3</option> </select> </form> can someone tell me why this would work on one PHP page and not another? heres where i have the element in place on the page... http://flyerflies.com/blog also, another question...how can i adjust the width of the display pane once the menu is opened? in FF, it opens to show all of the contents, but in IE (surprise, surprise) it only opens to the same width as the default text display in the unopened drop down box. Hi, I was wondering if someone could help me... I made a drop down menu using fireworks for the site http://www.lakehillsca.org/ and the menu works perfectly in IE. But when viewing the site in firefox, the menu positioning isn't right. The menu uses javascript, but I'm pretty sure it isn't a javascript issue. Is there anyone out there that can figure this out??? Thanks for your time. -Chris I'm trying to build a horizontal menu that has tabs. Basically it's a horizontal 5px line with the inactive links/tabs upside down hanging from the line, and the active page having the tab above the line. But I'm having a heck of a time getting the css to work on the one tab on top (contact link shown here). Anyone have any ideas how I can accomplish this? You can see my css attempt below. Thanks!! Code: #menu
{
width: 490px;
height: 20px;
padding-left: 300px;
padding-top: 72px;
border-bottom: 5px solid #b8ac85;
}
#menu.down
{
width: 490px;
height: 20px;
padding-left: 300px;
padding-top: 92px;
border-bottom: 5px solid #b8ac85;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu.up ul {
list-style: none;
padding-top:40px;
}
#menu.up li {
display: inline;
padding-top:-40px;
}
#menu a {
float: left;
width: 84px;
height: 20px;
display: block;
text-align: center;
text-decoration: none;
color: #663300;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
padding-top: 5px;
background: url(images/button_down.gif) no-repeat;
}
#menu a:hover {
width: 84px;
height: 20px;
padding-top: 5px;
color: #FFffff;
text-decoration: underline;
}
#menu a.up:link {
float: left;
width: 84px;
height: 20px;
display: block;
text-align: center;
text-decoration: none;
color: #663300;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
padding-top: 5px;
background: url(images/button_up.gif) no-repeat;
}
#menu a.up:hover {
width: 84px;
height: 20px;
padding-top: 5px;
color: #FFffff;
text-decoration: underline;
}
Hi I wonder can anyone help with this problem I'm having. I have created a two column table with images in the left column and bulleted text in the right column. I have six images one after the other down the page. This displayed perfectly in firefox but when I checked Internet Explorer, The text is greatly indented from the table cell margin and looks all wrong. Can I format this somehow to display properly in IE. Hi, I've been struggling with a formatting difference between IE & Firefox. I'd be really grateful if someone would be able to advise me what I'm doing wrong. URL : http://www.demoncraft.com/helpdesk/ticket.html Any help would be appreciated JON Is there a way to have my 'website' display the website description directly to the right of the navigational buttons?? Right now my website is displaying the website description directly under the navigational buttons to the right and I want it to display the website description on the same line as the navigational button.... Here is my code: Code: <HTML> <head> <body style="background-color:black"> <title>Zahn Logics</title> <h1 style="text-align:center; color:#ffffff"><u>Zahn Logics</u></h1> <table border="1" width="15%" cellpadding="0"> <td bgcolor="#ffffff" style="text-align:center"> <a href="http://www.zahnlogics.com/philosphy" style="color:red;font-size:20px"> Philosophical Ideas</a> <br /> </td> </table> <table border=1" width="15%" cellpadding="0"> <td bgcolor="#ffffff" style="text-align:center"> <a href="http://www.zahnlogics.com/movie_reviews" style="color:red;font-size:20px"> Movie Reviews</a> <br /> </td> </table> <table border="1" width="15%" cellpadding="0"> <td bgcolor="#ffffff" style="text-align:center"> <a href="http://www.zahnlogics.com/music_reviews" style="color:red;font-size:20px"> Music Reviews</a> <br /> </td> </table> <table border="1" width="15%" cellpadding="0"> <td bgcolor="#ffffff" style="text-align:center"> <a href="http://www.zahnlogics.com/quotes" style="color:red;font-size:20px"> Quotes</a> <br /> </td> </table> <center><table border="1" width="30%" cellpadding="5"> <td bgcolor="#ffffff" style="text-align:center"> <p style="align:center">This website will include philophical idea's, music reviews, movies reviews, funny sotries, and much more! Please visit the site for frequent updates and changes. There is a lot for you to learn and a lot for me to teach, and a lot for me to learn and a lot that YOU can teach!</p> </td> </table></center> </body> </head> </HTML> any help will be appreciated, thanks! Just like everyone else is seeming to have lately, I am apparently one of those lucky people anyways i am having a problem positioning my whole page between browsers. It works just how i want it in firefox (centered kind of), but in ie6, and ie7 its all scrunched to the left. anyways the link to my site is: http://uberwalla.110mb.com It would be greatly appreciated for some help also help on any other browser there might be problems with would be great. If anyone has safari, netscape and opera i mean. to help me format my template. well thanks a bunch! - uberwalla Hi, I have developed a website and used Internet Explorer to view it when making it. However, when I load the pages in firefox it is not formatted the same - why is this? Doesn't firefox recognise certain html and css tags? How can I fix this if I want the website to be viewed the same in Firefox? I want to create a drop down bar using images, like the one on this page: http://www.teamtalk.com/ I already have the images which I want to use. I have scoured the internet for how to do it and tried many, many tutorials but I don't understand how to do it. Please help! Hello im looking for a script for my website that offers the following I have an image link, that I want to rollover to another image (Of the text glowing) then have a drop down menu pop up below it that can have other menus drop down from that one.) Right now Im trying a Javascript that I found for free on the internet but i cant seem to get it working. http://javascript-array.com/scripts/...rop_down_menu/ But I cant get it to be a rollover image instead of a text box. and it doesnt support multiple drop downs like this one: http://javascript-array.com/scripts/..._down_menu/?sb plus they want you to pay for it, and im looking for a free solution. Any help appreciated, thanks. So, I am new to html, but I want my site to have a drop down menu, much like that of IBM's. http://www.ibm.com/us/en/sandbox/ver2/ Is this even possible with HTML? If so, where do I start? Regards, YahtzeeFish Hi All, This is my first post so please be kind I am currently trying to create 3 drop down menus in a top frame going across the top of the page. This is my first time trying to do anything like this and have run into a few issues i cant get my head around nor find an answer on the net. The code i have so far is this: _______________________________________________________________ <HTML> <HEAD> <TITLE> Test</TITLE> <BODY> </BODY> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> </HEAD> <div align="center"> <table border="1" cellpadding="4" width=500> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> </HTML> _______________________________________________________________ 1) When selecting 'User Manuals' on the drop down box, it opens up a new window and directs me back to the home page? 2) i am unsure as to how you place the drop down boxes side by side aligned at the top of the page? Is anyone able to help me out here? Cheers in advance Id like to do a drop down menu similar to there's... is there any simple way of doing this?! Good day guys... is there anyone who can share about drop down menu's I have the following drop down menu. HTML Code: <form> <select name="menu" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value="no link no action">title of menu</option> <option value="url 1">link 1</option> <option value="url 2">link 2</option> <option value="url 3">link 3</option> <option value="url 4">link 4</option> </select> <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> </form> Here is a screen capture of what the menu looks like. It's at this point I want no action to take place when "go" is clicked. As it is now (above code) it refreshes current page. My question is how do I change this so that the first "option" has no action when chosen and then "go" is clicked. As is is right now it refreshes the current page being that between the quotes <option value=" HERE ">title of menu</option> there isn't a link because I don't want this option to do anything. Basically when the drop down menu shows "title of menu" and I click on "go" I want nothing to happen instead of a refresh. Hi All! I would like to make a drop down box with all the departments of my company. Basically the user would select a dept and without refreshing or opening a new page the information would appear below. I have seen this before using a database but is there a way to do it without? Dear HTML Experts, I need your help, I would love to have a dropdown menu. Which drop out of a image? Like when your mouse is at the image, the menu shows up vertically? Thanks Hey guys, I need help making a drop down menu. I know how to make a basic one, but this is what I need... I want to have 4 drop down menus, with about 4 choices in each one. Under them I need a 'Submit" button. Basically, I need it so that any combination of the 4 choices in the 4 menus will open a specific page. For instance, lets say in menu 1 I pick the word "cat". In menu 2, I pick the word "dog". In menu 3 I pick the word "car". In menu 4 I pick the word "tree". Once I click submit, a page with a picture of a cat, dog, tree and car would open up. (I would provide all the possible different pictures). So how would one do this? Any help is GREATLY appreciated, thanks! Hi all, I can't for the life of me get the submenus to work. Here is my basic code and style sheet. How and where do I get a sub menu working on the navigation to display when you hover over it. I.E. hovering over 'News' displays sub menu of 'today', 'tomorrow'... |
|||||||