|
HTML - Crerate A Drop Down Menu In A Table With Html
Hi Peeps,
I have created a table of 24 football teams with links to all their forums so other people can link up with fans from around the country and talk football. However I realise that some of these teams have upto four forums. I would like to keep the table as it is and create some kind of drop down where the names of the forum drop down. Is it possible to create some sort of drop down in a table and can someone point me in the right direction so I might create one. Here is the page: http://www.freewebs.com/jonnibravo/l...forumsmain.htm Similar TutorialsHello, Is it possible to create drop down menus from table cells (i.e., moving mouse over a cell activates a drop down menu)? If so, could you possibly point me to an example to see how it is done? Thanks! I need two cells to be next to each other. One is a label and the other is a drop down menu. The following code just shows the options next to each other as text. This is also being done in VB.net Code: "<td class=select <option>Fresh Milk</option> <option>Butter</option> </select></td>" & _ Nevermind, got it fixed! I have a small problem with my 'form drop down menu'. I've got a content box made of cells. There is the title box and the content box. In the header, i'd like to place on the left site the content's title and on the right side, i would like to have a drop down menu. So far, so good. The problem appears as soon as I add the <form> tag to my dropdown menu. The problem is that it pulls the cell in height and I cannot modify it with my HTML-editor. Can any one tell me what i can do, or even better, post me the finished code Here is my code: HTML Code: <body>
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="630" height="10" align="center" bgcolor="#4D4D4D">
<table width="620" border="0" cellspacing="0" cellpadding="0" id="table4">
<tr>
<td class="tabletitle"> <span lang="en-us">Titel</span></td>
<td class="tabletitle" width="171"><p align="right">
<form ACTION="URI">
<p align="right">
<select name=selection
onchange="location.href=(form.selection.options[form.selection.selectedIndex].value)">
<option class="under" selected value="In this section">In
this section:</option>
<option> </option>
<option value="http://url">
URL 1</option>
<option value="http://url">
URL 2</option>
<option value="http://url">
URL 3</option>
</select></p>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Thank you in advance Hello everyone, im very sorry if i am reposting this question, i have tried to find the answer on the forum with no luck. I am very new to HTML and am learning everyday, i am trying to make a top menu kinda like on www.quantas.com.au. i would just like the drop down to be horizontal instead of the normail vertical menu. If anyone has any code to help me out or a tutorial that i would be able to learn from, i would be very appreciative. Thankyou in advance. Mikey i want to make a thin drop down menu. like rather then being 20pxls high i want it be be 10-15pxls high and i want the background color to be black and the text to be white. just something simple and customizeable is perfect Hi! I hope you guys can help with what is wrong here. Ive been slaving over this html trying to get it to work and I gave up. Heres my problem. I have two drop down menus on this page. However the right drop down menu only goes to a page from the menu on the left. I have them separated, Brazil and Romania, so the Romania menu links pull up one of the Brazil pages and I dont understand why because in the html I have clearly specified the links to go to different pages. I will attach the html used and ask someone to please point out the source of this html conflict. Hi, I have a website built in HTML and CSS in DW CS4. I have a horizontal top navigational menu and wish to add a drop down menu. When I select the entire menu and click on properties I can add a vertical menu item, but it is not an actual drop down. when I copy the html from another site that does have a functioning drop down, it does not work. So this is what it looks like: <div id="runner"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="page1.html">page 1</a></li> <li><a href="page2.html">page 2</a></li> what shoudl the code look like to add a drop down menu to each of these pages? Or should I do something in my spry menu? Can anyone help me with this? I've been trying to figure out how to create a drop down menu in place of the original navigation on my website. I found what I want to do I just need to know how to apply it. Here's the website with what I want to do: http://www.dynamicdrive.com/dynamici...roptabmenu.htm It's example 2. 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" xml:lang="en" lang="en">
<head>
<title>|*|Doll Directory|*|</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Stylesheet -->
<style type="text/css">
body {
background: url('');
background-color: #FFFFFF;
font-family: "Trebuchet MS";
font-size: 12px;
line-height: 1.5em;
color: #ffffff;
letter-spacing: 1px;
}
#container {
margin: 0 auto;
border: 4px solid #FF0080;
width: 722px;
background-color: #FFFFFF;
}
#header {
width: 722px;
}
#content {
background-color: #FFFFFF;
padding: 4px;
width: 500px;
text-align: left;
margin-left: 0px;
margin-top: -8px;
}
#sidebar {
float: right;
width: 212px;
background-color: #FFFFFF;
margin-right: 0px;
margin-top: -8px;
height: auto;
padding: 4px;
text-align: center;
}
#footer {
clear: both;
background-color: #FF0080;
margin: 0px;
width: 722px;
height: 45px;
text-align: center;
}
#bar {
text-align: center;
margin: 8px;
padding: 12px;
margin-left: 0px;
background-color: #FF0080;
margin-top: 0px;
width: 700px;
}
a.nav:link, a.nav:visited, a.nav:active {
text-decoration : none;
font-family : Trebuchet MS;
font-size : 10px;
line-height : 12pt;
text-align : center;
color : #fa829a;
font-weight : bold;
background-color : #252525;
cursor : default;
text-transform : uppercase;
padding : 5px;
border-right : 5px solid #c15876;
border-bottom : 1px dotted #7d7d7d;
}
a.nav:hover {
color : #ffffff;
background-color : #363636;
border-right : 5px solid #d58fb4;
border-bottom : 1px dotted #515151;
}
.site {
font-family: Gabriola;
font-size: 22px;
font-weight: bold;
color: #fa829a;
}
h1 {
margin-top: 5px;
text-align: left;
color: #fa829a;
font-family: Gabriola;
font-size: 25px;
font-weight: bold;
padding: 5px;
font-style: none;
border-bottom: 1px dotted #535152;
letter-spacing: 1px;
}
h1:first-letter {
text-align: left;
color: #fa829a;
font-size: 25px;
font-style: normal;
font-weight: normal;
}
h2 {
font-weight: bold;
text-align: left;
color: #fa829a;
font-family: Gabriola;
font-size: 18px;
border-bottom: 1px dotted #8a8988;
padding-bottom: 2px;
margin-top: 7px;
margin-bottom: 7px;
}
a:link,a:visited,a:active {
text-decoration: none;
font-family: Trebuchet MS;
cursor: default;
font-size: 11px;
color: #fa829a;
font-weight: normal;
}
a:hover {
font-family: Trebuchet MS;
font-size: 11px;
text-decoration: none;
color: #fa829a;
background-color: white;
padding: 1px;
}
b,strong {
font-family: "Trebuchet MS";
font-size: 11px;
font-weight: bold;
color: #fa829a;
}
i,em {
font-family: Gabriola;
font-style: italic;
font-size: 11px;
color: #fa829a;
}
u {
font-family: Gabriola;
font-size: 11px;
border-bottom: 1px dotted #add568;
color: #fa829a;
padding-bottom: 1px;
text-decoration: none;
}
blockquote {
width: 350px;
margin: 8px;
padding: 3px;
background: #fff;
border: 3px solid #413b31;
cursor: default;
color: #fa829a;
}
</style>
</head>
<body>
<div id="container">
<!-- Header image -->
<div id="header">
<img src="http://missdolldecade.awardspace.us/MDD_Banner.png" border="0" alt="" />
<div id="bar">
<div class="nav"><a href="http://missdolldecade.awardspace.us/index.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/rules.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/scores.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/round1.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/round2.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/round3.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/awards.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/judges.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/enter.html" class="nav"><font color="#FFFFFF">Home</font></a>
<a href="http://missdolldecade.awardspace.us/links.html" class="nav"><font color="#FFFFFF">Home</font></a></div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<h2>Tagboard</h2>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="missdolldecade" src="http://www6.shoutmix.com/?missdolldecade" width="207" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?missdolldecade">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
</div>
<!-- Main content -->
<div id="content">
<h1>Updates</h1>
</div>
<!-- Footer -->
<div id="footer">
<a href="http://missdolldecade.awardspace.us">Miss Doll Decade</a> (C) Amber Riley 2010<br>
<a href="http://missdolldecade.awardspace.us/contact.html">Contact MDD</a>
</div>
<!-- Container End -->
</div>
</div>
</body>
</html>
Hi! I would like to create a drop down menu in HTML where the user can choose many options, not possible in simple HTML? Dharma Hello, I am a newbie to html but am working on a company website. I am looking for help with the drop down nav bar. I want to have the bar justified underneath the part that you are hovering over (for example, when you hover over Douglas Cardinal, the words biography, philosophy, etc would be justified underneath. When you click portfolio, current projects, museums, etc would be justified under portfolio) http://www.djcarchitect.com/portfoli...tprojects.html Is this possible? Thanks!! I have created a custom html dropdown menu for my site. The thing is it looks perfect in Firefox 5.0 (for me it does anyway) and works just as expected but in other browsers such as Opera 10.60, Chrome 5.0.375.125, it doesn't work properly. and it works semi ok in IE 8. For example if I hover over one of the menu buttons in opera or chrome there is meant to be a drop down box, this doesn't show in Opera or chrome but does in IE? You can view the menu on my test site - http://www.themidwiferysanctuary.com/testsite/ There is more to the menu, you can use the following log in - Username: Jade Password 130489 Does anyone have any thoughts on how to get the dropdown compatiable with all (or most) browsers? I would post the code but it won't let me even when using the code tags.......... If you want to see the javascript code then please just let me know. Im not sure any of the above makes sense?? Thank you, Jade 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. 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! 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 Hai everybody.. I want to create a html drop down menu. I created a menu using template toolkit, but i want to create this in html code.Caan anyone help. Pls find here what i done. { title = 'Enterprise Name' type = 'select' dropdown_field = arr_Ent_NameId (This is the array which contains all the data i.e enterprise name. name = 'ent_id' } How can i do this in html. In the select and value button , how can i use this array 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'... Good day guys... is there anyone who can share about drop down menu's 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! I have a drop down menu on my page, and I want to change the background color of the box from white to match the rest of the page, how do I do this. Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Welcome to my Home Page</title>
<script language="JavaScript" type="text/javascript">
////The source for this script came from http://allwebco-templates.com/support/S_menus_dropdown.htm////
///For the Game,I changed the back ground picture. I realize it's not JS///
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->
<!--
/// The JS below is for the date and time. and i got the sorce from http://www.re-es.org/ ///
var day_names = new Array(7)
day_names[0] = "Sunday"
day_names[1] = "Monday"
day_names[2] = "Tuesday"
day_names[3] = "Wednesday"
day_names[4] = "Thursday"
day_names[5] = "Friday"
day_names[6] = "Saturday"
var month_names = new Array(12)
month_names[0] = "January"
month_names[1] = "February"
month_names[2] = "March"
month_names[3] = "April"
month_names[4] = "May"
month_names[5] = "June"
month_names[6] = "July"
month_names[7] = "August"
month_names[8] = "September"
month_names[9] = "October"
month_names[10] = "November"
month_names[11] = "December"
date_now = new Date()
day_value = date_now.getDay()
date_text = day_names[day_value]
month_value = date_now.getMonth()
date_text += " " + month_names[month_value]
date_text += " " + date_now.getDate()
date_text += ", " + date_now.getFullYear()
minute_value = date_now.getMinutes()
if (minute_value < 10) {
minute_value = "0" + minute_value
}
hour_value = date_now.getHours()
if (hour_value == 0) {
greeting = "Good Morning "
time_text = " at " + (hour_value + 12) + ":" + minute_value + " AM"
}
else if (hour_value < 12) {
greeting = "Good Morning "
time_text = " at " + hour_value + ":" + minute_value + " AM"
}
else if (hour_value == 12) {
greeting = "Good Afternoon "
time_text = " at " + hour_value + ":" + minute_value + " PM"
}
else if (hour_value < 17) {
greeting = "Good Afternoon "
time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
else {
greeting = "Good Evening"
time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
document.write(greeting + " Today is " + date_text + time_text)
//-->
</script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<p><img id="banner" src="images/banner.gif" alt="banner"></p><hr color="#FF0000"></p>
<ul id="nav">
<li><form action="#" method="post">
<select name="choice" size="1" onChange="jump(this.form)" class="dropdown">
<option value="index.html" selected>Home</option>
<option value="scripts_developed.html">Scripts Developed</option>
<option value="best_practices.html">Best practices for JavaScript coding</option>
<option value="ajax.html">AJAX</option>
<option value="JavaScript_frustrations.html">JavaScript frustrations & Javascript Game</option>
</select>
</form>
</li>
</ul>
<div id="content"></div>
</div>
<table width="1050" border="0" align="center">
<tr>
<td align="center"><p><img src="images/logo1.gif" width="300" height="300" hspace="30"><img src="images/logo3.gif" width="300" height="300"><img src="images/logo2.gif" width="300" height="300"></p>
<p><img src="images/logo4.gif" width="300" height="300" hspace="30"><img src="images/logo5.gif" width="300" height="300"><img src="images/logo6.gif" width="300" height="300"></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
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? |
|||||||