Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You may have noticed that the email label is looking a bit crowded, and visually confusing. You can see here we have Email: email is required, butting right up against it. The placement of the required statement is actually driven by screen readers and other user agents. Based on its current placement, a screen reader would indicate that the content is required, before the user gets a chance to skip it. From usability standpoint that's ideal. From a visual standpoint, not so much. So with some creative class usage and positioning however, we can have the best of both worlds.
So we have the 08_05 opened up, and we are going to go ahead and address this form valuation section. So one of the things that we can take advantage of here is positioning, and again, discuss positioning in a lot more detail in the chapter on layout. But just so you'll kind of have an idea of what we are doing here. The Email, and email required are both in the same label. Email is required is in a span tag that surrounds it. And both of these are surrounded by a paragraph tag. You can think of that paragraph tag as their parent element, because that is exactly what it is.
We can put a positioning attribute on that parent element, so that the element inside of it can move around relative to it, rather than any other element, and that's exactly what we are going to do with our first selector. So for this I'm going to hand code it, and again and one of the easiest way is to jump down to these styles, is to simply hold the Alt key down or the Command+Option key on the Mac and click. That brings up your Code Navigator, and if you find a form style that you can click on it, and it will jump you right to your Form Styles in your code, which is awesome. I am going to scroll down and find my last form style, and then we are going to just code this a little bit below that one.
So I'm going to type in p.required. So we are going to do a paragraph style with the class required applied to it. And this is going to be extremely simple, we are just going to do position:relative. So again, position:relative keeps it within normal document flow, but it gives it that positioning attribute, so that everything else inside of it will now position itself relative to this paragraph. So I'm going to switch back over to the design portion of my Split view. I can now select that paragraph using the tag selector, and using the properties inspector, grab that pull- down menu and choose required.
Thing's changed a little bit here in Dreamweaver. Don't worry. Dreamweaver is just having a little issue rendering this. It's not going to render incorrectly in the browser. It's only happening here in Dreamweaver. It's nothing to be concerned about. Okay, let's go back over into our CSS code, and I'm going to type in span.required. Now you are seeing one of the advantages of actually using the element specific class or id selectors. I can use the required class multiple times and have it style differently based on whether it's applied to a paragraph or span tag, so pretty cool. So I'm going to go in the next line here, and I'm going to type in position:absolute.
Now unlike relative positioning, absolute positioning removes it from normal document flow. But now based upon the offset we give it, how far we move it over or down or up, it's going to move relative to the top left hand corner of its parent element, which is the paragraph. So that's why we put the relative positioning on the paragraph to begin with, okay. Now I'm going to type in left 320 pixel, and then we are going to do a padding left. So padding-left of 35 pixels. Now what are both things doing for us? Well, first off left it's going to push it actually over to the right.
So it gives it a left offset, positive values are going to move it to the right hand side. What this is going to do is this is going to move it away from the word email, and move it to the right of the text field. I would love to tell you, I was able to calculate that value precisely, and to a certain extent I did, but just like anything else, you are going to fiddle around with it and try some numbers until you get it actually where you want it. Now the padding left is because we want to style this a little bit more visually. So we are going to add a background graphic to it as well. I'll hit Return, and we need to go ahead and add that. So I'm going to type in background. Remember if you are using code heading, you can type in a u, it will jump down to URL, and when you hit Return, it will let you browse for that image.
So even if your are hand coding, you can still use code heading to help you do things like this, where you browsing on finding things. So we are going to the 08_05 directory_ images, and we are going to go and find the notice_icon.gif. So notice_icon.gif, let's do a little scroll, and he is exactly 30 pixels wide, and that's why we have the 35 pixel left padding. I'm going to go ahead and click OK, and it's going to add that to my code. Now I'm going to do a no-repeat, and then we are going to position that left for horizontal, and then center for vertical, and that way it will center it vertically on our text.
Now I'm going to hit Return to go down the next line, and we can do some color here, and our Color is going to #c00 which is a red, and then on the next line, we are going to height. Now, why are we having to define a height for this. The height is going to be 25 pixels. Well, we are thinking about our image. We want to make sure the span tag is tall enough to display that background image, and that's why we are forcing a height. We are also going to do a line-height of 25 pixels, and that line-height is going to center the text inside that area. So the background will be centered to it, the text will be centered to it, they'll all be centered within those 25 pixels.
I'm going to go ahead and save that and switch back to Design view, because one of the things we are going to need to here is click inside that emails required, find the span tag on your tag selector, and use the properties inspector to grab the pull-down menu and choose required. It may look like it actually has it, and in fact, it didn't apply it. Now why not? It didn't apply it, because it was already applied to that paragraph. As a matter of fact, notice that it removed the span tag. There are some things that work great in Design view, and there are some things that don't. So now what I'm going to do is highlight this text, and do a Ctrl+T. Notice that now I prompt to drag the tag and I'm going to wrap it in a span tag and give it a class required.
So there are some things that just work better hand coding. So now I'm going to do Save All, preview that in my browser, and cool, we are getting exactly the styling we want on that. That is fantastic. Our form layout and styling are now pretty much complete. Now we could leave the form the way it is. But improving the user experience is something that you should always be looking to accomplish. So what we are going to do next is add a little bit of user interaction to our form to enhance its usability.
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.