Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
I want to give you an idea of the web page design for this course. And also give you an idea of the actual layout of this particular design. So that you can become familiar with why I'm creating the divs the way that I am. So, on the left here, is the actual page design, and there's no specific reason why I have it open in Firefox, it can be opened up in any image editor. So, this is the ScubaBlu fictitious company, which is a travel company for dive vacations, and this particular webpage has this design.
This is what we have to create in HTML in CSS. So in looking at the page, you can start by looking at it from a box standpoint. Since every HTML div is a box. Let's take a look at what extra boxes need to be created, in order for us to place this content. So the first thing we do is take a look at this upper area. And that will become the header box. So, across the entire top we'll run our header div with an ID called header. The next thing we need to look at is what's the rest of the page structure look like.
So, I am not looking at the details of the design at all. I am looking at it in terms of page content. What I mean by that, is technically this lower portion of the page is a three column structure. And that three column structure is comprised of a menu on the left, a text content area in the middle, and another right column with three images and some text.
So what I could do is create three different boxes to represent each one of those content areas. Then down at the bottom of this page, I have an image. And we can't really use curved images. At least not in all browsers at this point. There's also a little curved drop shadow feature. So what I'm going to do is maintain that look as an image. So the image itself will be represented right there as my footer.
So I'm going to need a footer box in order to place that image all the way across the bottom of my page. So here are the five boxes of content I'll be working in. The header, the menu, left, right and footer. And what I've done is placed the name of the box, so when I go to create my CSS, I just need to create five IDs and the names are already predefined.
So that's the plan for this course. There will be five divs created for each box of content. Now it's possible to add an additional box surrounding all of that. But if I just look at my content for now, my content will be maintained in five boxes of their own. So, I will go through and create each one of these regions of my page one at a time and build my page. So that is the page design, and the boxes that we will be creating within this course.
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.