Sat, 2012-09-22 22:10
okay so after hours of fighting here is my problem.
I have a form. With some php i'm testing.
I need the input to display in two columns
on the left side
First Name (display:block)
Input box
Phone(Display:block)
input box
on the right side
Last Name(display:block)
input box
E-Mail(display:block)
input box
.......................
I have tried using a li and tried floating it. I can of course float left and right and style it nicely but what bothered me was a person typically reads in the states from left to right and that seems to be a standard way we approach a cursor's movement when we click on the tab button as we follow the cursor
so.
When floating lets say the above lets and right. a user would type first name and hit it will auto go to Phone and then another tab back to Last name
It shouldn't be like this but because of the float tags it follows within the float then jumps to the next float inputs in order.
I've tried even an interesting two lists of inline and li of input right under which made everything work perfect BUT then the problem was you can't get the error messages to display correctly because they would be in the list and push down the input boxes inline down
anyways. Any tips or workarounds would be really appreciated. Thanks in advance.
I don't want this to come up in search engines so I will type it out "+" between the letters. Remove the "+" of course....sorry for the annoyance
a + t + a + r + s + i + t + e + s . c - o - m / contact.php
Sun, 2012-09-23 06:07
#1
Here's a simplified version
Here's a simplified version of what should work.
Notice I use labels to wrap the form elements.
<!doctype html> <html> <head> <style type="text/css"> form{ width:550px; } label{ width:50%; float:left; } input, select{ float:right; margin-right:50px; } </style> </head> <body> <form action="contact.php" method="post" id="comments_form"> <label for="name">First Name<input type="text" name="name" value=""></label> <label for="last">Last Name<input name="last" type="text"></label> <label for="phone">Phone<input name="phone" type="text"></label> <label for="email">E-Mail<input type="text" id="email" class="detail" name="email" value=" "> </label> <label for="country">Country <select name="country"> <option selected="selected" value="">Select Country</option> </select></label> </form> </body> </html>
Sun, 2012-09-23 21:45
#2
almost there
the first row is working perfect how I wanted it.
Not sure why the rest isn't?
Also, what made you decide to use label? Just want to know for future reference.
Sun, 2012-09-23 22:45
#3
Label is the correct semantic
Label is the correct semantic element to use for form field labels.
Since you can wrap it around a field you can use it to provide basic layout functionality.
You van also use it without wrapping the field like:
<label for="name">First Name</label><input type="text" name="name" value="">
Then you would need an extra element to help with the layout.
It should have worked fot all the rows, try reducing the with of the label and add a border or background color to help you see what is going on.
Sun, 2012-09-23 23:49
#4
would you mind looking at it?
also you can't put the label like you're saying because then it would throw off the css you said recommended to use. I would prefer for the label to only wrap the name and not the input field as well but it wouldn't work.
not sure what it is in the form that is throwing it off still.
It seems as if the label name and last name have a bottom-margin that is different from phone and email
also the country and message are not aligned either. not sure how to fix all of this with the labels
i'm pretty sure the name doesn't work unless i put the input in it as well because label is split to 50% and the input needs to take the margin from the 50% mark.
Mon, 2012-09-24 00:18
#5
Yep that label example wasn't
Yep that label example wasn't a suggestion for you to use in this instance.
What browser are you using?
It is working for me in Chrome.
Mon, 2012-09-24 08:12
#6
using Safari.
using Safari.
i've got it all working but ONE thing. The error message needs to be displayed UNDER the input not above. Can't manage to do it without throwing off the entire layout
Mon, 2012-09-24 08:14
#7
are you sure you copied the
are you sure you copied the code correctly?
Try this:
<!doctype html> <html> <head> <style type="text/css"> form{ width:550px; } label{ width:49%; float:left; height:1.5em; margin-top:.25em; } label span{ float:left; width:30%; } </style> </head> <body> <form action="contact.php" method="post" id="comments_form"> <label for="name"><span>First Name</span><input type="text" name="name" value=""></label> <label for="last"><span>Last Name</span><input name="last" type="text"></label> <label for="phone"><span>Phone</span><input name="phone" type="text"></label> <label for="email"><span>E-Mail</span><input type="text" id="email" class="detail" name="email" value=" "> </label> <label for="country"><span>Country</span><select name="country"> <option selected="selected" value="">Select Country</option> </select></label> </form> </body> </html>
Mon, 2012-09-24 08:16
#8
looks like we replied together.
read above your last comment
Mon, 2012-09-24 08:26
#9
You will have to allow more
You will have to allow more space for the error message but it shouldn't be hard.
Add position:relative; to the labels and position the error message from them.
label{ width:50%; float:left; position:relative; /* so you can position from it's top left corner */ } .error{ position: absolute; top: 60px; left: 0; }
Mon, 2012-09-24 10:32
#10
workaround?
your suggestion caused the submit button now to move all the way up. I was able to force it down but then if you stretched the text area down as its an option and a user may decide to do it. it threw things out of order. Suggestions on this?
also. Do you think I should shorten the error messages or give them more space?
Mon, 2012-09-24 12:03
#11
I would not wrap the label
I would not wrap the label around the textarea.
You will have to play with things to get it looking how you want, special consideration may be needed for the submit button and textarea..
Mon, 2012-09-24 21:54
#12
mission accomplished
Thank you so much!
Let me know if you would have done anything differently than what I did to make the code more professional/cleaner or the form itself more professional/cleaner
Thanks again!
Mon, 2012-09-24 23:08
#13
spoke too soon!
Validation is not liking at all the labels we added. I searched the web everywhere and I can't find a reason for this. Same error over and over.
… First NameLast NamePhone document type does not allow element "label" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag a
113 28 E-Mail document type does not allow element "select" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag a
365 54 Message document type does not allow element "label" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag a
366 95 … document type does not allow element "textarea" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag a
368 97 … document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
Mon, 2012-09-24 23:42
#14
That's a strange one, looks
That's a strange one,
looks like you need to wrap them in a block level element.
Try adding a div inside the form element.
<form> <div> ... other fields etc.. </div> </form>
Thu, 2012-10-11 21:46
#15
new issue
the layout on the Order page seems to be off.
It's the only page where the width is longer than the rest. You can scroll to the right to a blank area. Not sure why this is happening.
Ideas????
Thu, 2012-10-11 22:00
#16
It's this <p
It's this
<p class="bottom-right"> <a href="javascript:;" class="simpleCart_checkout">Check Out</a> </p>
and other paragraphs around that area.
Try setting a width.
Sun, 2012-10-14 14:04
#17
Thank you
I had to add with to a few places thank you.
Is there another approach that is better to put the text inside the screen like I wanted or is that a good way to do it? I'm not sure I'm fond of the way I did it but it worked so I stuck with it...
Sun, 2012-10-14 20:23
#18
You could have floated them
You could have floated them instead of using position.
Wed, 2012-10-17 08:58
#19
Thanks for sharing superb
Thanks for sharing superb informations. Your website is so cool. I am impressed by the details that you¡¦ve on this blog. It reveals how nicely you understand this subject.
---------------------------------------------------------------------
[links removed]