4 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Hi
I am trying to get the two input text boxes in a form to be in alignment with each other - the preceding text above one box is lengthier than the other causing that box to be pushed forward. They are also sitting on top of each other when they should be properly spaced. Can anyone advise on how to position these better?

Any tutorials I see are more to do with styling the separate elements themselves,

Have just included code of form (as is very lengthy page and validates okay) and included piccy of problems :

Course



Location


College 1
College 2





AttachmentSize
searchtry.jpg47.83 KB
Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 9 years 24 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

please post the css

please post the css.
It would be easier to help you.
To get a vertical space between them you can just add a second
(quick and easy)



and quick and dirty as well add & # 160;& #160;Course remove the space.

this is more brutality than css-art but it works.

So post the css and you´ll get a better solution.

lars

A perfection of means, and confusion of aims, seems to be our main problem.
Albert Einstein

http://www.creategg.de

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Thanks but there'd be no

Thanks but there'd be no point posting the full code - there are about 5 style sheets and the HTML is very long...I didn't write it. However I have managed to put the form elements in divs, block align and created a left width for the labels to line up the elements,

.SearchBox{ font-weight:bold; color:#006494; } .SearchButton{ float:right; } label{ padding-top: 3px; display: block; float: left; width: 80px; } HTML uses a strict doctype.

Course



Location

Course1
Course2







My main problem now is since I have zeroed the css, the input text box outlines themselves disappear in FF!

Anyone know why this is?

thanks
Em

Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 9 years 24 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

Emma wrote:Thanks but

Emma wrote:
Thanks but there'd be no point posting the full code - there are about 5 style sheets and the HTML is very long...

From time to time there´s a point. Anyway. "Size=15" ?
I don´t want to ask for each single id. A very easy way to solve your problem:

http://www.style-sheets.de/guide/formulare/formulare_per_css_layouten

Sorry that it is in german, but the css is very easy to understand.

regards

lars

A perfection of means, and confusion of aims, seems to be our main problem.
Albert Einstein

http://www.creategg.de

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Thanks...I got the code from

Thanks...I got the code from the article and applied it to my form...it's perfectly spaced now Smile

I realised the problem was that I wasn't applying the padding: 0px and margin: 0px to the form tag but to the div itself...so once I put in a form tag with those values, that took out the extra spacing,

p.s. don't know how the 'size=15' thing got there, but it's now taken out!

many thanks
Em