Class assignment: forms


#1

Hello to all that read this post. I am currently in a crunch. Any help will be appreciated. I would like to understand why when I attempt to use float or position the text box in my code only centers. I have Googled this extensively CSS code tricks, W3C schools, etc. I am trying to get the three choice groups to lay side by side in the first grouping if you put the code into the html/css portion of the code academy emulator you will see that there is a text box for the user to enter extra information.



Nested Groupings and Controls Within a Table

Overall grouping
Your name:  


E-mail Address:

First Sub-grouping

Your question here:

Choice 1 
Choice 2 


Your question here:

Choice 1 
Choice 2 
Choice 3 
Choice 4


Your question here:


Second Sub-grouping


Your question here:

<select name="second" size="3" multiple="multiple">
	<option selected="selected">Choice 1</option>
	<option>Choice 2</option>
	<option>Choice 3</option>
	<option>Choice 4</option>
</select>
</p>









#2

Can i also see your css code?

if you edit/update your question, leave a reply so i get a notification. Your code is not visible, take the following steps to make your code visible:

select your code and press ctrl + k (or cmd + k if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard

You can't manupulate <option> because they are OS (not html) rendered, as you can read here


#3

Yes you may. Here it is.

<html>
<head>
<style type="text/css">
<!--
legend    {float:right;}
.bottom {position:absolute;}
.box {display:inline;
        }
-->
<meta charset="utf-8"/>
<title>Nested Groupings and Controls Within a Table</title>

</style>

</head>

<h1 style="text-align: center">Nested Groupings and Controls Within a Table</h1>

<body>

<form method="post" action="mailto:@isp.com">

<fieldset><legend>Overall grouping</legend>
Your name: <input name="firstname"  type="text" size="25"/>  &nbsp; <br><br>
E-mail Address: <input name="email" type="text" size="25" /> <br><br> 

<fieldset><legend>First Sub-grouping</legend>

<p>Your question here: 
<br /><input name="choice" type="radio" value="choice1" />Choice 1&nbsp;
<input name="choice" type="radio" value="choice2"  checked="checked"/>Choice 2&nbsp;
</p>


<br />Your question here:
<br /><input name="choicetype" type="checkbox" value="choice1" />Choice 1&nbsp;
<input name="choicetype" type="checkbox" value="choice2" />Choice 2&nbsp;
<input name="choicetype" type="checkbox" value="choice3" />Choice 3&nbsp;
<input name="choicetype" type="checkbox" value="choice4" checked="checked" />Choice 4

<br class="box"/>Your question here:
        <br/><textarea name="other" rows="5" cols="35"></textarea>

</fieldset>

<br />

<fieldset><legend>Second Sub-grouping</legend>
<p><br />Your question here:

    <select name="second" size="3" multiple="multiple">
        <option selected="selected">Choice 1</option>
        <option>Choice 2</option>
        <option>Choice 3</option>
        <option>Choice 4</option>
    </select>
    </p>
</fieldset>
    <p input type="submit"class="bottom" value="Submit the Form"/>
    <input type="submit" value="Submit the Form" />
    <input type="reset" value="Reset the Form" /></p>
</fieldset>    
</form>
</body>
</html>

#4

maybe a bit ocd, but i really like it when your name, email address and there boxes align perfect, like i did here, the three choice groups to lay side by side in the first grouping, they are side by side? I think it is really hard to style


#5

Well my friend, as I stated it was for a school assignment so what I want it to look like is irrelevant. This is what it has to look like perhaps someone else can make use of the corrected code courtesy of my good friend who is also a fellow student.

<html>
<head>
<style type="text/css">
<!--
legend	{float:right;}
p.submit {text-align:center;}
-->
<meta charset="utf-8"/>
<title>Nested Groupings and Controls Within a Table</title>

</style>

</head>

<h1 style="text-align: center">Nested Groupings and Controls Within a Table</h1>

<body>
<dl>
<form method="post" action="mailto:@isp.com">

<fieldset><legend>Overall grouping</legend>
Your name: <input name="firstname"  type="text" size="25"/>  &nbsp; <br><br>
E-mail Address: <input name="email" type="text" size="25" /> <br><br> 

<fieldset><legend>First Sub-grouping</legend>
<table>
	<tbody>
		<tr>
<td><br/>Your question here: 
<br/><input name="choice" type="radio" value="choice1" />Choice 1&nbsp;
<br/><input name="choice" type="radio" value="choice2"  checked="checked"/>Choice 2&nbsp;
<td/>


<td><br/>Your question here:
<br/><input name="choicetype" type="checkbox" value="choice1" />Choice 1&nbsp;
<br/><input name="choicetype" type="checkbox" value="choice2" />Choice 2&nbsp;
<br/><input name="choicetype" type="checkbox" value="choice3" />Choice 3&nbsp;
<br/><input name="choicetype" type="checkbox" value="choice4" checked="checked" />Choice 4
</td>

<td>
	<br/>Your question here:
		<br/><textarea name="other" rows="5" cols="35"></textarea>
	</td>
</tr>
</tbody>
</table>
</fieldset>

<br />

<fieldset><legend>Second Sub-grouping</legend>
<br />Your question here:

	<br/><select name="second" size="3" multiple="multiple">
		<option selected="selected">Choice 1</option>
		<option>Choice 2</option>
		<option>Choice 3</option>
		<option>Choice 4</option>
	</select>

</fieldset>
	<p class="submit"> <input type="submit" value="Submit the Form"/>
	<input type="reset" value="Reset the Form" /></p>
</fieldset>	
</form>
</body>
</html>

#6

And here is the CSS otherwise, it would not make much sense would it. I do appreciate you responding and continuing your dialouge however. Thank you.

body {font-family: Arial, Centaur, "Century Gothic";
font-size: 11pt}

p		{margin-left: 5pt;
		margin-right: 5pt;}

.boldworld	{color: #030a24;
			font-weight: bolder;}

img		{border-color: transparent;}

li.navlist	{display: inline;
			list-style-type: none;}

a		{text-decoration: none;
		color: #030a24;}

a:hover	{background: #030a24;
		color: #d0a4bb;}

li.bozo 	{font-style:italic;
		font-size:11pt}

li.gonzo {display:inline;}

ul.bulbs {list-style-image: url('bulbsm.png')}

#7

You know how hard it is too guess what could should look like? Based on your description, it is really difficult to come to this result. How did you know what it should have looked like?


#8

Oh I am sorry, it was a class project I have the book. My initial question dealt with float which you stated I could not use with option any further clarification with regards to float and position would be appreciated, if you wish to expound. My grasp is cloudy at best. As I said I have read extensively most articles but they dont cover specifics. That is why I finally posted here.


#9

But too me it wasn't clear what the problem was exactly, and what solution you wanted. I do have answer about position, you can find it here, float is pretty straight forward, float left will place the element in the top left corner of parent element. same with right, but then on the right side