|
HTML - How To Have Bulleted Items On One Line
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? Similar TutorialsHi: 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 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 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 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, 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 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 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. 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. Hey, I've got this problem involving a list in IE. I've basically made a LI within another LI like so:- Code: <ul class="mainNav">
<li><a href="/index.php?frc=1" class="first">Home</a></li>
<li><a href="/GamePortal.php">Games</a></li>
<li class="headlink"><a href="/edit_profile.php">My Profile</a>
<ul>
<li><a href="/edit_profile.php">Game Profile</a></li>
<li><a href="/link.php">Community Profile</a></li>
</ul>
</li>
<li><a href="/promotions.php">Promotions</a></li>
</ul>
This generates a sort of list underneith a list to be used as a dropdown menu. I've assigned it some CSS to do this Code: .mainNav li.headlink ul {
list-style: none;
display: none;
float: none;
margin: 0px;
position: absolute;
top: 35px;
z-index: 100;
min-width: 72px;
text-align: center;
padding: 5px;
}
What happens is that when using FF the content displays perfect (no suprises there) but when I use IE for the same page, it moves the drop down list to the end of the item above on it's x axis (the y is fine). I've tried all sorts of different things; I used relative which worked but then expanded the LI item above it shifting everything along in the line. So it has to be absolute positioned to stop that from happening. I've messed about with every single margin I can think of to no avail. Any Ideas. I am new to website design. I am trying to create a website for my business. when accessed through IE , the lovely little message this page contains secure and unsecure items pops up. Can I do anything to stop this? My site is SSL , I do contain links for affiliate programs on the index.html here is the site : www.woodyscoin.com any help would be appreciated. also, some links ( particularly the affiliate links on the bottom of the page) show in IE, but not firefox, is there a fix for that? My thanks in advance in helping a newb Bryan Hey! I'm developing a Windows Sidebar Gadget, which (as you may or may not know) runs on HTML, JavaScript, VBScript... etc. I have a problem. I have two Select objects (ListBox-es) which are supposed to be exactly the same. When some items are "transfered" from 1st to 2nd Select, they are being streched in height (please see: http://c404.net/stanthecaddy/attachments/SS.png). Here's how I'm adding items to 2nd Select (using JS): Code: // ... oFavoriteRestaurants.add(new Option(oRestaurants.options[n].text, oRestaurants.options[n].value), oFavoriteRestaurants.options[oFavoriteRestaurants.options.count]); // ... I hope i posted right. I don't know yet if this is HTML or JS problem Please reffer me to the right direction Thank you! What would be the best way to center the items listed in the left column? Thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN">
<html><head>
<title>test</title>
<script src="java.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="styles.css">
<style type="text/css">
.test{background-color:#ffdead;}
#header {
width: 830px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
background-color: #ffdead;
}
#header_table {
width: 75%;
border-collapse: collapse;
border: solid 1px;
border-color: #b7b7b7;
}
.header_bar {
padding: 0px;
margin: 0px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
width: 150px;
border-collapse: collapse;
border-right-width: 0px;
border-left-width: 0px;
}
.header_body {
padding: 0px;
margin: 0px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #b7b7b7;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #b7b7b7;
}
</style>
</head>
<body bgcolor="#ffffff">
<table id="header_table" align='center' cellpadding='0' cellspacing='0'>
<tr>
<td class="header_bar" colspan='2'> </td>
</tr>
<tr>
<td align='center' colspan='2'>
<img src="imgi/img11.jpg" height="134" width="461">
<img src="imgi/topimg2.jpg" height="160" width="309">
</td>
</tr>
<tr>
<td class='header_body' valign='top' width="200">
<form action="login.asp" method="post">
<table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" >
<tr><td valign="top" class='header_bar' colspan='2'> </td></tr>
<tr>
<!-- SIDE MENU -->
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<!-- MENU FOR LOGGED MEMBER ONLY -->
<td colspan="2"><br><br>Welcome <i><%'=Session("PMMS_NAME")%></i><br /><br /></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="profile.asp">My Profile</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="_purchase.asp">Purchase</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="newsletter.asp">Newsletters</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members.asp">Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members_by_group.asp">Group Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="file_cate.asp">File Repository</a></td>
</tr><tr>
<td width="15">º</td>
<td><a href="login.asp?logout=True">Log Out</a></td>
</tr>
<!-- [ MENU FOR LOGGED MEMBER ONLY ] -->
<% Else ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%>
<!-- INCLUDE LOGIN FORM -->
<br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td>
</tr><tr>
<td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td>
</tr><tr>
<td>
<br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br />
<input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a>
</td>
</tr>
<tr>
<td>
<br />
<input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" />
<!-- [ INCLUDE LOGIN FORM ] -->
<% End If %>
</td>
</tr>
<tr>
<td>
<br /><br />
<img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br>
<img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br>
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a>
<% Else %>
<img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br>
<% End If %>
<img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br>
<img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br />
</a>
<!-- [ SIDE MENU ] -->
<br /><br />
</td>
</tr>
</table>
</form>
</td>
<td class='header_body'>
<!-- MAIN PAGE CONTENT -->
Hi, I usually use frames to split my pages into sections. No problem the But you can think that having a page with over 25 frames defined in the HTML code is quite confusing at times. I wanted to ask if and how it is possible to position an image/paragraph/table/etc. at exact pixel-coordinates. My example: I want to place an image at (50px|50px) and a table at (200px|100px) Thanks in advance.... PS: (x|y) Hi there, I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells. This is how I'm currently doing it: Code: <div id="container"> <ul> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><h2>List Header</h2></td> </tr> <tr> <td height="29"><li><a href="itemone.html">Item One</a></li></td> </tr> <tr> <td height="29"><li><a href="itemtwo.html">Item Two</a></li></td> </tr> <tr> <td height="29"><li><a href="itemthree.html">Item Three</a></li></td> </tr> <tr> </table> </ul> </div> Notice that the H2 header isn't actually a list item but is still within the <ul> tags. Is any of this confusing or incorrect for google indexing? 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 I have no idea why, but the pictures in the table at https://www.wagnermeters.com/california1.php are aligned vertically instead of horizontally as it seems they should be. Am I going crazy? What can I do about it? |
|||||||