HTML - Optgroup With No Indent On Options

I have a simple table and I want to indent it. Nothing fancy - I'd just like it to be an inch or so from the left side. This is going into an e-mail (Outlook) but I cannot for the life of me figure out how to code it so it will indent the table.

Any suggestions?

This is not my expertise and you guys are a great help! I've got all of the copy on the page, but everything is along the left margin. I want to indent a few bullet points and paragraphs. What html do I use? Thx.

I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center?

Here is an example of a part of my code:

Code:

      <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
       <tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>       
       <tr>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>
        </td>
       </tr>
      </table>

1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right.

2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column.

3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column.

My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line.

I tried:
style="margin-left:20px"
and
style="padding-left:20px"
but when the title got too long it would not auto-collapse the left side, I want it to collapse!

I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column.

If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it.

My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want.

This code is a list of books that spans about 20 categories and about 400 book titles.

Thanks in advance for any help you might offer.

Hi All,

I would like to create a drop down box that contains number 1-50.

I know I can do this using the following

<option value="1">1</option>
<option value="2">2</option>

Can someone tell me a method for doing his a better way rather than having 50 option values?

p.s is the speaking advert at the bottom of this forum the most annoying thing ever. Does nothing for me as a new site visitors other than make me want to leave. I have turned the sound off now but its real pants.

Thanks all

Kind Regards

wedmonds

I have a menu bar, viewable at http://muskmagazine.com/february/index.html, where I want some columns not to have a hyperlink but to keep the default cursor. I have tried not including the href but this then changes the cursor from default. Not being to savvy with HTML I could do with some help.

Thanks
Justin


Sample menu code:
<li><a href="#">about us</a>
<ul>
<li><a href="pressrelease.html">press releases</a>
<li><a href="letterstoeditor.html">letters to the editor</a>
<li><a href="newsletter.html">newsletter</a>
<li><a href="contact.html">contact</a>
<li><a href="aboutus.html">mission statement</a>
</ul>
</li>



css code:
http://muskmagazine.com/february/menu/fsmenu.css

ello everyone.

I'm looking for a new way to display information effectively and neatly on my website.

I have looked into tables ( which I am not a fan of ), also Javascript displaying clickable tabs allowing information to be displayed when tabs are clicked.

My website is animal related so i need to be able to display somewhat like shown below;

Does anyone have any other ideas of how I could display this information without making my website look rubbish?

Thanks

Jake

Hi All!

I'm using the Option Group/ optgroup/ Select features within a form and would like to initially display all options without having to click the arrow button to "reveal" the selections. I can't seem to find the option to allow this. Of course I can switch to a hyperlinked list, but have made extensive Option Group and would like to continue to use them.

Thanks in advance!!

Hi guys,

Can someone please help me with what to do with my forms; I have a form built that when someone clicks submit I want a number of actions to occur:
- The information they provided to be emailed to me somehow
- A message to pop up saying that the form was successfully submitted.
- And to redirect them back to my home page.

How do I do this?? What code do I need to use?? And is there some way that I can get the filled out form emailed to me without them having to send it?? (i.e. not using "mailto")

Any help here would be really appreciated.
Thanks,
TroubleShooter..."yeah right!"

Hi,
Is it possible in HTML to have the list box <select >, with some of the option with different Font , may be just BOLD or italic will do my job.

This is because i want to separate some option with others.

Like:

tableName1
ColumnName1
ColumnName2
ColumnName3
tableName2
ColumnName1
ColumnName2
ColumnName3

I want to display these in LIST box, it will be good if tablename are in BOLD or in different Font.

Also i have to make them unclickable. Right Now i am doing this via: but this approach is not looking good

Code:

function selectionChange( selectElementID ){
		if ( document.getElementById( selectElementID ) )
		{
			var selectBox = document.getElementById( selectElementID ) ;
			if ( selectBox.options[ selectBox.selectedIndex ].value == "unSelectable" ){				
				alert ( "Select any Table, not the Schema " );
				selectBox.selectedIndex = -1;
			}			
		}else{
			alert ( "Debug: check the code given id: '" + selectElementID + "' is not valid." ); 
		}
	}

Thanks
Rakesh Juyal

I have a SELECT selection list (standard code), in a form which is 200px wide (located in the sidebar of a web page).

Some of the OPTION elements in the list can be quite long. In FF, this isn't a problem as when you click on the dropdown arrow, the dropdown box is widened so each option text can be seen fully. But in IE, the dropdown box is limited to 200px wide, so you can't fully see some of the options.

Is there any way to solve so you can fully see the options in IE?

Thanks,
James

Hey, just a quick question...

How would i go about using an image as a select option in a form? i know its possible as ive seen it around on a few sites before, but im not sure how to do it myself. tried the obvious:

<select name="stars">
<option value="1"><img src="MYIMAGE"></option>
</select>

but oviously that doesnt work.

any help would be greatly appreciated.

Hello All!

I don't have access to any kind of server side scripting. The file I am making has to be able to run on a desktop other than the scripting for the search functions.

I have a few sites that I am incorporating their search function into the HTML doc. It's a time saver but I am only having 1 hiccup. The design.

I was not aware on how to incorporate into a radio button and/or drop down to search each site separately. Some of them require hidden fields that make this a challenge anyhow.

I'm not sure how to design the page in order to make this work fluently. I currently have a top frame with the navigation bar and the bottom frame as the main window. When a user clicks the link, it will load another top frame doc with the nav bar and a search window for that site clicked on. So when the user types in the information, it submits it to the site and shows the results on the main frame. If they click another link, it displays a search box for that site, and same thing.

However, I was wondering if there was a cleaner way of doing this? I am really interested in keeping a navigation bar but it looks cluttered with a search bar. I'm having to create a separate page for each search bar and add the navigation bar to each one. Then if something changes with the nav bar, I have to go back and fix each page. I'd really be happy to only need one nav bar.

My goal would be to figure a way to keep a navigation bar, clean up the page, and keep each search function handy. I could create a 3rd frame but I think it would feel more cluttered.

Here is the menu bar. Of course, this is just an example. "Form" is name of top frame.
Code:

<ul class="menu">
<li><a href="choose.htm" class="active"><Span>Home</span></a></li>
<li><a href="Tool.htm" target="form" onClick="top.body.location='www.example.com/sitewheresearchislocated';"><Span>
etc....
</ul>

And here is the frame page.

Code:

<frameset rows="80, 1*">
   <frame frameborder=0 scrolling="no" noresize="noresize" src="choose.htm" name="form" framespacing="0" border="0">

   <frame frameborder=0 noresize="noresize" src="main.htm" name="body" framespacing="0" border="0">
</frameset>

I have a select option that I want to categorize the values for. I want a space (if possible) between the categories and I want to show the category heading before the options for each category. The "value" for the non-heading options is a unique id that I get from an array taken from a database. I am populating the select using an asp for loop. Here is an example:

Code:

<select>
     <%For i = 0 to UBound(Controls, 2) - 1)%>
           <option value="<%=Controls(0, i)%>"><%=Controls(1, i)%></option>
     <%Next%>
</select>

Any idea on how I can do this?

Thanks a ton in advance!!!

<script type="text/javascript">

function test() {

var customer = document.docNameSuggestor.customer.value;
var project = document.docNameSuggestor.project.value;
var doc_type = document.docNameSuggestor.doc_type.value;

var string='<table border="1" cellpadding="1" cellspacing="1"><tr>'
+ '<td><p>Suggested filename is: ' + customer + '_' + project + '_' + doc_type + '.<extension>' + '</p></td>'
+ '</tr>'
+ '<tr>'
+ '<td><p>Suggested storage path is: ...\\' + customer + '\\' + project + '\\' + doc_type + '</p></td>'
+ '</tr></table>';

document.getElementById("fileName").innerHTML= string;
}
</script>


<form name="docNameSuggestor" >
<td width="60%">
<p>Which customer is this document for?</p>
<select name="customer" >
<option>Please select</option>
<option value="Ci">Ci</option>
<option value="VF">VF</option>
<option value="H3">H3</option>
</select>

<td width="60%">
<p>Which project is this document for?</p>

<select name="project" >
<option>Please select</option>
<option value="AX1.0">AX1.0</option>
<option value="AXP2.0">AX2.0</option>
</select>

<td width="60%">
<p>Which type of document is this?</p>

<select name="doc_type">
<option>Please select</option>
<option value="CRequirements">Requirement Spec</option>
<option value="SRequirements">Software Requirement Spec</option>
</select>

<input type="submit" name="submit" value="Submit" onClick="test()">

<form action="file.html" method="post" target="_blank"></form>
</form>

These are my codes,
Q1.How can I open results in a new window after user submit selected options?
Q2:How can I populate the specific field with choices based on what user has selected from customer drop-down

Please help. Any suggestions are appreciated.

hi everyone,

ok heres my problem that is bugging me. I have a ecommerce website that im setting up and it comes with a default search feature.
Code:

<form name="quick_find" action="MYDOMAIN/index.php?main_page=advanced_search_result" method="get">
<input type="hidden" name="main_page" value="advanced_search_result" />
<input type="hidden" name="search_in_description" value="1" />
<input type="text" name="keyword" size="18" maxlength="100" style="width: 103px; margin-right:5px; vertical-align:middle;" value="" onfocus="if (this.value == 'Enter search keywords here') this.value = '';" />
<input type="submit" value="Search" style="width: 50px; vertical-align:middle;" />
</form>

on my site i sell music LP's and each lp has in its description the year it was released.

If i was to put in the above form "1996" it would search all my products and return any that have "1996" in their desctiption.

With this in mind i would like to create a form that had 4 drop down boxes. day,month,year,country

I have created the following code below;

Code:

<form name="quick_find_header" action="MYDOMAIN/index.php?main_page=advanced_search_result" method="get">
<input type="hidden" name="main_page" value="advanced_search_result" />
<input type="hidden" name="search_in_description" value="1" /> 
<select name="keyword">
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option selected value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>

</select>
<select name="keyword">

<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option selected value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>

</select>
<select name="keyword">

<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option selected value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<input type="image" src="includes/templates/theme013/buttons/english/button_search.gif" alt="Search" title=" Search " style="margin-left:1px;" /> </form>

this gives me 3 drop down box's (YEAR,MONTH,DAY)

The problem is when i click search it only searches for the year. instead of combining all the selected data (e.g. 1996+JUN+23) it just searched for 1996.

The second problem is if someone managed to get this form to work, would it search for "1996JUN23" or "1996 JUN 23". The reason i ask this is my products descriptions say "this single was released on 23 June 1996"

I hope ive made all the above clear!!

Any help would be greatly appreciated.

thanks in advance