Re: [css-d] Form styling: best practices
15.9.2011 6:29, Dark Phoenix wrote: I want to be able to add hints to any form elements that may need them, and have them only show up when they're needed (using some sort of hover mechanism). That's an interesting and important issue but largely outside the scope of CSS. Or, rather, just a part of it is CSS, and the design issue and other implementation issues need to be solved first, before the CSS aspects can be discussed. In design, CSS considerations may be important, because the impossibility or difficulty of doing some things in CSS may affect the design choices. But I don't think that's the case here. I do know that I'm going to indicate errors with a popup on the right side of the form element (that shows up when the element is focused or the error icon which will appear on the right side of the field is hovered), so I'm not sure if putting the information indicator to the right of the element is the right move. Well that's a design issue too, but styling may help: if you use the same notification area for both status information and error messages, you could style it differently depending on contents. For example, error messages with red borders and yellow background. Instead of popup, it has become more common to use information areas that become visible or change content as controlled by JavaScript and CSS. (Popups may annoy people, may get blocked etc.) Yet another possibility is to use iframe for them, as that way things can work without JavaScript. I don't want to start a discussion on such design issues in this list - just mention a few of alternatives, to illustrate why it's too early to discuss CSS aspects - the different approaches have rather different CSS implications. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form styling: best practices
Check how they do it on http://wufoo.com/ - a popular form builder. Kevin On Thu, Sep 15, 2011 at 12:42 AM, Jukka K. Korpela jkorp...@cs.tut.fiwrote: 15.9.2011 6:29, Dark Phoenix wrote: I want to be able to add hints to any form elements that may need them, and have them only show up when they're needed (using some sort of hover mechanism). That's an interesting and important issue but largely outside the scope of CSS. Or, rather, just a part of it is CSS, and the design issue and other implementation issues need to be solved first, before the CSS aspects can be discussed. In design, CSS considerations may be important, because the impossibility or difficulty of doing some things in CSS may affect the design choices. But I don't think that's the case here. I do know that I'm going to indicate errors with a popup on the right side of the form element (that shows up when the element is focused or the error icon which will appear on the right side of the field is hovered), so I'm not sure if putting the information indicator to the right of the element is the right move. Well that's a design issue too, but styling may help: if you use the same notification area for both status information and error messages, you could style it differently depending on contents. For example, error messages with red borders and yellow background. Instead of popup, it has become more common to use information areas that become visible or change content as controlled by JavaScript and CSS. (Popups may annoy people, may get blocked etc.) Yet another possibility is to use iframe for them, as that way things can work without JavaScript. I don't want to start a discussion on such design issues in this list - just mention a few of alternatives, to illustrate why it's too early to discuss CSS aspects - the different approaches have rather different CSS implications. -- Yucca, http://www.cs.tut.fi/~**jkorpela/ http://www.cs.tut.fi/~jkorpela/ __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] form styling
Yes, like the bottom. I can add any tags needed in the form. I'll give this a try shortly, thanks! -- Debbie On 4/29/2011 9:12 AM, Tim Duffy wrote: you want the top styled like the bottom. right? is thebr tag dynamically generated in the top form? if you get rid of that, add the property overflow:hidden to .wpcf7-form div.textInput then play with the bottom margin to get what you want on the checkboxes there is a display:block on the span around the text. move that to the span around both the checkbox and the text. Tim On Fri, Apr 29, 2011 at 10:43 AM, Debbie Campbell d...@redkitecreative.com wrote: I'm having problems with styling this form at the top, generated from a WordPress plugin, to match the HTML form at the bottom: http://www.hachseminars.com/contact-us/ Specifically, it's lining up the labels and inputs in the top section evenly, and the same for the Your Interests section (and moving the checkbox area to the right to line up with the inputs in the Contact Info section). Can someone point me in the right direction? -- Debbie Campbell www.redkitecreative.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form styling
On Tue, 2008-12-16 at 12:36 +0100, Gunlaug Sørtun wrote:
Mike Davies wrote:
I am trying to style the layout of a form for a search box on a
website at www.deveron-arts.com. The client has asked for it to
resemble the google search box in a browser.
Which browser? There is quite a spread across browser-land.
Firefox, at the top right.
I have got the text input and the button as I want them but can't get
them to line up.
In its simplest and best cross-browser (and version) supported form...
#searchform input {vertical-align: middle;}
...aligns text and button quite nicely.
Thanks Georg, that works perfectly.
--
Mike Davies
Integra Web Design, Rhynie, By Huntly, AB54 4LS
01464 861535www.integrawebdesign.co.uk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form styling
Mike Davies wrote:
I am trying to style the layout of a form for a search box on a
website at www.deveron-arts.com. The client has asked for it to
resemble the google search box in a browser.
Which browser? There is quite a spread across browser-land.
I have got the text input and the button as I want them but can't get
them to line up.
In its simplest and best cross-browser (and version) supported form...
#searchform input {vertical-align: middle;}
...aligns text and button quite nicely.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
