|
HTML - Form With Multi Level Menus
Hi everyone,
I just started tinkering with HTML coding and have been bouncing around tutorial sites and the like trying to figure out how to achieve my goals. im trying to create a 3 framed page (easily done so far)...with a form to create a purchase order style form....(heres where i begin to struggle). i have found plenty of samples of code to get the elements of the form going, drop down menus, text input, submit form via email, ect. but what im trying to find now, and im hoping someone here can help me is this. i want to create either a multi-level drop down menu, OR, a dropdown menu that referres to the next menu. ill try to explain this better with an example.... sample content for first menu.... Bread Milk Cheese say for example you select bread..... next menu content will be dependant on the first menu's selection sample content for second menu, "Bread" selected..... Wholegrain White Wholmeal sample content for second menu "Milk" selected Full cream Low fat Long life....ect, ect. I have done plenty of searching but all i have found is stuff that is waaaaaay out of my league this early in the game, most of my searching has yielded results from javascript, flash and something called jquery. is there any way to do this without spending lots of coin on fancy programs? im just using good o'l notepad here Thanks for any assistance in this, and i do appologise if it has been covered before, perhaps i have not been using the correct key words in my searches. Similar TutorialsHi there I checked through a bunch of this forum but I can't find anything on this topic. If it's already been addressed, I'd be thankful if you could point me to the thread. If not, this is my problem.... I need to have 2 drop down menus in the same form, so that when the user clicks submit (OK in this case) both selected fields are posted.... Code: <form method="post" action="show.html">
<table>
<tr>
<td>Select a color</td>
<td><select name=color">
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="purple">purple</option>
<option value="blue">blue</option>
</select>
</td>
</tr>
<tr>
<td>Select a shape</td>
<td><select name=shape">
<option value="circle">circle</option>
<option value="square">square</option>
<option value="triangle">triangle</option>
<option value="hexagon">hexagon</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value=" OK "></td>
</tr>
</table>
</form>
This code displays the drop downs perfectly but only the color is being posted to show.html It's something small but I can't figure this one out. I'm not sure if you can even have 2 drop downs with 1 submit button. Any and all assistance is greatly appreciated! Perkie I've got a data entry form where a user optionally puts data in a couple sections. It's too big to fit on-screen, so currently it's a multi-column, spreadsheet-style form. First, before I even chase this and waste everybody's time, is using tabs a good way to make a form that'd otherwise scroll through multiple sections? To make it easier to use I'm thinking about using tabs. I've found a couple examples and can display the tabs fine, but I"m having trouble understanding how to do the interaction between the form and php. The list is a set of hrefs like <li><a href="abcdform.php">a</a></li> <li id="selected"><a href="#">b</a></li> I can see that the first li is going to jump to "abcdform.php", but what does the "#" in the second li do? I want this to be a single php file with the html in it and a single php file with all the code. How do I get php to know what tab was hit? I"m generating the table rows and data in the php so how do I get the right rows of data into the right tab section? I'm working on my site www.fastvacationrentals.com and I've been trying to find or deveolp (I don't know how hard this would be a word based text editor to add onto a text field. Such as the one they use on this site when we respond to messages. I don't know if there is a easy javascript, html, or php script out there that is free to use. I've tried to search for ones and have not had much luck. I only think I'm interested in ones that do not have advertisment shown. I did find a couple that looked just liked microsoft word in the text box with no tags added as this does then converts it all to html before it posts. Would have worked great if hadn't of cost anything/advertisments also. The other thing I'm having problems with is when people create listings they choose the location for where there cabin is at. States are easy but when you get to cities people spell things wrong and it doesn't look good in the results nor the search. I've seen sites where you select the state then it changes and shows all the cities there. Is this something I can get premade also for free. I know exactly how to make it but I also know that I wont be able to cover all the cities. Having all the correct cities names spelt the same would make my search work better with the database. Thanks for reading all of this and I hope someone has some good advice/answers. BTW I'm sorry you cant exactly see the form your working on since you have to be a user but I'm sure you'll know what I'm talking about and if you don't feel free to make a account and look around. Hello everybody, As you can see here http://arturbuchhorn.com/index.html the h2 element is displayed right alongside the navigation. What would be the best way to move the heading below the navigation? Thank you. PS: I would prefer a CSS solution if possible. The code is right he Code: /*
CSS for Un Buchhorn en route
*/
a:visited {
color: black;
}
#sitebranding a {
border: 3px solid white;
padding: 20px 10px 20px 10px;
}
#sitebranding a:hover {
background-color: #FFE4C4;
}
#tagline {
margin: 2em 0 1em 0;
}
#navigation {
}
#navigation ul li {
list-style-type: none;
float: left;
margin: 0px 5px 0px 0px;
}
#navigation ul li a {
background-color: #FFE4C4;
text-decoration: none;
border: black 1px solid;
border-bottom: none;
padding: 0 10px 2px 10px;
}
#navigation ul li a:hover {
background-color: #F5DEB3;
}
#navigation ul li a:visited {
}
#bodycontent {
}
body {
font-family: Calibri, Arial, Verdana, sans-serif;
background-color: #F5DEB3;
}
#essay {
text-align: justify;
margin: 0 15% 0 15%;
}
#worksList ul {
margin: 3em 0 3em 0;
}
#worksList ul li {
list-style-type: square;
line-height: 200%;
}
#worksList ul li a{
text-decoration: none;
}
#footnotes {
font-style: italic;
text-align: left;
}
h1 {
font-family: "Jayne Print";
font-size: 200%;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 125%;
font-weight: normal;
}
#footer p {
font-size: 60%;
font-family: Arial;
font-style: italic;
}
#adsense {
position: absolute;
right: 0;
top: 5%;
}
#pagedoesnotexist p {
margin: 20% 20% 20% 25%;
color: red;
font-size: 125%;
}
need help with my project! n have no idea wht to do.... have to make iq level test on FWP. 1. First in the form ppl will see do u want to check your iq level..yes or no. include options. 2. if user says no then program will be terminated 3. if user says yes then will be asked that plz log in if already a user..else plz register. 4. if user is already a member thn will be directed to the iq level page. 5. After registration user will be asked for id and password. 6. After the registration IQ test will be shown, if the answer is right thn it will be shown in green color, if its wrong thn red color will be shown. 7. After this users iq level will be shown in %. 8. N those who already took it will also be shown on the page n atlast it will say thx.'. i hope u will understand....wat i wrote...need help guys........plzzzzzzzzzzzzzz Hiyas, well I am trying to make an html website, and I got two things I trie to add to my page. One is a shoutbox using direct link code, and in the preview it displays fine, and works fine. Another is a teamspeak launcher I made, just a link and an image. I align one to the right the other to the left, and that works. The problem is, that the one on the right is level with the bottom of the shoutbox on the left, whereas I want them to be a part of two side columns eventually, where they are both the same length etc, not all uneven. Here is my preview page: http://i116.photobucket.com/albums/o...Untitled-1.gif I hope you see what I mean. Please help me, as I need this website online ASAP cos me and my clan are going to some tournaments and seriously need this online. Thanks in advance, Ferinos I am trying to add a popup menu to a button on my header that will have two options. I added a hotspot to the button image in Fireworks and made the menu etc, but when I place it in my html page nothing happens. Below is the line of code that displays my button. <a onmouseover="image2.src ='images/Header/OurServices_On.png';" onmouseout="image2.src='images/Header/OurServices_Off.png';" href="OurServicesIndivid.htm" target="_top"><img src="images/Header/OurServices_Off.png" name="image2" width="129" height="22" border="0"></a></TD> PS The button image is 'OurServices_On' or "OurServices_Off", basically the "On" button is shaded darker and it will apear when you hover over it. On a secondary note, I tried to add a popup menu with the dreamworks hotspot tool. I can add the hotspot fine, but everytime I hit "Ok" on the add-popupmenu dialog box, I get a error that states the following. Anyone know the answer to either of these problems? I am a asp.net developer and I have a customer which needs a page written in stictly html. I am not that familar with html anymore, so please bare with me. Last time I did html and used vertical menus, every page had to duplicate the menu code, instead of calling a page or control which holds the menus. Is there a way to have a inbedded html page (which is the page that hold the menus) in all the pages. This way, when I want to add a new menui tem. I don't have modify everypage, I can modify just the menu page. Is this possible in html without using frames? Any help would be appreciated. Thank you, Brandon Ok, I've managed to get my drop down menu relatively sorted. The final version will have significantly more options, but for editing purposes each only has 2 options right now. With my limited HTML knowledge, I've managed to get all the boxes lined up left, and in the right order and the such, but there are still a few things I would like this menu to do before it is finished, and I have no idea how to do them. Hopefully someone can help This is what I have at the moment: Quote: <html> <body> <div align="left"> <select name="QB"> <option value="QB">Player A - 80</option> <option value="QB">Player B - 65</option> </select> <select name="RB1"> <option value="RB1">Player C - 64</option> <option value="RB1">Player D - 42</option> </select> <select name="RB2"> <option value="RB2">Player C - 64</option> <option value="RB2">Player D - 42</option> </select> <select name="WR1"> <option value="WR1">Player E - 35</option> <option value="WR1">Player F - 32</option> </select> <select name="WR2"> <option value="WR2">Player E - 35</option> <option value="WR2">Player F - 32</option> </select> <select name="TE"> <option value="TE">Player G - 37</option> <option value="TE">Player H - 29</option> </select> <select name="K"> <option value="K">Player I - 20</option> <option value="K">Player J - 18</option> </select> <select name="DST"> <option value="DST">Team A - 35</option> <option value="DST">Team B - 33</option> </select> </div> </body> </html> That does what I want, could be hideously wordy and untidy in the code, idk, but it works lol What I would like instruction on are the folloing steps if possible: 1) I would like a small box to the left of each drop down menu that remains the same. For example, I'd like a box that says "QB" then to the right of it immediately is the QB drop down menu. A bit like <TH> function works on a table I believe? I just have no idea how to put it into the code so it doesn't throw it all over the place 2) Some positions, like the RB and WR, have 2 positions. However, both drop down box player lists will be the same. Is there any way to stop WR1 and WR2 from being the same player? A player can't be used more than once, so is there a way to make sure the player in each box is never the same? 3) As you can see, each player has a value. At the moment, the player and the value are one constant line of text "Player A - 80". What I'd really like is for this to be split, so that a running team unit total can be kept at the bottom. That way a user will be able to see the total unit value of their team, and it will alter as they alter their line up. I'm sure the player value somehow needs to be its own specific bit of code for this to happen, it can't be coupled with a players name, but I've no idea how to do this either. I really hope someone can help me out here, would be of great use to me. All I need are some pointers and I'll try and work my way through it as best I can. Thanks, you guys are great Hi, Is there any way to make the "standard" pull down menu that is predefined in html (the pull down form that front page provides) function with links to different pages WITHOUT USING JAVASCRIPT. I am using sharepoint that has security that blocks links that use scripting. Or, is there any way to use this pull down menu with javascript in sharepoint without a popup blocker interviening? Any help or suggestions much appreciated. thanks, joe sal Hi, I use the following HTML for a horizontal navbar: <div align="center"> <p class="navbar" align="center"> | <a class="navbar" href="index.html">Home</a> | <a class="navbar" href="events.htm">Events</a> | <a class="navbar" href="testimonies.htm">Testimonies</a> | <a class="navbar" href="about.htm">About Us</a> | <a class="navbar" href="contact.htm">Contact</a> | </p> </div> with this in the style sheet .navbar { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-decoration:none; color: #ffffff; background-color:#993300 } a.navbar:active { color: #ff00ff; } a.navbar:visited { color: #ffffff; } a.navbar:link { color: #ffffff; } a.navbar:hover { color: #993300; background-color: #ffffff; } But inspecting the code for various web sites it seems that people use the list tag <li>for horizontal menus. However as I can’t see the relevant CSS I don’t understand how it works, and I'm fairly new to CSS anyway (& I got this code from a manual). Should I be using list tags and how does it link with the style sheet? If so, can anyone explain what the code should be or point me to a good tutorial on the topic. Thanks I am trying to create menu based website for cars, how to I limit a menu to include only the models for a certain make. If ford is selected I want to be able to select mustang, taurus and f150, but not accord, because accord is made by honda. I am using Make: <select name="Make"> <option value="0">Acura</option> <option value="1">Audi</option> <option value="3">Bently</option> <option value="4">Ford</option> </select> format to create my menus, any reference to a page explaining how this would be helpful as well as defining (proper terminology) what I am trying to do. TIA, James Hello all, I need some help coding link menus. These are menus that pop up to the side of links to show additional links. See this page for what i am looking to achieve. I want a side menu to show up off of my "Media" link that has link options for Photos, AIM Icons, Riot Act, Submit a Picture, and anything else i need a link option for. Here is my current code for my link menu to the left: Code: <div align="left" style=" "><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.niuredriot.com" class="mainlevel style1 style4" id="active_menu">Home</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://registeruo.niu.edu/iebms/reg/reg_p1_form.aspx?oc=40&ct=STD&eventid=8491" target="_blank" class="mainlevel style1 style4" >Join</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.niuredriot.com/blog/" target="_blank" class="mainlevel style1 style4" >Blog</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="media.htm" class="mainlevel style1 style4" >Media</a></font></td></tr></table></tr> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.ncaabbs.com/forums/forumdisplay.php?fid=468" target="_blank" class="mainlevel style1 style4" >NIU Forum</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="links.htm" class="mainlevel style1 style4" >Links</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="about.htm" class="mainlevel style1 style4" >About Us</a></font></td></tr></table></tr></table> <tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="contact.htm" class="mainlevel style1 style4" >Contact Us</a></font></td></tr></table></tr></table> Also, for the Submit a Picture page. How would i go about adding some type of form system that submits a picture to an email account? Thanks! Hi. I'm over my head. A friend's web person had an emergency, so he asked me to take over and finish his site, which had JQuery Menus. Finally, everything tested okay on MY computer, so I uploaded it. It looks okay on Firefox, but there's a big problem with IE on OTHER computers. Instead of staying in place, the menus wrap to the center and look like a vertical OL in ordinary text. The URL is http://www.trquinn.com. I feel terrible because I've made a mess of his site; any help would be sincerely appreciated. Hello, I have started working for a company, and with little experiance i am gradually tecaching myself how to HTML in ordwer to update our website. I've got to the point where i need some help. So please if you could help me in the most basic language that would be great. How can i create a drop down menu or navagation bar. vertically The website in question is www.hyspeedbroadband.com I would also like it to stay in the same style as it already is. As a little side question also. I changed the navagation bars position, now when you click on different pages the navagation bar does not underline which page you are on. If I could have some assisstance on how that can be corrected that would be great to. Thank you for any help and replys I have a form with 3 drop down menus on the same line. The way I would like it to work is as follows: if I choose for example element 3 on the first menu then the 2nd menu shows only the options of the element in menu 1. How can I do this? Thnks Hi all I am completely stuck as to what to do here. I have a drop down list that I want a different html table to display depending on the option chosen on the drop down list. I know this doesn't make a lot of sense so hopefully this will help... http://www.penzancepokerleague.co.uk/playerstats.html I'm trying to incorporate drop down menus into a template to clean things up a bit but I can't figure out how. Here's the code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bayside Baptist Church</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"> <!-- .style1 {font-weight: bold} .style2 { color: #94A652; font-size: 19px; } .style5 {font-size: 18px; color: #94A652; } .style6 { font-size: 11px } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <h1>Bayside Baptist Church</h1> </div> <div id="nav"> <div id="menu"> <li><a href="index.html">Home</a></li> <li><a href="index.html">Ministries</a></li> <li><a href="index.html">Calendar</a></li> <li><a href="index.html">Connect</a></li> <li><a href="index.html">FAQ</a></li> <li><a href="index.html">Pictures</a></li> <li><a href="index.html">Contact</a></li> </div> </div> </div> <div id="headline"> <div id="photo"><div> <img src="images/pic_1.jpg" width="618" height="254" alt="Pic 1"> </div></div> <div id="search-news"> <h2 class="downcast">Sermons</h2> <div id="news-box"> <p class="style1"> 01.11.09</p> <p><strong>01.04.09</strong></p> <p><strong>12.28.08</strong></p> </div> <h2 class="downcast">News & Events</h2> <div id="news-box"> <h3><a href="#">12.21.08</a></h3> <p> Join us at the <strong>Christmas Program</strong> for a time filled with music...</p> <p class="more"><a href="#">more</a></p> <h3><a href="#">12.24.08</a></h3> <p>Come to the <strong>Christmas Eve Candlelight Service</strong> to celebrate...</p> <p class="more"><a href="#">more</a></p> </div> </div> <div class="clear"></div> </div> <div id="body"> <div id="body-left"> <h2 class="style2">Welcome to Bayside</h2> <p class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</p> <p class="more"> </p> <h2 class="style5">Services</h2> <img src="images/welcome.gif" alt="" width="150" height="114" class="left" /> <p class="style6">Our <strong>9:15 service</strong> combines contemporary worship music and traditional hymns with a relevant message from Scripture that has real life-changing application to provide a complete worship experience.* We would enjoy having you join us on a regular basis as we seek to encourage one another to live out the truths of the Bible in our daily lives.**</p> <ul class="plussbullets"> <li><a href="#">Kids Corner</a></li> <li><a href="#">Teen Studies</a></li> <li><a href="#">Christian Education Hour</a></li> </ul> </div> <div id="body-right"> <h2 class="style5">Sermon Series</h2> <p><img src="images/3129504889_fcc5646ba4.jpg" alt="" width="321" height="56" /><span class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</span></p> <p> </p> <p class="more"> </p> <h2 class="style5">Pictures</h2> <div id="gallery"> <a href="#"><img src="images/gal_1.jpg" width="101" height="96" alt="Gal 1"></a> <a href="#"><img src="images/gal_2.jpg" width="114" height="96" alt="Gal 2"></a> <a href="#"><img src="images/gal_3.jpg" width="112" height="96" alt="Gal 3"></a> </div> </div> <div class="clear"> <p> </p> <p> </p> <p> </p> </div> </div> </div> <div id="footer"> <p>Bayside Baptist Church - 3915 N 16th Street - Superior, Wisconsin 54880 - 715.394.6002</p> </div> </body> </html> And here's a live sample: http://www.baysidesuperior.org/Bayside I'm using Dreamweaver cs3, looked at some tutorials but can't figure it out. What would you guys suggest? First off, I have designed one site ever and it's still in progress. I also have no basis in computer training other than graphic design. I am a total beginner, but the site I'm designing is for my personal business, so I'm continually updating it with new features I like. I was hoping to use hover menus (I have no idea if that is the technically correct term, but when you put your mouse over a link, it gives you a drop down menu) on my site, but really have no clue how to do that. Is it possible in HTML or would I have to use javascript or flash? If so how would I incorporate the code into a generally HTML based site? Thanks! :-) This is the code that works than I'm trying to use.. It is a horizontal css popup menu. Code:
HTML
<div id="menu">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
</div>
CSS
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}
My listing categories/hierarchy is controlled by word press so I can't really control that. I would like to know if I can modify the css to get this working. I'm trying to get the 'children' Appearance category to pop up under Automotive. Here is my NON working code: Code:
HTML
<div id="dropmenu">
<ul>
<li class="cat-item cat-item-3"><a href="http://www.diysrc.com/category/automotive/" title="View all posts filed under Automotive">Automotive</a>
<ul class='children'>
<li class="cat-item cat-item-7"><a href="http://www.diysrc.com/category/automotive/appearance/" title="View all posts filed under Appearance">Appearance</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-14"><a href="http://www.diysrc.com/category/featured-articles/" title="View all posts filed under Featured Articles">Featured Articles</a>
</li>
<li class="cat-item cat-item-1"><a href="http://www.diysrc.com/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
</ul>
</div>
CSS
#dropmenu ul .children{display:none;}
#dropmenu ul:hover .children{display:block;}
#dropmenu{position:inline;}
|
|||||||