19 replies [Last post]
bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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>

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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.

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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.

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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>

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

looks like we replied together.

read above your last comment

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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;
}

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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..

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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!

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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>

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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????

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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.

bigeba8
bigeba8's picture
Offline
Regular
gaithersburg MD
Last seen: 9 years 7 weeks ago
gaithersburg MD
Timezone: GMT+2
Joined: 2012-06-10
Posts: 23
Points: 27

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...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

You could have floated them

You could have floated them instead of using position.

tkfanit
tkfanit's picture
Offline
newbie
Last seen: 9 years 6 weeks ago
Timezone: GMT+7
Joined: 2012-10-17
Posts: 2
Points: 2

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]