13 replies [Last post]
wizzy
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2007-03-14
Posts: 18
Points: 0

Hi

Can someone please let me know how i can vertically align the form elements in the following page using CSS:

Link: http://wizzy.justfree.com/loginpage2trial.htm

The form elements in the page need to look like this:

Link: http://wizzy.justfree.com/ideal_page.gif

Any help will be appreciated.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 33 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

ermm .... change

ermm .... change this

Company ID:



Password:

to something like this?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Take a look a the page

Hi

Take a look a the page code in this post (see my post):

http://www.csscreator.com/node/20718

eZe616
eZe616's picture
Offline
Enthusiast
Aruba
Last seen: 15 years 8 weeks ago
Aruba
Timezone: GMT-5
Joined: 2007-02-23
Posts: 52
Points: 0

Well I thought I'd give

Well I thought I'd give it a go...I managed to do almost everything right, looking the same except IE doesn't render it properly. There is this great white space at the right of the input field that aren't suppose to be there. FF renders it perfectly though. As of this moment I dunno what causes it, maybe one of the wiser posters may know.
It's validated and all.

You can see it here... http://eze.110mb.com/tests/log.php

Here's the HTML

Company Login

Company name - Help







Login in to "Company name"


Company ID:




Password:











Forgot Password?
|
Help





Don't have a Company ID?



Signing up is easy






And the CSS

/* ------------------------------------------------------------------------
My CSS form
------------------------------------------------------------------------ */

body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
margin-top: 2em;
}

.container { width: 780px;
margin: auto;
padding: 5px;
border: 1px dotted #666666;

}

.inside { width: 20em;
margin: auto;
padding: 10px;
border: 1px solid #000000;

}

.header { margin: auto;
border: 1px solid #666666;
width: 21em;
}


.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}

/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

label {
display:inline-block;
}

label {
min-height:1.6em;
font-size:65%;
font-weight:normal;
display:block;
width:23.5em;
margin-bottom:5px;
margin-left:7px;
}

* html label {height:1.6em}

#submitme {
display: block;
margin-left: 19em;
}

#myform2 { border: 1px dotted #CCCCCC;
padding-bottom: 5px;
margin: auto;
color: #666666;
clear: left;

}

#myform2 fieldset { border: 0px dotted #999999;
display: inline;


}

#myform2 legend { text-align: left;
font-size: 65%;
padding-bottom: 3px;
font-weight: bold;
margin-bottom: .75em;

}

#login { width: 30em;
margin: auto;

}

.inputbox2 { margin: 0px 0px 5px 0px;
float: right;
display: inline;
font-size: 103%;
width: 14em;
height: 1.5em;
font-family:Verdana;
color: #666666;

}


#myform2 label span { float: left;
display: block;
margin-top: 2px;
margin-bottom: 5px;
width: 8em;
text-align: right;

}

a.link{
color:#053799;
font-family: Arial;
font-size: 13px;
font-weight: normal;
text-decoration: none
}
a.two{
color:#053799;
font-family: Verdana;
font-size: 9px;
font-style: normal;
font-weight: normal;

}

.hrline{
border-top:1px solid #656565;
margin:auto;
margin-top:20px;
padding:5px;
}

h3 { font-size: 85%;
margin-top: 10px;
}

.text { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;

}

.text2 { text-align: right;
color:#053799;
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

.signup { text-align: right;

}

.upperR {
text-align: right;
color: #000;
font-family: Verdana;
font-size: 9px;
font-style: normal;
font-weight: normal;
float: right;
clear: left;

}

.logo { display: block;
padding-top: .25em;
margin-bottom: 1.75em;


}

I have taken some parts that has been used by e previous poster when he helped me...Only because I don't quite understand that part yet.

I might have use extensive divs and all. Maybe the other can bring it down a bit. But I can't, I tried though

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I gave you a complete set of

I gave you a complete set of codes yesterday http://forums.digitalpoint.com/showpost.php?p=2537292&postcount=2

It is impolite enough to cross post, unable to wait even an hour, and wasting people's time. Now, 36 hours after receiving answers, you haven't responded to either forum.

In the future, try not to be so gormless.

gary/irate/wearing my moderator's hat—the one with the big feather

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wizzy
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2007-03-14
Posts: 18
Points: 0

Thanks!

Thanks everyone for trying to solve this problem.
Karinne's solution didn't work for me though.
CleveTreva,that is a nice looking form...will surely help me
eZe616,this code might not work for me but thanks for the effort Smile
kk5st,thanks for the code you posted at digitalpoint.It really helped and i have reworked on mine using some of your code..here is the link:

http://wizzy.justfree.com/loginpage4.htm

Now the problem is the page lookes alright on monitors set to a resolution of 1024x768, but not on monitors set to 800x600.So trying to solve that prob.
As for posting in different forums, i don't think its wrong at all...who know where help arrives from!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: i don't think its

Quote:

i don't think its wrong at all...who know where help arrives from!

As often the case in life it's not what YOU think that matters. Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 40 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

wizzy wrote:As for posting

wizzy wrote:
As for posting in different forums, i don't think its wrong at all...who know where help arrives from!

You may not think it's wrong, but you understand why it is wrong, don't you?

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

wizzy wrote: As for posting

wizzy wrote:

As for posting in different forums, i don't think its wrong at all...who know where help arrives from!

What's wrong, is that you have two or more disparate groups working on the same issue. The result is that you are wasting people's time doing duplicate work. Show some respect to those who would help you.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wizzy
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2007-03-14
Posts: 18
Points: 0

I seem to have offended

I seem to have offended quite a few people here. Please understand that i have the highest regard for everyone helping me out here and did not mean disrespect to anyone. I posted in different forums since i wasn't sure if i would get an answer.Also if this problem gets solved, anyone else facing the same issue would find the answer in future on either forums. That was also my intention in doing this.But i am sorry if you feel people's time gets wasted by this method.The next time i will in one of the forums and wait for a reasonable amount of time before thinking of posting in another forum.

Still working on the same prob as i have a parallel assignment going.Will surely post here once the page gets done.Thanks again!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Worry not it's not a case

Worry not it's not a case that you have offended or disrespected anyone (vaguely might have disrespected the ethos and culture of fora) but that you expressed a possible lack of understanding in your remark "I don't think it's wrong" which does tend to be open to mis-interpretation as a challenge to correction.

As Gary pointed out it's more to do with time and resources you will get a satisfactory answer on any of the main half dozen html/css coding forums of repute (this one naturally being the most erudite and fast Smile ) but to get them all to respond at the same time on the same problem is just overkill, by all means move on if one forum can't help but initially wait and see if it can.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

eZe616
eZe616's picture
Offline
Enthusiast
Aruba
Last seen: 15 years 8 weeks ago
Aruba
Timezone: GMT-5
Joined: 2007-02-23
Posts: 52
Points: 0

I have another

I have another question...Now since I made my form, so I can pratice my form making skill with CSS...How come does IE display the form wrongly??...The div that holds the form is twice as big or bigger then it is supposed to be...What did I do wrong?

eZe616
eZe616's picture
Offline
Enthusiast
Aruba
Last seen: 15 years 8 weeks ago
Aruba
Timezone: GMT-5
Joined: 2007-02-23
Posts: 52
Points: 0

I have another

-- removed -- double post --

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

maybe you ought to start a

:? maybe you ought to start a new thread? this ones a bit fractured now.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me