CSS Forum

**sith717** · 11-07-2009, 08:45 AM

I currently have this css:

Code:

input{
font-size:12px;
padding:4px 2px;
border:solid 1px #675f39;
}
</style>

and this form:

Code:

<form action="accounts-password.php" AUTOCOMPLETE = "off" method="POST"> 
<input type="hidden" name="member" value="1" /> 

<span style="float: left;">
Your old Password:
</span>
<span style="float: right;">
<input size="40" class="only" type="password" name="oldpass">
</span>
<br><br>
<hr>

<span style="float: left;">
Your New Password:
</span>
<span style="float: right;">
<input size="40" type="password" name="newpass">
</span>
<br><br>

<span style="float: left;">
Re-Type Your New Password:
</span>
<span style="float: right;">
<input size="40" type="password" name="veri">
</span>
<br><br>
<hr>
<center>
<input name="chpass" id="submit" type="submit" value="Change Password" >
</center>

</form>

I only want css style for the input textboxes like:

Code:

<input size="40" type="password" name="newpass">

For some reason Its giving me a css style for the submit button:

Code:

<input name="chpass" id="submit" type="submit" value="Change Password" >

How do I do it so the submit button stays default like with no css added to it, but the input text boxes still keep it?

I guess its because they are both starting with the '<input', not sure.

**chrishirst** · 11-07-2009, 09:00 AM

http://www.themaninblue.com/writing/...ve/2004/04/28/

http://articles.sitepoint.com/articl...-web-forms-css

http://www.456bereastreet.com/archiv...form_controls/
http://www.456bereastreet.com/archiv...css_revisited/

**sith717** · 11-07-2009, 09:01 AM

I looked at those.

But I have tried there tutorials and it still gives me styles for it. I want no style for it at all, like a regular button.

Like the: Post Quick Reply button you have under the textbox.

**chrishirst** · 11-07-2009, 09:06 AM

Then don't apply a style to it and it will be a standard button, the design of which will depend on the user OS.

**sith717** · 09:16 AM

I dont, but the thing is then the style for the input boxes wont show, I am trying to make a nice border around it. Can I input it directly with something like:

Code:

<input size="40" class="only" style="border:solid 1px #675f39; padding:4px 2px; font-size:12px;" 
 type="password" name="oldpass">

**sith717** · 11-07-2009, 09:20 AM

That seemed to work:

Code:

<form action="accounts-password.php" AUTOCOMPLETE = "off" method="POST"> 
<input type="hidden" name="member" value="1" /> 

<span style="float: left;">
Your old Password:
</span>
<span style="float: right;">
<input size="40" class="only" style="border:solid 1px #675f39; padding:4px 2px; font-size:12px;" type="password" name="oldpass">
</span>
<br><br>
<hr>

<span style="float: left;">
Your New Password:
</span>
<span style="float: right;">
<input size="40" style="border:solid 1px #675f39; padding:4px 2px; font-size:12px;" type="password" name="newpass">
</span>
<br><br>

<span style="float: left;">
Re-Type Your New Password:
</span>
<span style="float: right;">
<input size="40" style="border:solid 1px #675f39; padding:4px 2px; font-size:12px;" type="password" name="veri">
</span>



<br><br>
<hr>


<center>
<input name="chpass" id="submit" type="submit" value="Change Password" >
</center>

</form>

It gives style to the form, but no to the buttons, thats exactly what I wanted.

I made it direct and removed the css from the top of the page.

**sith717** · 11-07-2009, 09:39 AM

OMG, GTFO!

Almost every thread I make gets spammed with this ****!

**sith717** · 09:47 AM

Okay, well I have done it my way and it works perfect.

I got a new problem:

I want this:

Code:

<span style="float: left;">
Main News Message: 
</span>
<span style="align: right;">
<textarea style="border:solid 1px #675f39; padding:4px 2px;" name="mainnewsmessage" cols="40" rows="8">
<?php echo $row['mainnewsmessage']; ?>
</textarea>
</span>
<hr>

I want the textbox to align at the right, right now its not working and aligning right next to the 'Main News Message:' text.

It would work before:

Code:

<span style="float: left;">
Main News Message:
</span>
<span style="float: right;">
<textarea style="border:solid 1px #675f39; padding:4px 2px;" name="mainnewsmessage" cols="40" rows="5">
<?php echo $row['mainnewsmessage']; ?>
</textarea>
</span>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr>

But I would have to add alot of:

Code:

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr>

to it...

**chrishirst** · 11-07-2009, 09:51 AM

there is no style property of "align".

Instead of messing about with inline rules give give the items that need a style a classname.

**sith717** · 09:58 AM

What do you mean?

Can I get an example of what you mean?

Quote:

input.somestyle {
border:solid 1px #675f39;
padding:4px 2px;
}
textarea.somestyle {
border:solid 1px #675f39;
padding:4px 2px;
}

for the texbox

Code:

<input size="40" class="somestyle" name="mainnewsimage" value="
<?php echo $row['mainnewsimage']; ?>">

for the textarea

Code:

<textarea class="somestyle" name="mainnewsmessage" cols="40" rows="5">

Something like that?

**chrishirst** · 11-07-2009, 10:01 AM

Yep.

...

**sith717** · 11-07-2009, 10:08 AM

Now about my old problem:

I want this:

Code:

<span style="float: left;">
Main News Message:
</span>
<span style="float: right;">
<textarea class="myform" name="mainnewsmessage" cols="40" rows="5">
<?php echo $row['mainnewsmessage']; ?>
</textarea>
</span>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr>

But I would have to add alot of:

Code:

<br />
<br />
<br />
<br />
<br />
<br />
<br />

to it...

My css:

Code:

<style type="text/css">
input.theform {
border:solid 1px #675f39;
padding:4px 2px;
}
textarea.theform {
border:solid 1px #675f39;
padding:4px 2px;
} 
</style>

What do I do about that?

**chrishirst** · 11-07-2009, 10:38 AM

Why does your signature state

"and CSS Coding, Logo and Web Design"

Yet you don't appear to have even basic knowledge of CSS??????

But I suppose I should be used to this by now!!

**sith717** · 11-07-2009, 10:51 AM

That didnt answer my question. :P

Il remove that.

Anyways, what attributes or properties do I use to align it?

**chrishirst** · 11-07-2009, 11:36 AM

<span>s do NOT need floating, they are inline elements that will "sit" alongside each other on the same horizontal plane.

and use margins instead of "loads of <br>s". Read up on CSS at W3Schools

**sith717** · 11-07-2009, 11:49 AM

Okay. So something like this??

Code:

<style type="text/css">
input.theform {
border:solid 1px #675f39;
padding:4px 2px;
}
textarea.theform {
border:solid 1px #675f39;
padding:4px 2px;
 margin-bottom: 100px;
} 
</style>

and

Quote:

<span style="float: left;">
Main News Message:
</span>
<span style="float: right;">
<textarea class="myform" name="mainnewsmessage" cols="40" rows="5">
<?php echo $row['mainnewsmessage']; ?>
</textarea>
</span>
<hr>

**sith717** · 11-07-2009, 11:52 AM

Instead I totally removed the span for the textfield but now its budding up right next to 'Main News Message'.

How do I align it to the right?

**chrishirst** · 11-07-2009, 12:07 PM

use text-align in a BLOCK element

**sith717** · 12:26 PM

Can you show me what you mean??

This is what I have atm:

---

Code:

<span style="float: left;">
Main News Message:
</span>
<textarea class="theform" name="mainnewsmessage" cols="40" rows="5">You may recognize the Poison Arrow pub and the aquanite from our Guaranteed Content polls. Everything in the Poison Arrow came from in-game suggestions and the forums. And thats not all: beware of aquanites...</textarea>

<hr>

and the css:

Code:

<style type="text/css">
input.theform {
border:solid 1px #675f39;
padding:4px 2px;
}
textarea.theform {
border:solid 1px #675f39;
padding:4px 2px;
 align: right;
}
</style>

**chrishirst** · 11-07-2009, 02:21 PM

Just use a list.

http://www.modtalk.co.uk/_site/layout/form-in-list/