Now that you’re a pro with floats, in-line elements, and absolutely positioned items, it’s time to complete the CSS positioning tutorial with one last type of position named fixed positioning. While rarely used, fixed positioning brings with it various advantages. Frequently, it is used for things like sticky footers. A sticky footer is a case where the footer remains fixed at the bottom of the page no matter how you scroll or how you minimize or maximize the page.
Until now we’ve discussed in-line elements (such as link anchors), floating elements (such as list items), and today we’ll discuss absolutely positioned elements. The theory and advantage behind absolute positioned elements is that you have complete control on where you want to place them (to the nearest pixel). Today’s post is special in that it contains both a screencast tutorial as well as a written tutorial, and from today, you’ll learn everything you ever wanted to know about CSS absolute positioning.
A website without links is not really a website, and you already know that. You also know how to create anchor links (if you forgot, see previous posts). But how do we tell the browser to go to a specific page when the link is clicked? That’s the purpose of today’s discussion. The end result will be a website with three pages, home, about me, and contact me. Each page will have its own content so you’ll be able to tell the difference.
Today is different. Today I decided that instead of writing out everything, I’ll do a screencast (a video tutorial) instead. In the screencast I go over how to work with tables using xHTML. I discuss (and learn myself) how to use CSS to style tables and talk about CSS commenting etc. If this works well, I’ll continue doing screencast tutorials so they’re easier to understand. The final product is the image on the left.
Today we’ll move away from lists altogether and learn how to construct a simple contact form similar to the one on the left. I will introduce the xHTML markup and leave the styling up to you. I can provide with some basic CSS styles, but it’s so variable that it honestly does not matter. So let’s get on with it, keep it short and sweet.
Today we’ll leave the world of unordered lists, which are primarily used for navigation menus and displaying images in a gallery, or inline items. Today we’ll discuss ordered lists. Ordered lists are generally used for content purposes only. They’re used to display an actual list, like the one shown on the left. They’re very simple to implement and work with. The awesome part of ordered lists are the WIDE variety of list-style-types that you can work with. They’ll all be shown here. But first, let’s introduce the xHTML markup and show the final result.
Today represents the answer to quiz #2. As you know, the whole purpose of this quiz was to help you generate your first navigation menu that you can use in your real world projects. I’m going to try to keep the posts short, sweet, and to the point. So let’s get right it.
As promised, today will be a quiz today. You will replicate the picture on the left using the xHTML code that I’ll provide. This code generates a real-world navigation menu that you’ll be able to end up using in your future projects. So let’s keep today’s post short and get right to it!
Well I took a one-day break from posting yesterday. I’m currently working on a few clients simultaneously, so I didn’t have time to post. Today we’ll continue our journey through the world of CSS and xHTML, and I will introduce the concept or lists. We’ll start with an unordered-list. You should know that most website navigation menus are based off unordered-lists combined with float CSS positioning. Therefore, you’ll have another quiz tomorrow. It’ll be our very first functional navigation menu. You’ll be able to copy/paste this menu into your site from now on. It’ll be the same menu most web-designers use (the smart ones anyway…)
Well, last time we left off with a bunch of criteria to accomplish the picture on the left. As a web designer, you’ll often find really beautiful websites that make you want to try and replicate them. My suggestion? DO IT! The best way to learn the art of website design is by actually doing it. Actually, that’s probably the best approach to learning anything in life. I’ve perfected all of my skills through web design projects and side projects. What were my side projects? Replicating simple and complicated sites.