EngineerCreativity: Webdesign by Amit Shavit

New laptop; Which brand, type, model?

Amit — Sat, 18 Sep 2010 19:15:48 +0000

A few weeks ago I purchased a brand new Lenovo ThinkPad T510. I’ve had a ThinkPad T43 for quite a while, so I decided to upgrade. Given Lenovo’s (who acquired IBM not too long ago) reputation for quality and reliability, I obviously decided to stick with the ThinkPad line. Boy was that a mistake for the T510.

It almost seems as if Lenovo screwed up badly with the T510. When you purchase a laptop with 4GB of RAM, an Intel Core i5-540M processor with 2.6 GHz (dual core, of course), and the best wireless card offered on the market today, you expect perfection. You pay $1100 for a laptop (that’s not a Mac, may I add), and you should expect NOTHING short of perfection.

And what do you get with the ThinkPad T510? You get disappointed, dissatisfaction, depression, anger, frustration, and many many other terrible emotions you never thought to experience with Lenovo.

So what were the real problems?

Well, I experienced two major issues that I could not resolve.

1) The Touchpad didn’t work (happened intermittently), and sometimes would be insensitive to my finger’s motions. When you consider a touchpad, you consider sensitivity. You expect every movement of your finger to move the mouse. You don’t want to press to hard, neither do you want to spent hours trying to figure out how it works. Also, it’s flushed with the rest of the keyboard, so it’s very hard to know where the boundaries of the touchpad are!

2) Perhaps the worst problem of all, the CPU gave out a high-frequency whine. This whine was consistent, and it never stopped, only under conditions when the CPU was under heavy load. This presents a lot of problems for someone who spends a lot of time in silence trying to read textbooks and do problem sets that require intense concentration. If you think this whine won’t bother you, you’re wrong. Simply wrong. I tried to get used to it, but it’s just there. You notice it. It’s bad. You can’t study with it. If you’re a person who listens to music all the time and is rarely under quiet conditions, then this problem probably won’t bother you. Otherwise, I strongly advise you to NOT purchase this computer solely because of this problem

So what do you think I did after I found out I paid $1100 for a computer that’s defected? Well, despite my frustration, I wanted to give Lenovo a chance to redeem themselves. So I sent them the laptop for repair (2 days after I received it). I got it 9 days later (which they said should take no more than 7 days). The note said they replaced the motherboard and fixed the touchpad.

Well, the note was wrong. Yes they replaced the motherboard. No the touchpad was not fixed. And no, the whining noise was not fixed. At that point, I decided to stupidly try and find a solution myself. I spent countless days researching solutions for the touchpad and the whining noise. I was able to solve the touchpad issue by reverting the drivers back to the original state. It seemed that the new drivers the Lenovo gave out were defected and thus only the older drivers worked. Go figure.

However, I was not able to fix the whining noise. After around a month of trying to find a solution, consulting with Lenovo employees and fellow colleagues, I came to the conclusion that I must return the laptop. This is after I spent MANY MANY hours trying to figure out a solution, installing all of my software on it, and seriously personalizing the computer, because I truly thought no Lenovo product could be this bad.

So if you’re about to purchase a Lenovo computer, I’d strongly advise you to stay away from the T410 and T510. They have this horrendous whining noise that you cannot avoid.

Good luck!

Is it important to have valid xHTML and CSS?

Amit — Mon, 06 Sep 2010 23:08:44 +0000

People frequently ask for their site to be validated with the W3C validation system. Therefore, we, as proficient web designers, work very hard in order to accommodate those requests. I’ve decided to write a small post on why having a valid website is useful both for us (web designers) and for you (the clients, end-users, general public).

Search Engine Optimization

The first reason having valid xHTML and CSS code is for search engines to have an easier and better time crawling your website. If you’re trying to promote your website organically, then this valid code is a prerequisite. However, if you’re going to promote your website through Adwords and other such methods, then it honestly does not matter at all. You can have all the errors in the world and people will still come to your site because you’re paying money per click.

Bottom line: Valid xHTML and CSS are important for organically promoted sites

Bugs and other troubleshooting

Before you can start your troubleshooting process, the first step is to first verify the xHTML and CSS code. If you forgot to close a tag, or forgot to close a selector in your CSS file, then you’re in for a treat. But if you validate it first, you’ll know exactly where your error is, and thus you can fix it and be on your way to a cleaner website. Frequently, once you move on to the error-free side, you find yourself with many less bugs than before.

Bottom line: Valid xHTML and CSS are the most useful for web designers, as it helps them create a cleaner, bug-free site compatible with a larger spectrum of browsers

So there you have it. Some of the reasons why having valid xHTML and CSS code does actually matter, and some reasons and scenarios when it doesn’t matter.

See you around!

The print CSS stylesheet

Amit — Mon, 30 Aug 2010 14:08:03 +0000

Have you ever wondered what happens when you select to print a website? Does it just print what you see on the page? What if you have a website with a black background, that’s going to be a LOT of ink. Think there’s a way to change the way things are printed?

Yes, there is. Using CSS! When we declare a CSS stylesheet, we do it the following way:

screen" />
<...>
<..rest of your page..>

But if you wanted to designate a stylesheet for printing, you could do the following:

print" />

<...>
<..rest of your page..>

This way, you can change the way things are printed. For example, one of my recent print stylesheets included the following definitions:


#header,#footer,#categoryNav,img { display: none; }

p { width: auto; margin-right: 0; margin-bottom: 15px; }

#page { width: 500px; margin-right: 0; padding: 0; }

You see, I make everything hidden, such as the footer, the header, the categories navigation, everything. Also, if some of my divs have a right margin or padding, I get rid of it. This way, when you print an article on your website, it just prints the article, not anything else. No useless images or insane right margins or left margins!

That’s it for today! Hope you learned something!

Learning xHTML and CSS – day 25 of 30

Amit — Wed, 25 Aug 2010 21:24:34 +0000

Learning xHTML and CSS – day 25 of 30

Building a two-column website from scratch using fully modernized, CSS2 & 3, div-based design.

Yesterday’s post was about a two-column fully modernized, table-less, div-based site using standard CSS2 and some CSS3 definitions. Hopefully, one of these days, I’ll get around to do a screencast about building this type of site from scratch, go over all of the necessary steps as well as some troubleshooting bug issues. However, today’s post will review some of those things. Scroll to the bottom to see the upcoming website designs!

A note about troubleshooting

Whenever you build a site, you’ll almost always run into some initial bug or misalignment issues. If you don’t, check your site with IE7. And if you don’t have issues in that as well, my hat’s off to you, ‘cuz that’s just sick.

Reasons for bugs

There are many reasons for bugs. Most of them are easily fixed. Why do they happen? Well, they happen because you probably forgot to take something into account. Whether it’s your div’s border that’s adding width to your div, thereby throwing off your alignment. Or whether it’s padding, margin, what have you. Something could have happened to misalign your divs. Another frequent bug that most people overlook but get used to very very quickly is the floating bug issue. If you remember our floating post, something that’s floating is not actually within the box. I mean, it is, but it doesn’t govern the wrapping box’s height. So that’s why the items following the floated divs have to use clearing techniques so that they’re positioned correctly.

Some clearing techniques that we’ve discussed


Some-div { clear: [both,left,right]; }
.clear-div { clear: both; }

Above I introduced the clearing div. It’s simply a div with a class of clear that’s used after any floating divs. So it’d look like this:

Okay. Now that floating fixes and troubleshooting fixes are taken care of, let’s get down to business.

The xHTML code for our website





My first website







 
 this div is 700 pixels wide, centered, and 10-pixel margin from top
 
 home
 I'm 100px wide
 I'm 100px wide
 
 
 

 
 
 left sidebar. 250px X 500px
 

 
 main content. 430px X 500px
 

 

 

 
 footer section. full width, centered, 10 pixel margin from top and bottom

The CSS style definitions are


/* BASICS */
body { font-size: 12px; font-family: Arial, sans-serif; background: #f4f4f4; }
.clear { clear: both; }
.center { margin: 0 auto; text-align: center; color: gray;}
.h { line-height: 500px; }
#pagewrap { width: 700px; margin: 10px auto; border: solid 1px black; padding-top: 10px; background: #cccccc; }
#pagewrap a { text-decoration: none; color: black; }

/* navigation */
#nav { margin: 20px auto; width: 400px; }
#nav li { list-style-type: none; float: left; margin-left: 10px; text-align: center; }
#nav li a { padding: 2px 10px; border: solid 1px black; width: 100px; display: block; background: black;color: white;}
#nav li a:hover { text-decoration: underline; }

/* sidebar */
#sidebar { width: 250px; height: 500px; border: solid 1px black; float: left; margin: 10px 10px 0 10px; background: white;}

/* main */
#main { float: left; width: 416px; height: 500px; border: solid 1px black; margin: 10px 10px 0 0; background: white;}

/* footer */
#footer { width: 678px; margin: 10px 10px; border: solid 1px black; padding: 10px 0;}

/* rounded corners CSS3 */
#pagewrap,#nav li a,#sidebar,#main,#footer {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
}

So, how does that compare to what you had? Is it the same? Different? Were you surprised?

First, I want to mention that I did end up using the clear fix div. I find it very very useful. Second, as you can see, the two columns are simply floating columns with some padding, height, and width. This site is considered one of the simpler sites to build, and I hope you can use it in your future endeavors.

So you see, it’s not that hard!

Summary

Today we built a two-column website from scratch. We used standard compatible CSS2 and xHTML as well as some modern CSS3 style definitions. I might have to stop the course a little short, as I’m getting uber uber busy with grad school stuff, and am finding it very hard to keep up with these daily posts.

So I hope you enjoyed it and keep reading so you can learn more neat and helpful facts and information!

Upcoming posts

So I took some time off and prepared the next several websites that we’ll design. I saved the ‘tricky’ one for last. Primarily because it’s just tricky and serves no real-world usage…

Anyway, have a glimpse at the below images, make sure to click them so that you can see the full-size version. See you soon, keep checking back!

So, how does that compare to what you had? Is it the same? Different? Were you surprised?

So you see, it’s not that hard!

Summary

So I hope you enjoyed it and keep reading so you can learn more neat and helpful facts and information!

Learning xHTML and CSS – day 24 of 30

Amit — Sun, 22 Aug 2010 16:40:00 +0000

Learning xHTML and CSS – day 24 of 30

Building our first 2-column site from scratch

Today’s post is very very very short. I’m going to show you an image of a site I just built. Each section has its properties written in it. Your job is to hopefully replicate it as best you can. Tomorrow I’ll share the xHTML and CSS code. So here we go, our first real live useful website from scratch.

Take a look at the picture below and try to replicate it as best you can. Click it to view a full version!

Again, click the image to view the full version. Good luck!

Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription in the sidebar on the right). Also, feel free to contact me with any questions, or use my contact form to send me any private comments, suggestions, price quotes, job offers, feedback or just a plain “hi!”. Finally, make sure to check out my portfolio to see my latest work.

Learning xHTML and CSS – day 23 of 30

Amit — Sat, 21 Aug 2010 07:36:10 +0000

Learning xHTML and CSS – day 23 of 40

CSS3 box shadow and text shadow

Today’s post is really a continuation of yesterday’s post and a conclusion of CSS3 (for now). Today we’ll look at text-shadow and box-shadow CSS3 style definitions. We’re on the home-stretch of building a website from scratch. I thought I’d change it up a little and introduce a new method.

The best way to learn is by doing

The next seven or so posts will be dealing with building different type of websites from scratch. Each day we’ll start from nothing. Hopefully I’ll be able to keep up with this pace, but I’ll try to post up an image of the type of website that we should create the day before so you can try to practice it. Then together we’ll build them up. I’ll also try to integrate some video tutorials / screencasts so that it could be easier to follow when seeing me do it. Anyway, enjoy the last bit of mini-lessons that we have, because from here on end, it’s about to get bumpy!@$$#

CSS3 box shadow

The CSS3 box-shadow property is very useful when used correctly. As you can see in the above image, it’s obviously extremely ugly and I’ve done so just to show what exactly the box-shadow property does. The CSS definitions for box shadow are the following:


box-shadow: 2px 2px #c3c3c3; /* required */
-moz-box-shadow: 2px 2px red; /* firefox */
-webkit-box-shadow: 2px 2px #c3c3c3; /* safari,chrome */

In general it goes like this:

box-shadow: [x-value] [y-value] [color-of-shadow];

That means that if you change that first value to a larger (positive) value, the shadow will go more to the right. However, you can make that number negative as well, and the shadow will flip directions (go to the left). Similarly, changing the second value changes the y-position of the shadow in the same fashion as the first value.

The text shadow property

Text-shadow is actually used very frequently in web design these days. Like most beautiful things, it’s not supported by Internet Explorer (IE). But there are a few filters you can write to make it IE-capable.

The text-shadow property looks like this:


text-shadow: 1px 1px 1px white;

And with further explanation and generalization, it looks like this:

text-shadow: [x-value] [y-value] [blur-value] [color];

As you can see, all values in CSS always start with the x-value, then continue with the y-value. In text-shadow, however, we also have the blur value. This is the degree to which the shadow is blurred. It’s a little hard to see from the image, but there’s actually a white shadow to the MAIN CONTENT text.

Summary

Today we reviewed two more CSS3 properties named text-shadow and box-shadow. Today also marks the end of these mini xHTML/CSS lessons and the beginning of a tough journey toward building various types of websites from absolutely nothing. We’re going to build two-column websites, three-column, one-column, and we’ll mix it up a little. It’s about to get exciting!

Learning xHTML and CSS – day 22 of 30

Amit — Fri, 20 Aug 2010 13:33:15 +0000

Learning xHTML and CSS – day 22 of 30

A brief introduction to two CSS3 properties

These days CSS3 is everywhere. What is CSS3? Well, everything we’ve been working with thus far has been xHTML (or HTML 4) and CSS2. With today’s rapid technological advancement, a wide variety of features and designs are easily integrated using simple CSS3 style definitions. So how do we do it? Continue reading to find out.

CSS3 basic information

Well, because CSS3 is so new, it’s only currently supported by the most modern browsers. All WebKit engine-based browsers (such as Google Chrome and Safari) support CSS3. In addition, Firefox 3.6+ and Opera also support CSS3. Well, that leaves one brand that doesn’t. Yup. IE. Internet Explorer (6,7, and even 8) do not support CSS3. So if your site contains a lot of CSS3 styles, plan on it looking very basic under Internet Explorer.

CSS3 property #1: Rounded Corners

Suppose you have a div and you wanted to give it rounded corners. How would you accomplish it? Using CSS2, you’d have to design the rounded corners in Photoshop or what-have-you, then use the background property to correctly set it. CSS3 is much much easier. All you do in CSS3 is the following:


div {

border: solid 1px black; /* required for fallback if CSS3 is not supported */

-moz-border-radius: 10px; /* deals with Mozilla-based browsers (Firefox) */

-webkit-border-radius: 10px; /* deals with WebKit-engine browsers */

border-radius: 10px; /* required but doesn't do anything...yet */

}

So let’s apply these styles to one of our MAIN CONTENT div:

This is our xHTML





My first website







 
 My first website!
 

 
 
 home
 about me
 contact me
 

 

 
 MAIN CONTENT DIV
 

 
 This is our footer section

And this is our CSS


body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 20px; }
#footer { height: 20px; border-top: dotted 1px black;  }

/* NEW STYLES FOR NAVIGATION */
#nav li {
list-style-type: none;
float: left;
margin-left: 10px;
}
#nav li a {
padding: 2px 10px;
border: solid 1px black;
}
#nav li a:hover {
background-color: orange;
}

/* NEW STYLES for absolute positioning */
#main { height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc;  }

/* NEW CSS3 PROPERTIES */
#main,#nav li a {
border: solid 1px black;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}

And finally, this is our result

Now you can change the border-radius and make it so large that the MAIN CONTENT div becomes a circle. Let’s do that now, make the border-radius 300 pixels.

New CSS3 definitions

#main,#nav li a {
border: solid 1px black;
border-radius: 300px;
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
}

And the new result is:

That’s it for today. Tomorrow we’ll discuss one more CSS3 property called box shadow and text-shadow. By the sound of it, you can probably imagine what they do.

Summary

Today we introduced CSS3. If it’s not obvious to you yet, CSS3 contains an unbelievable deal of style definitions that can significantly ease on your daily tasks. The only drawback is that CSS3 is only supported by the most modern browsers, excluding IE. So keep in mind that if you use a lot of CSS3 and find out that a significant percentage of your audience use IE, I would recommend falling back to CSS2 and instead using old-fashioned shadow backgrounds, rounded corner pictures, etc. etc.

Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription in the sidebar on the right). Also, feel free to contact me with any questions, or use my contact form to send me any private comments, suggestions, price quotes, job offers, feedback or just a plain “hi!”. Finally, make sure to check out my portfolio to see my latest work.

Learning xHTML and CSS – day 21 of 30

Amit — Thu, 19 Aug 2010 11:36:51 +0000

Learning xHTML and CSS – day 21 of 30

Working with background positions and fixed positioning

As you know (if you’ve been paying attention), we’re now past the CSS positioning tutorials, where we concentrate more on website aesthetics and functionality. Today we make a simple feedback button that when clicked opens up your default mail wizard (typically Outlook) to send an email to a predetermined address. To make this button interesting, we use a new CSS property that we haven’t talked about yet called background position.

The way it works is simple. We have a link anchor with a specified width and height as well as background. Using the pseudo-selector :hover, we change the background position of the link anchor such that a new background is shown.

Like the two previous posts, today will also be a video-tutorial / screencast. Choose the best method that works for you (whether it’s just watching, just reading, or doing both).

A complete demonstration of CSS fixed positioning in combination with background position

So this is for those who wanted to keep reading (good for you!)

Below is the new xHTML that was added to our document (you can add it anywhere you want within the body of the xHTML doc)

We generate a div with an id of ‘feedback‘. Inside that div we create a link anchor whose href attribute leads to ‘mailto:contact@engineercreativity.com’. Finally, we add a title to the link anchor for SEO optimization (SEO links should all have titles).

If you now press Save and open the page, you won’t see anything. Why? Because we didn’t add any styles and nothing is written within the link anchor.

So let’s add a few styles to the new xHTML portion. First we need to position the feedback div with fixed positioning. In addition, let’s position it 25% from the top (makes it fluid) and completely on the left of the page. The new CSS should be:


#feedback { position: fixed; top: 25%; left: 0; }

Now, if you Save and refresh the page, you still won’t see anything. Why? Well, what’s there to see? The feedback div is positioned to the left, yes. It contains a link within it, yes. But does the link have any style definitions? Does it have a width, a height? No. So let’s do that now. Specifically, let’s do the following:

Define a block display so that the width and height mean something [REQUIRED]
Give the link a height equal to the height of the image (168 pixels)
Give the link a width equal to the width of the image (78 pixels) [HINT: later on we'll half this width]
Give the link the background of the “suggest a post” image

The image is located here: http://engineercreativity.com/wp-content/uploads/2010/08/feedback.png

So let’s have a look at the CSS now


#feedback a { display: block; width: 78px; height: 168px; background: url(http://engineercreativity.com/wp-content/uploads/2010/08/feedback.png) no-repeat top left; }

As you can see, we styled the link with block display, assigned a width/height and a background. The result yields the following:

Now, obviously we don’t want both of those “Suggest a post” portions to be shown, so we need to cut the width of the anchor link by about half.

The new CSS is


#feedback a { display: block; width: 37px; height: 168px; background: url(http://engineercreativity.com/wp-content/uploads/2010/08/feedback.png) no-repeat top left; }

And the new result is:

Great. Now we only have one “Suggest a post” showing. Now all we have to do is change the position of the background for when the mouse is hovered over the link anchor. Hopefully this is ringing bells USE :hover!!!

Thus, we add this to our CSS definitions


#feedback a:hover { background-position: top right; }

As you can see, we use the background-position property which is critically important and widely used in websites. People often make sprites (which are a huge compilation of images that are used on your site combined into one image). That image is loaded once and for all of the images on the site the backround-position of that image is varied. This saves tremendous loading times and is unbelievably favorable to Search Engine Optimization [SEO] efforts.

More on sprites will be discussed in a different post. For now, you should understand that all that is happening when the mouse is hovering the link anchor is that it’s background is changing positions. That’s all!

We’ve now created a useful feedback button!

The full xHTML code is the following





My first website







 
 My first website!
 

 
 
 home
 about me
 contact me
 

 

 
 MAIN CONTENT DIV
 1
 2
 3
 

 
 This is our footer section

And the full CSS code is the following


body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 20px; }
#footer { height: 20px; border-top: dotted 1px black;  }

/* NEW STYLES FOR NAVIGATION */
#nav li {
list-style-type: none;
float: left;
margin-left: 10px;
}
#nav li a {
padding: 2px 10px;
border: solid 1px black;
}
#nav li a:hover {
background-color: orange;
}

/* NEW STYLES for absolute positioning */
#main { height: 200px; position: relative; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc;  }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
#div1 { top: 0; left: 0; background: green; }
#div2 { top: 0; right: 0; background: blue; }
#div3 { bottom: 0; right: 0; background: purple; }

/* NEW STYLES for feedback */
#feedback { position: fixed; top: 13.5%; left: 2px; } /* Thanks Emeka, a returning blog reader, for this suggestion! */
#feedback a { display: block; width: 37px; height: 168px; background: url(http://engineercreativity.com/wp-content/uploads/2010/08/feedback.png) no-repeat top left; }
#feedback a:hover { background-position: top right; }

Finally, I’d like to say thanks to digimantra.com for providing the “Suggest a post” image. Perhaps soon I’ll post a photoshop tutorial on how to create a similar image.

Summary

We’ve used our knowledge of fixed CSS positioning and introduced a new CSS property called background-position to successfully create a fluid, vibrant, and interesting feedback button. Hope you enjoyed it and learned something new!

Learning xHTML and CSS – day 20 of 30

Amit — Wed, 18 Aug 2010 19:54:11 +0000

Learning xHTML and CSS – day 20 of 30

Everything you wanted to know about CSS fixed positioning

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.

A complete demonstration and explanation of CSS fixed positioning

Again, you’ll have option of reading, seeing the screencast, or doing both. As you already know my suggestion, do both. Read the article and watch the video. It’ll be super beneficial for you!

An example of a sticky footer is shown on the left. The picture from the left is an exact replica of yesterday’s xHTML and CSS code with two changes, the ’4′ was changed to ‘sticky footer’, and there was some CSS styling definition change. Let’s take a closer look at this.

First, let’s just reiterate the xHTML, even though you should have it with you if you’ve been attention!





My first website







 
 My first website!
 

 
 
 home
 about me
 contact me
 

 

 
 MAIN CONTENT DIV
 1
 2
 3
 STICKY FOOTER
     

 
 This is our footer section

As you can see, no big change. Only where there was a number ’4′ is now changed to ‘STICKY FOOTER’. That’s all!!!! Now, let’s take a look at the CSS.

And this is the CSS


body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 20px; }
#footer { height: 20px; border-top: dotted 1px black;  }

/* NEW STYLES FOR NAVIGATION */
#nav li {
list-style-type: none;
float: left;
margin-left: 10px;
}
#nav li a {
padding: 2px 10px;
border: solid 1px black;
}
#nav li a:hover {
background-color: orange;
}

/* NEW STYLES for absolute positioning */
#main { height: 200px; position: relative; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc;  }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
#div1 { top: 0; left: 0; background: green; }
#div2 { top: 0; right: 0; background: blue; }
#div3 { bottom: 0; right: 0; background: purple; }
#div4 { bottom: 5%; left: 2.5%; width: 95%; position: fixed; background: red; }

Now let’s talk about this for a little bit. First, the #main div has to have relative positioning so that div1, div2, and div3 are positioned within the main div (as you see in the top image).

And here’s the main part of this tutorial. Notice how div4 is styled with fixed positioning. I made it’s width 95% of the page width, so it’s fluid and changes with the width of the page. I also made it horizontally centered by giving it a left-margin of 2.5% of the page (so that the left has 2.5% margin and the right has 2.5%. If you do the math, 2.5% + 2.5% + 95% = 100%). Further, as you can see, the fixed positioned items do not matter where they are coded within the page. What does this mean?

It means that even though div4 is wrapped within the main div and the main div is relatively positioned, the fixed positioned div4 is still positioned fixed to the page. Take a look at the below screenshots:

The only difference between the top three pictures is how I large I made my browser (my viewing page). See how no matter how the page is oriented, the sticky footer is always always always with respect to the page rather than to the div it’s coded into. It’s always located at the bottom part of the page. That’s the beauty of fixed positioning.

Summary

This post/tutorial concludes our tour of CSS positioning. We first started with in-line anchor links. We moved on to floats. From floats, we discussed the beauty and unbelievable advantages of absolute positioning, and finally, today, we conclude with fixed positioning. We’re almost done with this whole journey. We now enter the crazy good stuff of actually designing websites that are stylish, compatible, and fun, so hang on!

Hope you enjoyed it Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription in the sidebar on the right). Also, feel free to contact me with any questions, or use my contact form to send me any private comments, suggestions, price quotes, job offers, feedback or just a plain “hi!”. Finally, make sure to check out my portfolio to see my latest work.

Learning xHTML and CSS – day 19 of 30

admin — Tue, 17 Aug 2010 13:09:55 +0000

Learning xHTML and CSS – day 19 of 30

Everything you wanted to know about CSS absolute positioning

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.

From this part on you have three options:

You can watch the video and that’s it
You can watch the video and continue reading
You can skip the video and read the tutorial

I highly recommend both watching the screencast and reading the tutorial as I’m sure you’ll grasp a lot more by reading rather than by watching.

CSS absolute positioning explained from scratch

The theory behind absolutely positioned items

So what’s actually taking place? You start with a main div like so:

Now, in this div we input a little content. First let’s write a small phrase to indicate that we’re looking at the main div, then let’s add four more divs that will later be absolutely positioned within the main div. So, in short, accomplish this:

Indicate the main div as the MAIN CONTENT DIV
Input four additional divs with id’s of div1, div2, div3, and div4
Indicate those divs with 1, 2, 3, 4

So your xHTML should look like this:


 MAIN CONTENT DIV
 1
 2
 3
 4

See how we inputted four more divs into the main div?

Now, let’s input that into the appropriate location of our main xHTML document that we’ve been working with, open it with our favorite browser, refresh, and let’s see the result.

The xHTML





My first website







 
 My first website!
 

 
 
 home
 about me
 contact me
 

 

 
 MAIN CONTENT DIV
 1
 2
 3
 4
     

 
 This is our footer section

Which leads us to this result:

Now we need to add a little style to these divs. So let’s apply the following styles:

Make the main div have a height and width of 200 pixels, centered text, bolded, and background-color of #cccccc
Make each of the four divs have width and height of 50 pixels, centered text, bolded, white.

The CSS you should’ve come up with is the following:


#main { height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc;  }
#div1,#div2,#div3,#div4 { height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }

Now, before I show you a screenshot of that, let’s apply some necessary additions to our CSS:

Give the main div relative positioning
Give the four divs absolute positioning

What’s the reasoning behind that? Well, if you absolutely position items, they almost always should be absolutely positioned within a relatively positioned item. Why’s that? Because then the absolutely positioned items are positioned relative to the relatively positioned item. I know this all sounds really really confusing. But we’ll see examples of this later with the main div having relative and absolute positioning.

So, the final CSS you should get is:


#main { position: relative; height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc;  }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }

Easy so far, right? Okay. Now let’s take a look at the result:

I’ve highlighted the ’4′ so you can see where it’s currently located. You see, it’s showing up in the footer. Why? Because it’s absolutely positioned, yet we didn’t tell it where to be positioned.

So let’s do that now.

Make div1 positioned top left with background green
Make div2 positioned top right with background blue
Make div3 positioned bottom right with background purple
Make div4 positioned bottom left with background red

The final CSS you should have is:


#main { position: relative; height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc;  }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
#div1 { top: 0; left: 0; background: green; }
#div2 { top: 0; right: 0; background: blue; }
#div3 { bottom: 0; right: 0; background: purple; }
#div4 { bottom: 0; left: 0; background: red; }

And finally, the entire page CSS is:


body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 20px; }
#footer { height: 20px; border-top: dotted 1px black;  }

/* NEW STYLES FOR NAVIGATION */
#nav li {
list-style-type: none;
float: left;
margin-left: 10px;
}
#nav li a {
padding: 2px 10px;
border: solid 1px black;
}
#nav li a:hover {
background-color: orange;
}

/* NEW STYLES for absolute positioning */
#main { position: relative; height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc;  }
#div1,#div2,#div3,#div4 { position: absolute; height: 50px; width: 50px; line-height: 50px; text-align: center; color: white; font-weight: bold; }
#div1 { top: 0; left: 0; background: green; }
#div2 { top: 0; right: 0; background: blue; }
#div3 { bottom: 0; right: 0; background: purple; }
#div4 { bottom: 0; left: 0; background: red; }

And the result (also shown in the first picture) is:

As you can see, those divs are absolutely positioned within the MAIN CONTENT div.

One last thing. Suppose we remove the following CSS style for the main div:

position: relative;

So it’s no longer relatively positioned. Where do you suppose div 1-4 will be positioned? If you guessed relative to the body of the page, then you were right. Take a look:

See how they’re at the corners of the actual body of the page, rather than relative to the main div? That’s the beauty of relative and absolute positioning!

Summary

Today we learned about absolute positioning. You now know that absolutely positioned items need (or most often are) within relatively positioned items. And with this, we conclude our tour of CSS positioning.