Archive for November, 2009
Dark Code View for Dreamweaver
Nov 28th
If you stare at dreamweaver for hours upon hours each day, as I do, the default color scheme with the white background can get hard on the eyes. In the past I tried change the background color to black to give my eyes a break, but the code colors were then hard to see so I ended up switching back.
That was until last weekend when I came across this dark code view for Dreamweaver. I’ve now installed it on three of my computers and I am really liking it. I recommend checking it out.
Advanced CSS – Part #1
Nov 27th
Now that we have all of the Basics of CSS down pat, we can move onto more advanced methods of writing and implementing style sheets!
Today we’re going to talk about grouping and nesting selectors and dimensions.
Grouping and Nesting
You might find yourself with selectors having the same values inside of your internal or external style sheet. Maybe it is about a specific link within a certain area of your web site, heading elements, or just about anything else you would want to group.
Grouping
Grouping allows us to apply multiple properties and values to multiple selectors but in a condensed fashion.
Let us assume we have some code:
1 2 3 4 5 6 7
h1 {color:#ff9300;}
h3 {color:#ff9300;}
span {color:#ff9300;}
p {color:#ff9300;}
So we have everything within the h1, h3, span, and p elements is the color #ff9300. Since all of these elements have a common property we can group these elements like this:
1
h1, h3, span, p {color:#ff9300;}
This space saver will have the same effect but on multiple selectors. The single color property will be applied to all of these html elements. Note: grouping elements will apply all properties and values to the grouped elements. Example:
1 2 3 4 5 6 7 8 9 10 11
html, body, p, span, a:link, {
margin: 0;
padding: 0;
font:verdana, "Times New Roman", sans serif;
color:#ff9300;
}
This means margin:0; padding:0; font:verdana, “Times New Roman”, sans serif; and color#ff9300; will be applied to all of those selectors.
Nesting
Nesting will allow you to apply styles to a selector within a selector. Consider the following:
1 2 3 4 5 6 7 8 9 10 11
#fancy p {
background-color:#000;
font-weight:700;
text-decoration:none;
color:#ff9300;
}
So we have our ID selector with an extra selector after it. So if we have something with the ID selector such as:
1 2 3 4 5
<div id="fancy">
<p>Some fancy text here</p>
</div>
It is saying everything within the fancy ID that is inside of any p element will have all of those properties and values. We have used this type of nesting in earlier CSS tutorials.
Dimensions
We covered the width and height properties in the box model tutorial. We going to introduce a few new properties that we can use to further control how tall/wide an element is.
The Height property will set the height of the element and the Width property will set the width of the element. Consider the following code:
1 2 3 4 5 6 7
h2, h3 {
height:100px;
width:300px;
}
This will set all h2 and/or h3 elements to w height of 100px by 300px regardless of how much space it is taking up on the page. These two elements will always be this height. What if we wanted those two elements to be within a certain area of space?
Properties
- width – defines width (will always be)
- height – defines height (will always be)
- max-width – defines max width (cannot be bigger than)
- min-width – defines min width (will not be smaller than)
- max-height – defines max height (cannot be taller than)
- min-height – defines min height (will not be shorter than)
The last four properties are new to us. So let us improve on the previous code!
1 2 3 4 5 6 7
h2, h3 {
max-height:100px;
max-width:300px;
}
Given the code above, this will set the h2 and h3 elements to be no larger than 100px by 300px but can also be 0px by 0px if the element is empty (has no content).
Although it seems like this property would be somewhat useless, there has been situation where something a web page wasn’t working the way I wanted it to. Perhaps the top navigation menu was wrapping when I resized the browser windows and I wanted the entire page to keep its consistency. I would use a max-width and min-width property to define the space, lo and behold it worked!
For a very comprehensive overview of the above tutorial, please click on the download button below.
advanced-part1.zip
Size: 66.72 KB
Setting up your cPanel email in gmail
Nov 26th
cPanel accounts come with webmail clients like RoundCube, Horde, and Squirrel Mail. But you also have another free option, gmail. It takes a bit of setting up, but it’s well worth it for all the great features that gmail provides. Here are the steps to get it all set up:
- Create a Gmail Account. If you don’t already have a google/gmail account, create one here. Your gmail account name does not matter in this case. It will only be used by you, for logging in. The people to whom you send emails to will only see your cPanel address.
- Auto forward your emails to Gmail. Login to your cPanel email account at www.yoursite.com/webmail. Go to “Email Forwarding” and click “Add Forwarder”. You will need to forward your emails to your gmail address.
- Set up sending from your cPanel Address. Now login to your gmail account. Click “Settings” in the upper right hand corner. Then go the “Accounts and Settings” tab. Next to where it says “Send Mail as” click the “Send mail from another address” button.
- A new window will pop up. Enter your name and your cPanel email address. Go to the next step.
- Select “Send through Gmail (easier to set up).” Go to the next step.
- Click the “Send Verification” button.
- Go back to your gmail inbox. You will have a new email from gmail. Open the email and click the link.
- Head back to gmail and again click “Settings” in the upper right hand corner. Then go the “Accounts and Settings” tab. You should now see your cPanel email address listed. Next to your newly added email address click the “Make Default” button.
You’re done! Now you can test sending emails to your cPanel email address. If everything was setup correctly, they will immediately show up in your gmail account. When you click reply it will automatically reply from your cPanel address. ENJOY!
Basics of CSS Part – #8
Nov 23rd
Today we’re going to continue our journey into the Box Model. If you aren’t familiar with this box model, you should read about it!
Padding
Padding — defines the space between the element border and element content and will be the same color as the background color of the element.
If we recall that in the box model we have margins > borders > padding > content so Padding is tertiary. Let’s assume you have an HTML paragraph element:
1 2 3 4 5 6 7 8 9 10 11
<!--No Padding-->
<p style="background-color:#fff;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
<!--With padding-->
<p style="background-color:#fff; padding:10px;">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.</p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
So what is different from the first line and the second line? The first line is without padding so the white background only fills to the end of the text instead the width of the box. The second line, however, spreads across the entire width of the box and it is a padding of 10px on all sides.
Padding works in very similar ways as the margin property except the margins are always invisible and the padding is based on the background of the element you are adding padding to.
Properties
Like margins, there are five possible properties we can use. They are the following:
- padding-bottom
- padding-left
- padding-top
- padding-right
- padding
The first four properties define each side for padding. For example, if you wanted to adjust the bottom and right padding for a certain element you could use the following:
1 2 3 4 5 6 7
p.element {
padding-bottom:3px;
padding-top:7px;
}
This will change the bottom padding of the element by 3px and the top padding of the element by 7px. Example:
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Remember that padding is basically an extension of the background of an element and you also need to take into account any other elements (whether above, below, left or right) that might get in the way of this padding. In theory, you could make an entire HTML and CSS website using only margins, borders, padding, and content.
Values
- em, px, pt – numeric values e.g. 1em, 15px, 2pt
- percent % – percent of the containing element e.g. 10% of 500px is 50px.
1 2 3 4 5 6 7 8 9
span.padding {
padding-top:2em;
padding-bottom:10px;
padding-right:16%;
}
All of the above are valid ways to define padding of our span element and class of padding.
Padding – All Inclusive
The all-inclusive padding property works the same way as the all-inclusive margin property. This singular padding property will define padding how ever we need it to using one property instead of writing out each side.
1
padding:15px 30px 45px 60px;
- top padding – 15px
- right padding – 30px
- bottom padding – 45px
- left padding – 60px
This example has four values for the padding property. The values start with padding-top and then go clockwise to padding-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it’s like looking at the clock at every 90° angle you get top, right, bottom, left.
1
padding:15px 30px 45px;
- top padding is 15px
- right and left padding is 30px
- bottom padding is 45px
This might come as a surprise to us because you would think they would group the Top and [bottom and left] segments separately, however; we can see in this example that the padding-top is 15px and the padding-bottom is 45px. The left and right padding is grouped together because they just belong together. If someone asks, “when I say a word you think of something that is opposite to that” and they ask, “up” you’ll probably say “down” off the bat.
1
padding:15px 30px;
- top and bottom padding 15px
- right and left padding 30px
This might be more clear since there are only two values here. Naturally, we’d think Top and [right and left] so the top and bottom padding will have a value of 15px whereas the right and left padding will have a value of 30px.
1
padding:15px;
- top, right, bottom, and left padding is 15px
One single value for the padding property will set all padding to that value, in our case 15px.
Web Design Tip #3 – Make your website lean and clean.
Nov 21st
3.1 Optimize the page loading time
Images can really make a website look nice when used correctly, but nothing is more annoying than waiting for images to load when they are a way larger size than they need to be. The html width and height attributes let you re-size images, but the user still has to download the original image no matter how you re-sized it with the width and height attributes. Instead re-size your images to the correct size before embedding them into your webpage.
3.2 Don’t make an entire site using flash or java.
Some people think it’s okay to make their entire website just using flash. Flash can be a great thing browser embedded videos or games, but when people start making entire websites using flash, it just becomes annoying. You have to wait for the flash application to download and load before you can use it. And then once you finally get into it, you have all these extravagant animations that may look nice, but can just get annoying when you are trying to find what you’re looking for. Also, flash is unsupported on many mobile browsers like safari on the iPhone/iPod touch, so these users won’t be able to see your website at all.