Welcome to WebmasterWorld Guest from 54.162.139.105

Forum Moderators: not2easy

Message Too Old, No Replies

Setting up multiple form styles on one website

how to I set this up in css?

     
1:33 am on Nov 29, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


I have 3 different sizes and styles of forms on one website, each with different features, however I'm not sure I have set this up correctly being as I have more than one class for some of the items.

I have one called "contact" another for "referrals" and another for "wholesale".

I'm using html5 and css3 and also have this set up for RWD in media queries so it's a lot of coding.

Is there any way to shorten the code?

Here is the one for referrals:


.referrals {width:375px; margin:0 auto; border:1px solid #999; padding:5px;}

.referrals label {
clear:both;
float: left;
height:30px;
text-align: right;
margin-right:5px;
width: 170px; }

.referrals input,
.referrals textarea {float:right; margin-right:30px; padding:5px;
color:999;}

.referrals .comments { clear:both; margin:0px auto; padding:5px; width:95%; }

.referrals input:hover,
.referrals textarea:hover,
.referrals input:focus,
.referrals textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;}
.referrals .submit {display:block; margin:10px auto; }
5:41 am on Nov 29, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


If you are looking for a shorter way to group selectors that share a class and variables you would only need to write the class once for any of those. An example is this one:
.referrals input, textarea {float:right; margin-right:30px; padding:5px; color:999;}


the links are a little more complicated but the idea is the same. They can be grouped as:
.referrals input:hover, input:focus, textarea:hover, textarea:focus
{border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;}


Just a note - using pixels with RWD can be a problem because device pixels are not a measurement as they have been traditionally used. If possible convert your measurements to ems or percentages. It can be confusing, but ems are not a measurement either, more like a ratio.
8:46 am on Nov 29, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14245
votes: 550


If you are looking for a shorter way to group selectors that share a class and variables you would only need to write the class once for any of those.

Documentation, please? It runs counter to everything I have ever been taught.
3:20 pm on Nov 29, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


Sometimes I rely on my own observations and experiences rather than looking things up, my bad, but I have seen this in valid CSS in the past and that really is valid CSS3 according to W3's jigsaw: [jigsaw.w3.org...] (the Validator caught something simple and unrelated I had overlooked:
border-color
should be edited to simply "
border
".)
(CSS level 3)

Value Error : border-color 1px is not a border-color value : 1px solid #C9C9C9

Warnings (2)
URI : TextArea
4 Property -moz-box-shadow is an unknown vendor extension
5 Property -webkit-box-shadow is an unknown vendor extension

Valid CSS information
.referrals input:hover, input:focus, textarea:hover, textarea:focus {
box-shadow : 0 0 8px rgba(0, 0, 0, 0.2);
}


Trying to find the exact documentation takes more time than I had, the closest to it is at [w3.org...]
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
9:03 pm on Nov 29, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14245
votes: 550


It's not about validation. The two forms
p.classname .otherclass, p.classname .secondclass, p.classname .thirdclass

vs.
p.classname otherclass, .secondclass, .thirdclass

are both perfectly valid CSS. But they lead to different results.

If your named "descendant" classes can only, ever, occur inside some "ancestor" class, then there's no need to name the ancestor at all. But I thought the OP was about items that can occur inside any of three different ancestors. In that case you need the double selector at every point.
1:49 am on Nov 30, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


You're right, I was looking at this only from the point of a shortcut for the code, but with the same in three forms you can't take that kind of shortcut. Each must be specified.
11:23 pm on Nov 30, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


Ok, if I "translated" the CSS-speak correctly, I need to specify each form type/ancestor separately.

It would be much easier to maintain but takes up more code.
11:53 pm on Nov 30, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14245
votes: 550


Well, maybe CSS4 will allow parentheses ;)
5:59 pm on Dec 2, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


Thanks for your input folks.