help new AT THIS

daggydoo · Joined: 22 Apr 2008 Posts: 6

Ok I just using frontpage.
what I am trying to do is put a form on my site but on the right hand side. I have try float but this will not allow me to wrap text on its left.
So text on the left and right of that is a form.
Now i have images on top and .gif to put in on the left hand side as well. I not sure if this changes how I do the form or not.
Outside of this the way i want it to look is simple I think:?:
first name
form box <input
last name
form box <input
So you can i want the heading on top of the form box that they got to fill out.

kanenas · Joined: 14 Dec 2004 Posts: 191

Firstly, do NOT use Frontpage. It produces outdated HTML code and Microsoft has already discontinued the Frontpage line. If you don't want to handcode, find an editor with CSS support.

Secondly, how much have you learned about CSS?

I'm having a hard time understanding what you want. Please rewrite your description, perhaps including an ASCII graphic mockup or a link to a picture showing your desired layout. As for floats not wrapping text on the left, did you try 'float: right'?

Lastly, do NOT use frontpage.[/img]

daggydoo · Joined: 22 Apr 2008 Posts: 6

well i am trying to design a form with the form details on the right and text on the left eg

<td style="font-size: 9pt" Wrap align="right" width="120">
<span style="color: #cc0000">*</span>
<font color="#000000"> <b>First Name:</b></font></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname1" size="20"></td>
</tr><br>
this what I have done to put it on the right but the text when type out move the table down.
Now out side of this I now learn css a litte bit and done this instead,
<html>
<head>
<title></title>
<style type="text/css">
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%;
height: 100%}
.bottom { clear : both }
</style>
</head>
<body>
<form>
<p class="right">
<INPUT style="width:200px;" name="address" value=""
valtype="mandatory"
valmsg="Street address field is blank."><br>
<br><INPUT style="width:200px;" name="address" value=""
valtype="mandatory"
valmsg="Street address field is blank."><br>
<br><INPUT style="width:200px;" name="address" value=""
valtype="mandatory"
valmsg="Street address field is blank."><br>
<br><INPUT style="width:200px;" name="address" value=""
valtype="mandatory"
valmsg="Street address field is blank."><br>
<br><INPUT style="width:200px;" name="address" value=""
valtype="mandatory"
valmsg="Street address field is blank."><br>
<br><INPUT style="width:200px;" name="address" value=""
valtype="mandatory"
valmsg="Street address field is blank."><br>
<br><INPUT style="width:200px;" name="address" value=""
valtype="mandatory"
valmsg="Street address field is blank."><br>

<p class= "main" > </p>
</body>
</html>
in reagrds to frontpage I now using NVU

kanenas · Joined: 14 Dec 2004 Posts: 191

Much better, but there's still some improvements you could make. I'm going to give you a lot of advice. Don't worry about absorbing it all now; take what you can.

First, make sure you have a good form design.

Now that you're certain of your design, take a look at some examples to learn how to implement your design, such as "Fancy Form Design using CSS", "Fun with forms", "Accessible CSS Forms". Look for other examples. Keep in mind that any samples you read, including those I gave, might use dated techniques.

Some other principles and advice (this is where you might start passing over bits):

Reduce presentational markup as much as possible in your design (it's not always easy or appropriate to get rid of '<br />'). This doesn't mean delete non-structural markup from your current implementation, it means start with structural markup. The structure of the document should reflect the structure of the content. This is a part of separation of structure and presentation and makes for cleaner and easier to mantain code. The resulting document is also easier for applications to handle (important for accessibility, search indexing and mobile devices). To see the power of separating structure and content, check out the "css Zen Garden".

Close all elements (do not ignore this). You left out '</form>' and '</p>' tags in your example (side note: the '<p>' element in the form is unnecessary and not structural for the example you gave). NVU should close tags for you.

The "valtype" and "valmsg" attributes (I assume they're used by a script for form validation) are not standard and thus may not work on all browsers the way you are expecting. Alternatives would be to put the information in the script or into other elements. The downside to the former is the warning messages are no longer structurally near the element; for the latter, the connection is weakened (no longer implied by tag structure) but not absent (document structure shows connection). In the second approach, the warnings are in initially hidden elements and revealed when the field fails validation. Simple example (untested):

daggydoo · Joined: 22 Apr 2008 Posts: 6

Well that was alot I will have re-read it but it really tells me i got a long way to go. Which is fine.
Now inregards to the text it NO long moves the table down thanks to the css style i used to make a box to put the form fields in and text left of that wraps nice and good thanks to the padding. Outside of that I cannot remeber what is <em>.
Anyway Thanks for the input I shall imporve it.