|
HTML - Text And Drop Down Menus
Programs
----------------------- Photoshop CS4 Dreamweaver CS3 ----------------------- Anyways I used photoshop to make most of the site image, slice it up made it to a HTML and images file. I have trouble get text to go in the right place. Im not to sure if im even doing it right. Drop down menu im not sure where to start there.(but mostly having truble with textso any thing will help ( what I need help with. Is how to do text with my work with photoshop. I know how to it with out just not with.) Similar TutorialsI've looked all over the web and can't find an effective way to do this. Can someone please help? I need to make text drop down menus when you mouseover my links. This is a perfect example: http://www.stpatrick.org/ Thanks a lot! 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? 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 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 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;}
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 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 Hello all! I want to have a page with multiple drop-down menus. The user will select for example "type of car" and a drop-down menu of 3-4 colors will appear... And then, if the user selects one of these colors, another drop-down menu will appear with the available brands of cars for the respective colour... Can you give me hints on how to start? This is what I'm trying to do.... I have mouseovers set up for the navigation bar and I now want to add a drop down menu to one of the navigation images. I searched the internet and tried fireworks and I couldn't find a solution that worked for me. I can get a regular drop down menu to work but I can't get one to work with a rollover image. I want to set it up like nvidia.com. Does anyone have a solution to my problem? Hi everyone - been reading the forum for some time and have learned so much. I have a question about drop down menus I am trying to implement on a new hockey website. Basically, I am using the html below. Everything is fine, except with this code, every time an item is selected, it opens in a new window. How can I alter this code so that selections DO NOT open a new window, and instead just direct readers straight to the desired link? <select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"><option> Basic Stats</option><option value="http://wildwood365.blogspot.com">Games</option><option value="http://wildwood365.blogspot.com">Goals</option><option value="http://wildwood365.blogspot.com">Assists</option><option value="http://wildwood365.blogspot.com">Points</option></select> Hi there! I'm working on a shopping cart via a template and css. Anyhow it's all pretty new to me so I need a little help! On this page: http://www.thinking-forward.co.uk/st...loss-leaflets/ there is a "sort by" field above the flyer images. They serve no purpose so i'd like to remove them, except I don't know where the code is being called from. Can anyone shed any light? Thanks in advance!! I need to be able to add a few more tabs on the navigation bar. But, it keep adding the 4th tab as a dropdown submenu for the 3rd tab. I want my nav bar to look like this: Home Our VisionNewsBlog Community[Hijab Shop Contact and i finally figured out how to add a new item to the nagivation bar..but now I need to fix it to look like the other inactive ones . I dont have web hosting yet so im just gonna upload on tripod or something http://lilyofkol.tripod.com/index.html On my site www.BlackberryOS.com/forums/ if you click the 'forums' tab, it shows a drop down menu..What i would like to do is take the headers (in the dark blue) and have those only appear when the tab is clicked. Then if you click on one of the Section names ( ie..Blackberry Devices), once you click that it creates/slides out a side menu that appears with the break down of the section... Is this possible? A mod/hack for this? Hi 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 Hey guys I'm really stumped I'm just starting this project and so far all I have is a javascript/css drop down menu I'm tweaking and a flash slide show. Right now I'm having 2 problems. #1 my menus are getting overlapped by the flash, I keep trying a z-index on the div I have in the flash, but it isn't working. #2 I'm having problems positioning the div which the flash is contained by. For example I tried centering the div with css and it was to no avail. I had to put <center></center> around the whole div to achieve this. If anyone could help that would be amazing, check out www.atlanta-web.com Thanks, Hi guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> 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. I have a problem with my website basically I have a drop down menu and when you click on a specific name it should bring the name/catcode in the next box I have done a primitive example below also I have copied the html code from the page below some of them work and some dont which is really confusing me I havent got a clue what I have to do to get them all to work. I would really appreciate any help or pointers. Example: Drop down menu catcode Action Force A LEGO L Below is part of the pages html which I think is causing the issue. <td style="background-color: #7f7f7f" valign="middle"> <table id="archiveSearch"> <tr> <td style="padding-right:10px"><img id="archiveSearchImage" name="archiveSearchImage" src="images/archiveSearch.gif" alt="Search Archive" width="144" height="37" border="0" /></td> <td style="padding-right:10px"> <select id="categoryDropDown" name="categoryDropDown" size="1" onchange="selectCategory(this)"> <!--<option value="Example" >Example</option>--> <!--<option value="Examples" >Examples</option>--> <option value="A-Team" >The A-Team</option> <option value="Action Force">Action Force</option> <option value="Bionic Six" >Bionic Six</option> <option value="Buck Rogers">Buck Rogers</option> <option value="COF" >Cinema of fear</option> <option value="COTT">Clash Of The Titans</option> <option value="DC Comics">DC Comics</option> <option value="GIJ" > G.I.JOE</option> <option value="LEGO"> LEGO</option> <option value="LOTR"> Lord of the rings</option> <option value="MASK"> M.A.S.K</option> <option value="MISC"> Miscellaneous</option> <option value="MOTU"> Masters Of The Universe</option> <option value="Rock Lords" >Rock Lords</option> <option value="Rocky" >Rocky</option> <option value="SMDM" > Six Million Dollar Man</option> <option value="Star Wars" >Star Wars</option> <option value="Super Heroes" >Super Heroes</option> <option value="Super Powers" >Super Powers</option> <option value="ThunderCats" >ThunderCats</option> <option value="TMNT" >TMNT</option> <option value="Transformers" >Transformers</option> <option value="Visionaries" >Visionaries</option> </select> </td> <td style="padding-right:10px"> <!--<input id="mostRecentButton" type="button" value="Most Recent" />--> <input id="catCode" type="text" style="width:45px" readonly="readonly" /> hi i need some help with this im not a html wizard not a drop down nav bar what i would like is a button that when pressed will show more info ill be more brief lets say im selling a box of condoms i have a picture to the left of the screen and a bit of info about the product at the right of the screen if people want to see more info about the product they click the drop down botton and more info is displayed. |
|||||||