paulmo Posted February 3, 2009 Share Posted February 3, 2009 need to center part of the form. this in style sheet: p.center { text-align: center; } form: <div style="background-color:#FFFFFF; padding:10px" class="rounded {10px}">//class is jquery script that's working fine. <form name="myform" method="post" action="action.php"><p>First Name: <input type="text" name="name" value="<?php echo $post_name;?>" class="buttonsb"/></p<p class="center">Write something: </br></br><textarea name="message" rows="2" cols="35" class="buttonsb"></textarea><input type="hidden" name="searching" value="yes" /></br><input type="submit" value="Process" class="buttons"></form></p><p class="center">this works</p> Link to comment Share on other sites More sharing options...
eXo Posted February 3, 2009 Share Posted February 3, 2009 The part from "Write something" till "this works " is center'dOr do you mean something els? if so be more clear. Link to comment Share on other sites More sharing options...
Jerry62704 Posted February 3, 2009 Share Posted February 3, 2009 need to center part of the form. this in style sheet: p.center { text-align: center; } form: <div style="background-color:#FFFFFF; padding:10px" class="rounded {10px}">//class is jquery script that's working fine. <form name="myform" method="post" action="action.php"><p>First Name: <input type="text" name="name" value="<?php echo $post_name;?>" class="buttonsb"/></p<p class="center">Write something: </br></br><textarea name="message" rows="2" cols="35" class="buttonsb"></textarea><input type="hidden" name="searching" value="yes" /></br><input type="submit" value="Process" class="buttons"></form></p><p class="center">this works</p> What is <p> going to be centered in? More importantly, how do you define "center"?Let's assume that you want it to look like this (periods are to be seen as spaces):|...First name: [input box].........||....Last name: [input box].........||...........Write something...........||....[....................................]....||....[....................................]....|(assuming the bars line up) - is that it?If so, then you want the First name and Last name in a div (because you want a specific placement) so it might look like (off the cuff):<div class="inputText">First Name: <input...></div><div class="inputText">Last Name: <input...></div><div class="centerText">Write something</div>where.inputText {width:xxx; margin: 0 auto;}.centerText {width:30%; margin:0 auto;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Home</title><style type="text/css">* { border: 0; margin: 0; padding: 0; }.textCenter { width: 50%; margin: 0 auto; }.inputText { width: 70%; margin: 0 auto; }div { width:100%; }</style></head><body><div> <form action="post"> <div class="inputText"> First Name: <input type="text"></input> </div> <div class="inputText"> Last Name: <input type="text"></input> </div> <div class="textCenter"> Write stuff </div> <div class="textCenter"> <textarea rows="4" cols="4"></textarea> </div> </form><div></body></html> Link to comment Share on other sites More sharing options...
paulmo Posted February 4, 2009 Author Share Posted February 4, 2009 thanks for the p class code! Link to comment Share on other sites More sharing options...
jwcane Posted April 20, 2014 Share Posted April 20, 2014 Could someone show me how to edit/extend the "inputText" class referred to above, to customize the style elements/properties of edit controls, i.e., size, shape, rounded corners, background color, etc., using css alone if ;possible. Coding without recourse to java or other scripting is desirable but not a show-stopper. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 20, 2014 Share Posted April 20, 2014 so many ways to do this <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> input,textarea {border: 1px solid #333; padding: 2px; margin: 8px;} input { width: 200px; } textarea{width: 278px;} /*will overwrite set cols width */ label {display: block; text-align: center;} .rounded input, .rounded textarea { border-radius: 5px; background-color: #D3E2FE; } .rounded input:focus, .rounded textarea:focus {border-color: #A5A5A5;} .rounded_border input, .rounded_border textarea {margin:0;} .rounded_border > span { border-radius: 7px; background-color: #eee; padding: 5px; display: inline-block; margin: 8px;} </style> </head> <body> <form action="post"> <label class="rounded"> First Name: <input type="text" name="fname" placeholder="Enter first name"> </label> <label class="rounded"> Last Name: <input type="text" name="lname" placeholder="Enter last name"> </label> <label class="rounded"> Write stuff </label> <label class="rounded"> <textarea rows="4" cols="25" name="info">Enter Other</textarea> </label> <hr> <label class="rounded rounded_border"> First Name: <span><input type="text" name="fname2" placeholder="Enter first name"></span> </label> <label class="rounded rounded_border"> Last Name: <span><input type="text" name="lname2" placeholder="Enter last name"></span> </label> <label class="rounded"> Write stuff </label> <label class="rounded rounded_border"> <span><textarea rows="4" cols="25" name="info2">Enter Other</textarea></span> </label> </form> </body></html> Link to comment Share on other sites More sharing options...
jwcane Posted April 21, 2014 Share Posted April 21, 2014 Excellent, Sacred, just what I was looking for. Many thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 21, 2014 Share Posted April 21, 2014 (edited) The name is uk, dsonesuk Edited April 21, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
jwcane Posted April 23, 2014 Share Posted April 23, 2014 <label class="rounded">Last Name:<input type="text" name="lname" placeholder="Enter last name"></label> Have not succeeded with a couple of approaches to formatting the caption text ("Last Name:", in the above example). Can that be done with a css style, or does it require inline formatting? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 23, 2014 Share Posted April 23, 2014 /*option 1*/label {color: red;} /*will affect label text and child element text*//*option 2*/label.rounded {color: red;} /*will affect label with class 'rounded' text and child element text*/ so you will have to reset input text color to the color you require. /* if using option 1*/lable input, lable textarea {color: #333}/*if using option 2*/.rounded input, .rounded textarea { color: #333 } Link to comment Share on other sites More sharing options...
jwcane Posted April 23, 2014 Share Posted April 23, 2014 Here is revised css content: .Label, .Label.rounded { color: #F8F4E9 /*Cream*/ } .Label.rounded input, .Label.rounded textarea { border-radius: 5px; background-color: #F8F4E9; /*ctlBG, Cream*/ color: #2F3B2E; /*ctlContent, dkGreen*/ } .Label.rounded input:focus, .Label.rounded textarea:focus { border-radius: 5px; background-color: #EAF9E9; /*ctlBG, ltGreen*/ color: #2F3B2E; /*ctlContent, dkGreen*/ } In html, the following example: <label class="rounded"> First Name: <input type="text" name="fname" placeholder="Enter first name"> </label> ...is rendered as expected, with following exceptions/questions: -- The leading text, "First Name:", is still being rendered in black, for edit and TextArea controls. One option might be to simply not use any leading text, since the placeholder fills that function. -- When it has focus, the control turns to square corners (border-radius=0). Is this standard behavior that cannot be modified? -- Can the (default color = blue) focus-box color be modified? -- In the case of the TextArea input, if I eliminate the leading text, is there a counterpart to 'PlaceHolder'? Tried to specify 'PlaceHolder' in my TextArea, and it was not rendered Link to comment Share on other sites More sharing options...
dsonesuk Posted April 23, 2014 Share Posted April 23, 2014 class is represented as . , and id ref as # Now given that, is there anywhere in your html element coding a reference to a class by the name of 'Label' that you have referenced here for example .Label.rounded Link to comment Share on other sites More sharing options...
jwcane Posted April 23, 2014 Share Posted April 23, 2014 (edited) Not sure I understand your question. I am new to these advanced concepts. I am just trying to conform to the sample css and html coding that you have posted in this thread, while adapting that coding to my needs. Edited April 23, 2014 by jwcane Link to comment Share on other sites More sharing options...
dsonesuk Posted April 23, 2014 Share Posted April 23, 2014 This is not advanced, this is basic of applying a class name, and using that classname to apply styling to the element with this classname and child elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now