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.
What I'm going to do now, is complete the HTML portion of my page for the menu area, simply by creating links for each one of the words down in the menu region. So, what does my page look like at this point? Well, I have a Header div with an image inside of it. That div has been restricted to 850 pixels wide, because that's what the width of my image is. I've also added a second div on the page for my Navigation menu, and inside that div, I've placed this text.
Now, each one of these will become a hyperlink to that particular area of the website. So I'm going to go down to the Code area, and feel free to use whatever method you want to create this particular code. Since I'm in CoffeeCup, I'll go ahead and use some of the features built-in to CoffeeCup. I'm in the HTML5 area and I'm in the Code tab, within this area, I have the anchor tag.
And what I can do is drag that tag out and simply remove my words within it. Now, within this area I do need a href, so I'll go ahead and do the href and I'm just going to leave that blank for now. And for most of these lengths I'm going to leave this blank, but I know that my homepage will be called index and I'm assuming it's an HTML page. If it's not, I can go ahead and change it later.
So I'll set that up and I'm going to do the exact same thing for the rest of these. Now, it's probably easiest just to copy at this point and I'll just paste this in this area. Now, my anchor does not directly match my image, so let's go ahead and I'll try to do some proper code here. I'll paste that anchor, and now I'm going to delete the index, because I'm not really sure what the page name is going to be. Within this area, I've put in on a new line, and I'm just going to go right down the line, adding these hyperlinks. I'll go ahead and copy and paste the closing tag in. So, use whatever method it is that you want to use in order to work with these. So I'll just copy and paste it in front of each of these, put a closing tag at the end.
And so, I'm just going to do this using a variety of methods, just so you can see it can be done any way you wish. If your interface has a quick and easy way to do this, go ahead and use it. So I'll make this a little more efficient, and my packages will go up here, and my contact us right here. And then I simply need a closing tag. Now, once I do this, I'm going to end up with the default look for a hyperlink, because I only have HTML within this menu, but there is my code. Let me take a look at it in my browser and we can see where we're at. Now, notice, I'm in the royal blue underlined and the purple underlined, which are the two default views for an HTML Hyperlink. Royal blue if I have not visited it yet, purple if I have. And since I don't have a link or a page name in here, these all end up purple. But there is my menu all set up.
I've completed the HTML portion by making these each an individual hyperlink. Once I get the name of the page, I'll go ahead and drop that in this area. So ultimately, our page is going to end up looking like this. Now you can see in Internet Explorer, it gets a slightly different color and none of these show up as a visited link. But what we did was we just converted our words into hyperlinks, so we have finalized the HTML piece.
I want to make them hyperlinks before I move into working in CSS, because the Hyperlink feature, I can change once I get to the CSS piece. I usually don't like underlines on my hyperlinks, because it can interfere with the design. But we can work with that when we get to Adding CSS Properties to our menu. So that is our menu div with its content all set and finalized and ready for the CSS piece.
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.