Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
So for this video we're going to look at actual links inside the table cells and how we might improve their interactivity a little bit and also some of the issues that follow as a result. So we have these white boldfaced bits of text, that are actually hyperlinks. Once you'll be moving the cursor we can see it changes into the little gloved hand of clicking. We may want to bump up actually effectively the visual feedback beyond just a little clicking glove.
We might also want to put on a hover effect for example, so here at the end of the style sheet I'm going to put in for any a element inside the post-archive that gets hovered to a background it's found elsewhere. And if we hit Reload at first, we don't see anything until we move in the cursor and start hovering and you can see that we now have a cute little green background hover effect.
The only real problem being that not only is the background hover points to our problem, these links are only as wide as their content, which is to be expected. I mean if you have a hyperlink, the hyperlink is only as big as the content inside the hyperlink, whether it's text or an image, but here is not so great because you know, I might have my pointer over one of the tables, notice like I do here and yet I can click on it, but if I click on it nothing will happen because I'm over the hyperlink here, I have to exactly hit this and that's actually not a great usability. There's an actual law called Fitz law, which basically says, if you have a hotspot, if you have something that you can click with you should make the interactive areas basically as large as you can without, you know, interfering with other things.
So here's what we're going to do. We're actually going to convert the way that these hyperlinks are drawn from the inline, from generating inline boxes which is what they usually are to drawing block boxes. Now, if I hit Reload nothing really changes visually yet until I'm moving my mouse and I start hovering. And you notice now that these links fill in, basically their entire table cells.
So anywhere inside a table cell is now clickable because the link is generating a largish box. Now is generating block little boxes as though they were a div or a paragraph inside this table cell. And now we can see this even more easily if we went back and add in table cell width the spread out the table, like we did it briefly in an earlier video and again, these guys now have their click boxes, if you want it to think it that way, spread out to cover the entire table cell and that's because the a element is generating a block box, just the same as if it were a div or a paragraph or heading or something like that.
So that's a one way to make the links inside of a table like this one, like a monthly calendar be a little bit easier to interact with and also look a little bit better, because frankly, you know, before, if we'd hovered over the seven before we added the display block, then there would have just been this little green strip behind the seven, highlighting that and the rest of the table cell would've just remained with a dark grey background and this way it fills it in all completely and nicely and it's all very lovely and frankly looks a good deal more professional than what happened before we added the display block, so it's just a quick look at how to make links inside of calendars or tables in general, act a little bit better.
There are currently no FAQs about CSS Web Site Design.
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.