Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.
My web page is matching up quite nicely to my original web design. But one of the things that a design cannot take into account, is a navigation menu and the web's interactivity. So one last touch I want to add to this webpage that my design did not address, is my menu items here. I'd like this to do something when the user rolls over those menu items.
And using CSS, it's not too hard to add that final feature to your webpage. Right now, my menu is contained within a div called menu. I also have my hyperlinks being created using these styles right here for the a tag. What I want to do, is designate only within this menu area do I want the hyperlinks to look like this. I don't want the hyperlinks across the page to look that way, so I'm going to say #menu.
So the hyperlinks only within the menu area will look like this. So now that I've got that set up, what I'm going to do is add another style for the hover state. A hyperlink has different states to it, and one of them is the hover state. And what that means, is when the user places their mouse over that hyperlink, any one of these, what do I want to have happen? And what I'm going to have happen is, I'm going to have the background color change.
And the color I'm going to change to, I've already figured out, and that color is #7DC1EB. Let's take this out into the browser, and get an idea of what this looks like. And I'll go ahead and test this in Safari. Notice when I hover over the text, it does show the nice background color, so you can see how nice it is to add interactivity.
But my text is butting right up against the left-hand side, and extending quite a ways out to the right. What is determining how wide this should be? Well, that comes down to how wide my actual menu is. So, I'm going to want to narrow my menu, make it not quite so wide. I also want to add a little padding on the left-hand side. And I can add the padding within the hyperlink hover state just like we did, so I'll go ahead and do that. And if I add it in the hyperlink, hover state, which I'll do, let's do 15 pixels and see how that ends up.
You'll see what happens to my text. Usually, if you're going to do it to the hover state, you will want to add it to multiple states. Can you see how that's bouncing around a little bit? So I want to take that padding left, and I'm going to copy it, and also put it in my regular state. So, anything that is a hyperlink is going to have that padding, and anything that's hovered over is going to have that exact same padding. Now my regular menu is up at the top, and I could move all of that up here. You can see how it gets difficult to scroll back and forth, but my width here I'm going to modify to 136 pixels, so it's not quite so wide. Let me save that, and this time I'll put it in Internet Explorer. And you can see that looks much better.
I could even narrow the width just a little bit narrower. So it's not quite so wide, I have to allow for destinations being the widest. So let me drop that down just a little bit more. Let me go 130 instead. And I'll go back to Internet Explorer just because I haven't used it much, and that looks pretty nice. Now I could have the text color change, I could do whatever else I wanted to with regards to the box model, by adding a border or whatever else surrounding the content.
And if I wanted to do that, I could go into the same hover state. So that is how you can modify hyperlinks within different states. I think this adds a nice effect. To add a little bit of interactivity to our menu. And all we're using to do it is CSS properties.
There are currently no FAQs about Exploring CSS Positioning.
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.