|
HTML - How To Add Icons To Menu Items
I am developing C# web application in which it contains a htm page.
This Htm page contains a menu file. under file there are two items save and exit. I added the menu and items in the menu. what i need is how can i add the icons beside the items of the menu. Any one please Help. Thanks in advance. Similar TutorialsSo I'm doing a website with horizontal menu that is centered. The page is 100% width, and the menu can be with or without fixed width. The menu is fine otherwise, but the sub items are not next to each other. This is because they only align the width of their parent. However, I'd like them to be centered under their parent regardless of how many sub items there are (so ultimately they could be as wide as the whole menu, provided there were enough sub items). So in the code I now have, the 3 sub items align so that 2 are inline, and the 3rd is under them. These should be inline, stretching over the width of their parent's width. Thanks for the help! Code: <body>
<div id="banner">
<div id="centeredmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item with Sub</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Long Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Code: #banner {
position: absolute;
width: 100%;
height: 100px;
top: 0;
}
#centeredmenu {
height: 55px;
float:left;
width:100%;
overflow:hidden;
position:relative;
top: 0px;
}
#centeredmenu ul {
float:left;
clear: both;
list-style:none;
margin:0;
padding:0;
position: relative;
left:50%;
text-align:center;
}
#centeredmenu li {
width: 180px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu a {
display:block;
margin:0 0 0 0px;
padding:0px 10px;
background:#C03;
color:#fff;
text-decoration:none;
}
#centeredmenu ul ul {
position: absolute;
width: 100%;
display: none;
z-index: 400;
}
#centeredmenu ul ul li {
position: relative;
width: 50%;
z-index: 500;
}
#centeredmenu ul li a:hover {
background: #C03;
color: #3FF;
}
#centeredmenu ul li:hover ul{
display: block;
}
I am trying to put up an Adobe icon to go next to our downloadble pdf brochure. How do I create one of those small icons? Let me preface this by saying I'm very much a novice at this. I've done very basic HTML for a while, but have not advanced beyond that at all except to copy and paste some nice Java scripts that I've enjoyed from time to time. I do have 2 phpBB forum boards that I've enjoyed setting up. But that's pretty step by step instructional. Beyond that, I don't have a clue. But I love the little icons that many sites use in their location lines. Google has the G, Yahoo has the Y!, and Woot has the !. I'd like to put one on my websites, but I'm having a terrible time finding the code for it. If it's done in a CSS, I'm screwed. I have only peeked at this and never attempted it. But if someone has a way to put a small icon on my location line, I'd love to see it. I do most of my own graphics, and making the icon wouldn't be a problem at all. I just need to find out how to embed it. Thanks Hello, This is my first time in HTML world and I'm a complete n00b. I'm trying to put a counter on my blog for facebook/twitter/google+/rss to keep track of them on the blog. This is working fine, at least facebook and twitter are automatically updated (through a script I picked up on the internet), google+ and RSS is still manual, I still need to figure those ones out. Now I would like to nicely align the counters with the icons I have, and that's my problem. I want the text centered under the icon it belongs to, but I don't know how. With my lack of knowledge I found a somewhat cumbersome way to do that. Not that bad, simply not nice coding, but when the page is zoomed in or something the like, the aligning obviously doesn't work anymore. Could someone help me do the aligning properly? The code of the widget I have pasted below and the relevant blog: http://gebarentaal-signlanguage.blogspot.com. HTML Code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var f_page = "149198761796791"; // the page name for your fan page, e.g. the 'wvumountaineers' part of <a href=\"http://facebook.com/wvumountaineers\" target=\"_blank\" rel=\"nofollow\">http://facebook.com/wvumountaineers</a>
var t_page = "Gebarentaal_"; // the account name for your main twitter account
function add_commas(number) {
if (number.length > 3) {
var mod = number.length % 3;
var output = (mod > 0 ? (number.substring(0,mod)) : '');
for (i=0 ; i < Math.floor(number.length / 3); i++) {
if ((mod == 0) && (i == 0)) {
output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
} else {
output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
}
return (output);
} else {
return number;
}
}
// when document is ready load the counts
$(document).ready(function(){
// grab from facebook
$.getJSON('https://graph.facebook.com/'+f_page+'?callback=?', function(data) {
var fb_count = data['likes'].toString();
fb_count = add_commas(fb_count);
$('#fb_count').html(fb_count);
}); // grab from twitter
$.getJSON('http://api.twitter.com/1/users/show.json?screen_name='+t_page+'&callback=?', function(data) {
twit_count = data['followers_count'].toString();
twit_count = add_commas(twit_count);
$('#twitter_count').html(twit_count);
});
});
</script>
<a href="http://www.facebook.com/pages/Gebarentaal/149198761796791" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30x43.png" />
</a>
<a href="http://twitter.com/Gebarentaal_" imageanchor="1" style="margin-left: 1.5em; margin-right: 0em;"><img border="0" src="http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30x43.png" /></a>
<a href="https://plus.google.com/b/118073168609419238977/" imageanchor="1" style="margin-left: 1.5em; margin-right: 0em;"><img border="0" src="http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30x43.png" /></a>
<a href="http://gebarentaal-signlanguage.blogspot.com/feeds/posts/default" imageanchor="1" style="margin-left: 1.5em; margin-right: 0em;"><img border="0" src="http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30x43.png" /></a><br />
<p>
<font size="4" face="arial" color="#3c5f9d" style="margin-right:0.9em">
<span id="fb_count"></span>
</font>
<font size="4" face="arial" color="#63dfe5" style="margin-right:1.6em">
<span id="twitter_count"></span>
</font>
<font size="4" face="arial" color="#505050" style="margin-right:2em">
8
</font>
<font size="4" face="arial" color="#c35b02" >
3
</font>
<br />
<font size="2" face="arial" color="#3c5f9d" style="margin-right:0.8em">
likes
</font>
<font size="2" face="arial" color="#63dfe5" style="margin-right:0.5em">
followers
</font>
<font size="2" face="arial" color="#505050" style="margin-right:1em">
+1's
</font>
<font size="2" face="arial" color="#c35b02">
readers
</font>
</p>
Hi everyone! I would like to add some small icons in the branch of a tree in my layout. Can anyone suggest a way to do it? Should I use an image map? The icons will be links that open in an external page. Thanks! http://heartless-ink.com/inked/main.html Okay. I have a new question that needs answering. I have followed instructions found elsewhere in this forum, and have successfully gotten my url icon to work. If you go to web.mac.com/merchandise1 you can see a little "M" in the bar. Here's the problem, though. I don't use that address on my business cards, email flyers, etc. I use merchandiseonline.org The url icons DO NOT WORK when you go to the masked/forwarded url address of merchandiseonline.org I use DirectNIC for my forwarding purposes. So, my question, then, is: HOW do you get the favicons (url icons) to work when using a masked address? I've searched forums upon forums and have not found the answer. I pray someone here will have an idea. Thanks, James @ merchandise Hi guys, I'm working on a project which requires an HTML page to be updated regularly, say every 10 seconds. however its not the whole page i need to refresh but rather a section of it. that section in question is a table that has status icons within. those status Icons receive values from a server and update accordingly. the following code corresponds to those images you see in the attachment. HTML Code: <td width="100" style="TEXT-ALIGN:center" onclick="showNFailDialog('{IP_ID}','{ZONE_ID}','{GROUP_ID}');">
<IMG style="WIDTH:24px;HEIGHT:22px;CURSOR:hand" class="ZState NFail" name="disp" alt="Zone {ZONE_ID}"
src="../../Icons/circle_cancel.png"
eis="name:{IP_ID}.{ZONE_ID}.{GROUP_ID}.Alarm;type:1;virtual:1;img0:/Icons/circle_green.png;img1:/Icons/circle_red.png;">
</td>
this line basically says value 0 shows green, value 1 shows red.. img0:/Icons/circle_green.png;img1:/Icons/circle_red.png Is there a way I can insert some code into the image section that makes the image refresh every so often but without refreshing the whole page/table your help is greatly appreciated Here's what I'm up to: Made this scrolling desktop background on my Windows XP machine and found that the desktop icons, which appear transparent over a standard, static wallpaper, are no longer so when the desktop background is changed to an HTML one. That is, the text that displays as if typed with a drop-shadow over a static .jpg wallpaper image shows up over an HTML background inside a colored box. I'd like to get the "no box" effect, the standard XP text with a drop shadow, over the HTML background. Is this possible? Hi: Enviro: IE 7 (for now) My list items (i.e., <li>) are too close together, *but* if I put a line-break at the end of each item, they are too far apart. I tried using CSS with a margin setting to get some separation but that didn't work either. So, how does one get some afjustable separation between list items please ? Thanks, -Mel Smith I see the use of the <ul> and <li> tags when creating things like menus and in the case of digg and gamegrep at the least, comments. I can see a possible use with comments for indentatiing replies to other comments. The question still stands for things like menus though, does it have to do with search engine crawlers and how they parse the page? Any insight by anyone who knows anything about this would be nice. Thanks Hi, I'm new to this forum and could use some help. I created a website in iweb and I'm having an issue with items moving on the page. The website is VoiceFromHevin.com, not necessarily the welcome page, but the pages after that. So here is the backstory: When I first published my site I had problems with items moving around on the page when you shrank your browser window. The background would stay center while other images and text would move left. So, to combat that problem I changed two lines of code. <body style="background: rgb(255, 255, 255) url(About_files/background%20Test%202%20cropped%20longer.jpg) no-repeat scroll center top; margin: 0pt; " onload="onPageLoad();"> I changed part of the line of code from "no-repeat scoll center center;" to "no-repeat scroll center top;" I then change one more line of code which was: <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 980px; " id="body_content"> and made these changes to it: <div style="margin-bottom: 0px; margin-left: -512px; margin-top: 0px; overflow: hidden; position: absolute; left: 50%; word-wrap: break-word; background: transparent; text-align: left; width: 1024px; " id="body_content"> However, if you notice the pages, the three blue logos have moved off of the cloud image (they should be resting on the cloud). And also the footer links at the bottom have moved. Is there a way to move those items back to where they should be? Any help would be much appreciated! Thanks! Hi, I know this is being an extreme perfectionist. But, if you look at http://www.tendervendors.com/dev/hr_systems.html, at the selected link on the navigation bar (HR Systems), you'll see that there are 2 lines either side of the HR Systems (selected) link. This is fine, however because the bottom border is on the other links and not the selected one, and the two side borders are on the selected link, the don't line up. I'm aware that i could specify the right border on the 1st link and the left border on the 3rd link, but i was trying to make it simple, so someone without alot of understanding and program it after i've done. So, i then thought, well i could overlap the links, 2px to the left, so set li { position:relative }, and then li {left:-2px}. but it doesn't overlap the li's, it overlaps the entire ul over the page (content div) border. Any ideas as to why this is? Thanks, Matthew Millar I want to have two bulleted items on one line, but can't seem to accomplish it. I tried... <ul><li type=circle>item1</li> <li type=circle>item2</li></ul> Would there be an easy way to do this? Hi All, I started doing a website that had a picture, then flash overlaid on top of the picture, then some text centered on the flash... the size of the picture and flash is 990px in width and 792px high, the reason i put a picture on screen 1st is the flash take a few minutes to load, so it looks good till the flash kicks in. Anyway it looks good on my 1024 x 768 monitor, some of my friends have widescreen and say they is a huge gap to the right.. so how can i center width only an image of 900 x 792 and then in the exact postion of the centered image place the flash, and then add some text on top of the flash once again centered on top of the flash... this if it can be done will leave a even gap to the left and right if on widescreen and be virtually full screen on a normal 1024 x 768 monitor. I tried absolute Code: <center><div style="position: absolute; top: 0px; "> the image </div></center> <center><div style="position: absolute; top: 0px; "> the flash </div></center> <center><div style="position: absolute; top: 100px; "> the text </div></center the image and flash and text had the right html to show, just used the above code to show what i tried... anyway it did not work right for some reason, im sure im going down the wrong path and they is a much better way to do this... Can anyone help me Thanks Hi to you all, I am trying to write script to search an xml form and return any of the correct responses. The form is here http://bubbleweb.eu/Rentals/search.html and it is using: http://bubbleweb.eu/Rentals/index.xml http://bubbleweb.eu/Rentals/searchindex.js I want the customer to be able to search for a 'property ref', or if they don't have one to leave that field blank, and for the relevant item(s) to be returned. So if I search 'Bur1001' its returning that item, but if I leave it blank its returning all 4 items. That's all good, that is working fine! However, I want the form to be able to search other fields like 'short term', 'area' and 'bedrooms' etc, so if they leave the 'ref' field blank but 'short term' is selected then i ONLY want the 'short term' items to be returned. Does anybody know how I can achieve this? Thanks in advance for your time! I'm having trouble adding a line break between my form items. I've tried all the obvious solutions and nothing is working; either the breaks appear about the forms and below the text, or the form itself is moved to halfway across the page. I've tried using <br> tags and I've tried <tr> <td colspan="2"> <br> </td> <tr> and many variations, but none do what I what. Here's my code: Page Content goes here. <BR><BR><BR> <form id="form1" name="form1" method="post" action="http://www.usa-7.com/scripts/shared/refmlr"> <input name="destEmail" value="emailaddressgoeshere" type="hidden"/> <input name="reqType" value="Contact Us" type="hidden" /> <input name="numReqParms" value="5" type="hidden" /> <script src="validate.js"></script> <style> input.invalid {background: #ff0000;} input.valid [background: #afa; } </style> <table height="200" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> First Name: </td> <td><input name="First Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Last Name: </td> <td><input name="Last Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Email Address: </td> <td><input name="Email" size="30" maxlength="200" type="text" /></td> </tr> <tr> <td> Phone Number: </td> <td><input name="Phone" size="30" maxlength="35" type="text" /></td> </tr> <tr> <td> Comments: </td> <td><textarea name="Comments" cols="50" rows="8"></textarea></td> </tr> </tbody> </table> any help would be great. Thanks! Hi, how can I rearrange items by name or genre? I want to make a sort of collection for a few movies, with information about actors and so on. I have the information for each movie in a div tag. What do I have to do so that when I click, let's say on name, it lists the movies alphabetically? Is there any solution for this? Or generally how would you do this? Thank you. Hi Folks, I'm a newbi and just learning. Does anyone know if there is a tag or an object that would allow me to enter the same short list of items on several pages and be able to change the list on all the pages by changing it on one page? In other words if I change the list items on say a master page, it changes the list on all other pages where the same items are listed? Thanks for your help. Joel Hi, I would like to know how to add/remove items from listbox PERMANENTLY. Sad to say, all I have found are adding/removing items temporarily. 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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" >
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function addOption_list(selectbox)
{
addOption(document.drop_list.SubCat, "One","One");
addOption(document.drop_list.SubCat, "Two","Two");
addOption(document.drop_list.SubCat, "Three","Three");
addOption(document.drop_list.SubCat, "Four","Four");
addOption(document.drop_list.SubCat, "Five","Five");
addOption(document.drop_list.SubCat, "Six","Six");
}
function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
if(selectbox.options[i].selected)
selectbox.remove(i);
}
}
</script>
</head>
<body onload="addOption_list()";>
<form name="drop_list" action="default.aspx" method="post" >
<select id="SubCat" name="SubCat" MULTIPLE size="6" width="10"></select>
<input type="button" onclick="removeOptions(SubCat)"; value='Remove Selected' />
<input type="button" onclick="addOption_list()"; value='Add All' />
</form>
</body>
</html>
Please advise me on the problem. Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page. But when I validate my page in Dreamweaver I get some page errors that. Here is the error: The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict] Now here is the code in question: HTML Code: <ul id="nav">
<span class="left_links">
<li class="nav_items_00"><a href="index.html">Home</a></li>
<li class="nav_items_00"><a href="services.html">Services</a></li>
<li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
<li class="nav_items_00"><a href="events.html">Events</a></li>
<li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
<li class="nav_items_00"><a href="about.html">About</a></li>
</span>
The page that you can see this code in action is located at: http://www.hsgsphoto.com I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span. Thank you so much for any feed back and help John |
|||||||