Label align

NZ_Kiwis

I have a textbox which has font-size set to 18 with padding at 10px

The label to the left is small font and sits in line with the bottom of the textbox, i want it to sit in the middle of the textbox - how can I do this?

johanafm

NZ_Kiwis;10995639 wrote:
The label sits in line with the bottom of the textbox

How did you achieve this?

NZ_Kiwis;10995639 wrote:
i want it to sit in the middle of the textbox - how can I do this?

What have you tried? What does your html look like? What's styles apply to the involved elements?

Bonesnap

Aligning elements vertically is a little more challenging than aligning horizontally. Off the top of my head I can think of two ways. One, is to use tables and utilize the "vertical-align" CSS property. The other is to use absolute positioning and some math. Neither is particularly "pretty".

johanafm;10995661 wrote:
How did you achieve this?

It's default behaviour since they're both inline elements.

NZ_Kiwis

how can I then write the name of the textbox or have what's its for as a background to the textbox? a lot like this "how can we help you"
http://www.airnewzealand.co.nz/

Bonesnap

NZ_Kiwis;10995684 wrote:
how can I then write the name of the textbox or have what's its for as a background to the textbox? a lot like this "how can we help you"
http://www.airnewzealand.co.nz/

Two ways:

1) Using an HTML5 attribute called "placeholder". Obviously the least compatible solution.

2) JavaScript.

johanafm

Bonesnap;10995683 wrote:
It's default behaviour since they're both inline elements.

No it's not. Default is baseline ("bottom", i.e. baseline, of label text is aligned with bottom of input text) which looks good. Thus, something has been changed. This is why I'm curious about how he achieved the current look, as well as what he has tried.

Bonesnap;10995683 wrote:
One, is to use tables and utilize the "vertical-align" CSS property.

... or to use inline elements to which it also applies rather than resort to using tables for non tabular data.

Bonesnap

johanafm;10995731 wrote:
No it's not. Default is baseline ("bottom", i.e. baseline, of label text is aligned with bottom of input text) which looks good. Thus, something has been changed. This is why I'm curious about how he achieved the current look, as well as what he has tried.

Sorry, I interpreted as a textarea.

johanafm;10995731 wrote:
... or to use inline elements to which it also applies rather than resort to using tables for non tabular data.

I said it wasn't very pretty...

NZ_Kiwis

Bonesnap;10995694 wrote:
Two ways:

1) Using an HTML5 attribute called "placeholder". Obviously the least compatible solution.

2) JavaScript.

okay used placeholder and in Chrome is works and in IE8 it does not, how would I do it in Javascript?

Bonesnap

NZ_Kiwis;10995786 wrote:
okay used placeholder and in Chrome is works and in IE8 it does not, how would I do it in Javascript?

- Give the text field a default value, such as "Enter password" or whatever.

When the text field gets focus, clear the value so the field is blank. Note you will have to check the field's value for the place holder in order to make it blank otherwise it will blank out anything the user enters.
When the text field loses focus, check if it's empty. If it is, then put back the place holder text. If it's not, then leave it.
Also don't forget some users may have JavaScript disabled.