Quote:
Originally Posted by rblampain
I have the HTML4 code below that renders, displays and links as wanted (Epiphany and Iceweasel) with one exception but I need more which I can't work out due to my insufficient experience. The exception is that the </form> tag creates a space between consecutive FORMS, how can I avoid that?
Code:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
<form method="post" action="cgi-bin/Changeit">
<div>
<span class="maintext">1
<a href="#Text to be evaluated.">Text to be evaluated. </a>
<a href="#t0001" name="t0001" onclick="toggle_visibility('n0001');">
<font size="1" color="#FF33FF">change it?</font>
</a>
</span>
<div id="n0001" style= display:none;>
<font size="1" color="#FF33FF">Last Evaluation: </font>
Whatever it was.
<br>
<textarea class="texareas"
placeholder="Click 'change it?' to exit this text area. Greetings and thankyou."
name="3456" rows="1" cols="120"></textarea>
<br>
<font size="1" color="#FF33FF">Enter the new evaluation in the box above: </font>
<input type="submit" value="Submit"></div>
</div>
<input type="hidden" name="directory" value="whateverdir">
<input type="hidden" name="file" value="whateverfile">
<input type="hidden" name="line" value="99">
<input type="hidden" name="oldstring" value="Text to be evaluated."></form>
W3C could find errors in the HTML code above which gave problems with css file and I cannot check - waiting for an Internet connection from the telco.
|
Referring to the hilighted lines above in the better formatted code:
Changing the
display attribute on the forms to '
block' results in space between them. Change that to '
inline' and/or define some CSS rules for form elements which set the desired spacing.
An HTML/CSS validator will likely complain about the unclosed input elements. Change <input ...> to <input ... /> to silence those.
Also the break elements,
<br> should be
<br />.
And get rid of the
always evil <font ...> elements! Replace those with
<p> or something else, and use CSS rules to set the color and other font attributes. The validator will likely complain loudly about those!
Quote:
Originally Posted by rblampain
I also need the string "Change it?" (which is only an option) to only display by a "onmouseover" event over the string "Text to be evaluated." (Clicking on it will link to the other part of the page) and I need the number "1" before this string to line up as in a <table><tr><td> with value up to 99 in other <form></form> for each string to be evaluated.
Put in another way, what I need to add (html css javascript) is the effect of invalid code like this if it was working:
Code:
<table>
<form 1>formcode<tr><td>1</td></tr>formcode</form 1>
<form 2>formcode<tr><td>2</td></tr>formcode</form 2>
<form 99>formcode<tr><td>99</td></tr>formcode</form 99>
</table>
|
Use CSS rules to control the mouse-over visibility of the "Change it" text.
And you rightly described the example <table> code as invlaid... you cannot nest <tr>, <td> elements inside the form elements and text. That is badly broken.
If you use a table for formatting, then
<tr> should be a child of
<table> and
<td> should be a child of
<tr>, and everything else must be inside the
<td>'s. So your table structure would be something like this...
Code:
<table>
<tr><td>1</td><td><form>formcode 1</form></td></tr>
<tr><td>2</td><td><form>formcode 2</form></td></tr>
...
</table>
And as mentioned above, set
display:inline attribute for the <form> elements and define a few simple CSS rules to control padding, margins and alignment of the table cells and nested form elements.
With 100 forms nested in the table along with visible identifiers and javascript rules to control their visibility, you would be well served to generate that HTML with a scripting language such as PHP rather than hard-coding it into a page.
I would suggest searching sources such as W3Schools and the many online tutorials for web design and scripting methods. It really is not difficult once you catch on to it, but it is complex enough that you will need to understand the basics yourself in order to really benefit from the help of others.
Hope this helps!