Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We need to continue styling our form by completing our form layout and ensuring that our labels are positioned properly. The position of labels and the form elements they represent is in the end a personal choice, but the majority of forms place all labels in front of their form elements except for radio buttons and checkboxes, which tend to display the labels after the elements. In addition to styling our labels correctly, we also need to bring some order to our checkboxes and they are a mess right now. As they are now in separate paragraphs, that creates way too much vertical spacing and it's going to be confusing to any of the users using our form.
So, using just a little bit of extra markup, we're going to display our checkboxes in three columns and that should help organize our form greatly. So here we have the join.htm from the 12_14 explorers directory open. Once again, I've collapsed our panels down and I'm focusing on the CSS on the left side of our Split View and the form on the right side. Now, I've taken the liberty of doing a few things for our form and I want to point out to you guys what I have done. So I'm going to scroll down a little bit and find our checkboxes and you're going to see they look a little different.
I didn't say they look better yet, but they look a little different. These dotted lines that you're seeing here are div tags. I've taken our checkboxes, we have nine of them, and split them up into three groupings of three. So, if you would look at the source code, let me go ahead and click on these again, you would see that these checkboxes are now surrounded by div tags and the div tags have a class of column 1, column 2, and column 3. So, there is column 1 and you can see that's it right there. There's column 2, you can see it right there, and there's column 3.
So if you were ever wanting to do this yourself, all you have to do is find your checkboxes, highlight them, and then you can use this little tool right here, Wrap Tag, to wrap them in a div tag and assign them an ID or in case of what we've done here, a class. That just saved us a little bit of time not having to do that ourselves. One more thing, if I scroll down and look at the labels beside our radio buttons, I can see that they have a class. I can see that using our Tag Selector right here. They have a class now applied to them called inline. So we're going to write a selector that's going to take advantage of that in just a moment.
So, I'm going to go back to the main.css, there we go, scroll down. Remember we're on about Line 650, somewhere around in there, and we're actually going to go down to the Join forms around the 689-700 range. We're going to start adding our code here. All right, let's tackle our checkboxes first. I mean that's a big task, so we'll go ahead and get that out of the way. So, on about line 700 there, I'm going to type in #mainContent form#frmJoin, so just the same as we've been doing before, space .col1.
So remember the dot indicates that it's a class and we're looking for col1. So, any element with the class of col1 found in the frmJoin form, found in mainContent. I'm going to open up our curly brace and hit Return to go down to the next line and here I'm going to float these to the left. That's going to help us give us our three-column layout. I'm going to give them some padding to the left. So, padding-left of 20 pixels. margin-right, that's going to keep these guys away from each other a little bit. margin-right 20px and I am going to give the first column a width of 160 pixels.
I calculated that by calculating the width of the fieldset that they were inside of, how wide their labels need to be, and then kind of sort of splitting the difference. So if you're wondering how did he know how wide to make that, you basically just figure out how wide your fieldset is going to be, how much width you need for each of your labels, and kind of factor it that way. Now, I'm going to go down to the next line and write a selector for both of my remaining columns. So #mainContent form#frmJoin .col2.
Now, we're going to apply the same rule to the next two. So I'm actually going to do a comma to group these together, highlight the previous rule and copy it, because there's no reason to type all that over again, and then simply paste that after the comma. Change col2 to col3 and now we have a group selector that's targeting the column 2 and the column 3 at the same time. I'm going to open up my curly brace, hit Return to go down to the next line, and here I'm going to type in float left just as we did before. These are also going to have a margin-right of 20 pixels.
So for right now, they are almost exactly the same. What is different? Well, on the next line, this time we're going to give them a width of 170 pixels. So they are going to be just slightly larger, about 10 pixels wider. If I do a Save All and click over here in our form now, we can sort of see a three-column layout coming to fruition. Now, the reason that we're not seeing a really nice three-column layout, number one, I'm still in Design View, and number two, our checkboxes and their labels are still just a little too large. So, using our styles, we're going to target the interior contents of these columns and sort of just shrink everything down a little bit.
So, on the next line in our code, right after that, we're going to type in #mainContent form#frmJoin div. So we're targeting div tags that are inside that form. To be honest with you, those are the only three div tags inside of that so we know exactly who we are targeting. So here we're going to do a little bit of margin work. I'm going to type in margin 0 0 20 pixels 0. So, top margin of 0, right of 0, bottom of 20 pixels and left of 0.
So what that's going to do is it's going to push those headings down a little bit there. Right below that, we're going to target our paragraphs as well inside of our div tag. So #mainContent form#frmJoin div p. So we're targeting paragraphs inside those div tags now. Once again open up our curly brace, and here you're going to type in margin, 0 for top, 0 for right, 0.5 ems for bottom, and then 0 for left, and don't forget to close your curly brace there.
So now those individual paragraphs, which remember the label and the checkboxes are fitting in a paragraph, that's going to help us space those guys a little bit closer and tighter together. Now finally, as far as our checkboxes go, let's go ahead and make the labels themselves a little bit smaller so that they fit in within those columns a little bit better. So #mainContent form#frmJoin div label. So really those are almost the same. We are just now targeting labels inside of these div tags as well.
Here, we want to change our font-size. So not just font, but font-size to 0.9 ems. So, we're shrinking them down a little bit. We're going to display them, so do a display inline. Then for floating, I'm going to choose none. So, that's going to take away sort of the default float that's been happening there. We want them to be on their own lines and we're going to display the labels inline so that the checkbox displays right beside. When we click on that now that looks a lot better, but if we go to Live View and scroll down, you can see that now we have our three-column layout. Perfect! Now, we're almost done.
You guys are doing a great job! I appreciate you hand coding. I hope that you are finding it to be a little bit to your liking at least. And we have three more rules that we need to write here really quickly. First, we need to make sure that our radio buttons are appearing on a single line. Right now, this is all really confusing. So let's go ahead and tackle that first. Right down below this rule, type in #mainContent form#frmJoin label.inline.
So we're targeting any label that has the class inline applied to it. We're going to turn float to none, so we're going to turn floating off and we're going to give it a width of auto. An auto width basically says ignore the width that was set earlier and allow the content itself to form the width of it. It's going to help that out a lot and you'll notice by clicking into this Design View, our radio buttons are now on a single line. Very good! Now, the only other thing we have left to do are these headlines. How many Explore California, I'm interested in the following tours, Profile Bio, those are all sort of subheadings and they really need to relate to that content a little bit more.
There's too much spacing there, there's no real great relationship between them, and the Profile Bio is sitting beside the form element, which just looks weird. So we're going to write a couple of selectors that are going to help us here and then we're going to apply some classes and the overall styling of our form is going to be finished. So, I'm going to type in #mainContent form p.subHead and subHead is going to be lowercase S, uppercase H. So that's basically saying any paragraph with a class of subhead applied to it inside of our form.
Down below that, we're going to type in margin, 0 for top, 0 for right, 0 for bottom, and 20 pixels for left. Then we're going to type in clear both. That's going to now allow any floating whatsoever. It's going to make sure that paragraph stays by itself, but more importantly, we're resetting our bottom margin to 0, which means there won't be a huge amount of space between our paragraphs and our form elements. One last thing. We need to do that to our label as well. So I'm going to go down below that and I'm going to type in #mainContent.
Now, here we're going to do something a little different. Type in now #mainArticle as well. So #mainContent #mainArticle, I'll talk about that in just a moment, form label.subHead. Open up your curly brace, go down the next line. Here we're going to change display to block. We're going to turn float to none. We're going to give it an overall margin of 0 all the way around and give it a width of auto, so that the label itself forms the width.
So what are we doing here? Well, the reason we're using this main article is because we want this label which is right here, it's going to be this little guy, to override all the things that came before. In order to do that, we had to make this selector a little bit more specific, which is why mainArticle is in there, because this form is in mainArticle as well as mainContent. We are changing the display to block. That means it's going to display on its own line. We're turning floating off and that is going to prevent our form element from floating up beside it like it is now. A margin of 0 means it's going to be up here right above it without a whole lot of spacing between it, and then the width of auto says don't limit yourself to the 125 pixels that we have put on the rest of the labels. You go ahead and be as wide as you want.
In order for us to do that, I'm going to turn off Live View. I'm going to click inside this text, use the Tag Selector right down here to select label and then I am going to choose subhead. You can see now it sits right on top of that form element and it's giving us the spacing that we want. I need to do the same thing with our paragraphs. So I am interested in the following tours. I'm going to click inside that paragraph. Click the P tag just to make sure that I've got that. Again, using the Properties Inspector, I'm going to give it the class of subhead. Then I'm going to do the same thing with right here, How many Explore California tours have you been on, grab the paragraph and make it subHead.
Now if we do a Save All, test that in our browser, and as I scroll down now this part of our form is aligning itself quite nicely. So, our form now has a robust layout, very clear visual styling. Although at this point our basic form is done from that standpoint, there is still a little bit of work left to do on our form. In our next movie, we're going to explore making our forms more effective by adding user feedback and interactivity.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.