Dave PC Guy » website

Mobile Websites (tips)

Admin — Mon, 11 Jan 2010 23:28:37 +0000

I’ve recently started working on some mobile websites. You’ll notice that davepcguy.com has its own mobile alternative as do some other sites. Mobile devices are growing in number and gone are those days when internet was viewed only on the computer screen. WAP is not even used either so that old school coding is gone too.

These days, almost everyone has an iPhone or a BlackBerry, or a Palm device. Some of us even have other devices like PSPs, tablets, and others that require quite a bit different formatting. Here’s how to go about making your mobile website.

Step 1 – The Vision

First, you gotta have a vision of what you want. The best way to get a good vision is by picking up your phone and browsing the internet, looking through some popular websites such as youtube, flickr, facebook, myspace, and other sites that you know get a lot of traffic and are likely to have their own mobile version.

I recently saw a really nice blog post detailing some of the nicer mobile sites. The theme there is common:

Everything is single column. There are no side-bars, there are no fancy tabs. Everything is in a single column. Think of it as a letter. There are no columns in a letter, you have a header, the body, and the footer.

Header: Generally, you’ll use the header of the page to announce the website’s name and to show menu links. You may also place a commercial in this area (Google Adsense uses commercials). Here’s what I used on my Only A Quote mobile site: It’s a simple banner that effectively tells the user what’s going on.
Body: This is pretty self-explanatory, you put the meet of your site here. Try to use well organized information. Don’t just slap stuff there. Mobile users are more likely to leave your site than regular computer users. Also, keep the graphics swift! Not too much.
Footer: Use the footer for copyright info and other blah blah stuff but don’t over do it! I know huge footers are fashionable but not for mobile users!

Keep it all simple!

Step 2 – Design

Here are a few tools that will help you with your design:

Keep in mind that different phones will render your page differently so try to make it as simple as possible. To catch the widest possible audience, focus on the big three: iPhones, BlackBerries, and Palm phones. Samsung and Nokias are common too, especially outside of the US but BBs and iPhones capture most of the market. Android is coming up too, so watch out for them too.

A few simple rules:

Keep the site less then 400px wide.
Cross-browsing is a bitch on Computers, it’s worse on phones, render for Safari and Opera Mobile
Graphics should not exceed 20kbs
Keep the layout basic

There are tons more rules but those are the basics.

Step 3 – Coding

First of all, DON’T USE JAVASCRIPT! It works on a lot of phones, it’s gaining support, but it’s really bothersome (I know, I use my phone to browse the net a lot). There’s no need for it. Hover and other pretty stuff is useless too. Many phones don’t support it.

Use as little mark-up code as you can. If your original site has thirty divs, make it three in this one. There’s no need for all that on phones. If your CSS screws up, so will your divs.

Use the following doctype:

This will tell the browser that it’s meant for phones. It’ll help rendering and it’s the RIGHT thing to do haha. Once you start coding, again, keep in mind that your website should be the smallest possible.

Here are a couple of rules to keep in mind:

Don’t use px/em sizes, do everything in percentages, you never know what kind of a phone the user will use.
Keep all files as small as possible.
If your .PNG graphics do not use transparency, convert them to JPGs with smaller quality
If you use .PNG graphics WITH transparency, consider remaking them into JPGs or GIFs (for transparency) if at all possible
Keep all graphics less than 400px wide. I suggest 350px tops.
Use “ALT” for images, some phones may not render the text and it’s standard .mobi rule
Try not to use tables or javascript
Don’t use external resources (ie pictures from other sites, scripts from other sites, etc)
Define sizes for images with the width = “” and height = “” html tags
NO POP UPS!

That’s about it.

Step 4 – Testing

You’ll need to test your site, so use the resources mentioned in the emulator part. Use your phone as well!

Here’s another resource that will catch ALL of your mistakes:

Ready.mobi

This site checks your markup, the size of your site, and many other features. It will tell you if you did something wrong and will usually tell you what you can fix on your site. It also features five different phone emulators on the spot. It also ranks the speed of your site. Here are my stats:

Oh yeah, that’s a bad rating. It’s mostly because of all the graphics on my site, the CSS involved and inter-linking on my blog. It happens but it does pretty well on my BlackBerry so try to look at your rating positively especially after you do your own tests. As you can see, it tells you the different speeds with GPRS, 3G, and Wi-fi.

Step 5 – Implementation

Let me save you a few hours of searching. In implementation, you’ll have to figure out how exactly you’re going to redirect your traffic to the mobile version whence they use their phones. It took some time for me to figure out but here are a few options:

DetectMobileBrowsers – This is almost a fullproof method of redirecting your traffic. The problem? You can’t use it unless your site is COMPLETELY non-profit. Nope, not even ads are allowed. If you want the commercial version, it will cost you $50 a year to use it
LightWeight Device Detection – This is probably one of the simplest scripts you’ll find and it works really well. It also doesn’t have any restrictions as far as I’m aware.
Mobile Detect – This is a slightly more functional version of the above-mentioned Device Detection. They’re not related but work in a similar way

Let’s move on to actually using these scripts. I haven’t used number one but I’ll tell you how you can incorporate number 2 and 3.

Decide whether you want a separate site for the mobile version. I recommend creating a sub-domain such as m.onlyaquote.com (whence using sub-domains, remember that m.onlyaquote.com = onlyaquote.com/m )
If you did not create a separate sub-domain, you can place the whole thing in a loop but don’t forget to create a backdoor so that the user can switch between the desktop and mobile version.
Put all the script messy stuff into a separate file (so as not to clutter up your index.php file) except for the if/else statement found in number 2. If you’re using number 3, don’t worry about that at all.
Use include(script file ); to put the script back into your index.php file. Put all of your PHP before the tag

If you’re using Number 2, here’s what you do:

include ('scriptfile.php');
if($mobile_browser>0) {
   // do something
header( 'Location: mobilesite.com' ) ;
}

If you’re not using a different site do this:

include('scriptfile.php');
if($mobile_browser>0) {
 // place your mobile site here.
}
else {
   // place your desktop version here
}

You can also simply switch out CSS files with this method (make sure to put the loop inside the tag then). I don’t suggest you use the default CSS method of switching styling according to the device (ie. ) because it doesn’t work that well and most devices will try to read BOTH stylesheets.

For number 3, again place the following loop before the tag:

include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
    // any mobile platform
header( 'Location: mobilesite.com' ) ;
}

With the number 3 method (ie. Mobile Detect) you can also specify which mobile device you want to do what. You can choose a separate site for an iPhone and Blackberry or separate CSS files. Well, whatever, you can do it all.

CAUTION: The detection system is NOT perfect. With newer phones, newer browsers, and newer software, the detection script may become obsolete. Be always on the look out for better versions!

Conclusion

That’s it, with these few tricks, you should be able to easily make your own mobile site. Here’s what mine looks like (I still have a TON of work to do!):

Share and Enjoy:

Only A Quote

Admin — Wed, 23 Dec 2009 23:40:07 +0000

We here at DavePCGuy have finally launched our first independent website, done completely without an outside sponsor!

It’s called Only A Quote. Basically, what it is, is a database of quotes from different kinds of places (added one at a time to ensure quality) where the users only see a single quote with a random button and other information. You click the “Random” button and you get another quote. It’s a lot nicer than all the other quote websites because it’s not just some stupid quotes in a table with a lame design.

What it is

I fully launched it on the 19th and well, let me tell you about it. I know everyone is bored of the endless Quote websites out there. Especially with their boring design, endless pages of quotes, and all that. They’re not up to date, they’re still going with the 90’s designs. Here’s how our site is different:

1. It has a slick, new design of ink against paper (very popular right now)

2. It features only a SINGLE random quote from a database

3. Random button or refresh (works only when the address is the original onlyaquote.com without an ID) will pull up a new quote so no more looking around for quotes through endless hordes of information

4. USER-SUBMITTED quotes. That’s right, on the left of the main site is a tab that will pull up a submission form for user generated content. Pretty revolutionary, no? Everyone has a saying and now they can put it somewhere where it will be seen…and not buried under hundreds of thousands of quotes

5. SHARING capability. A “tweet it” and a “facebook” button allows the viewer to instantly share the quote and the web-address with others. Saw a funny quote? Just “tweet it” to others on twitter with a shortlink to the permalink. Each permalink is only for a single quote as well.

That’s about it. We have about two hundred quotes in our database, but that’s just the start. With more traffic, our site will gain more user-generated quotes that we will feature. Just check out the site!

Support

Hey, so if you want to support us, there are a lot of ways.

First, you could get on Only A Quote, look through some quotes, and send us some of your own quotes
Second, you could support us by becoming a fan to OaQ Facebook Fan Page.
Third, follow the OaQ twitter page (I’d rather you’d go with the facebook fan page ^^^^^^).
Fourth, you can put up that banner you see at the beginning of the post if that’s not too much trouble
Fifth, write an article about our page? =D

BANNER CODE:

Share and Enjoy:

CSS3 Lesson 3: Background Information is Essential

Admin — Thu, 17 Dec 2009 02:34:41 +0000

Let’s have a look at backgrounds. In the previous two tutorials, I’ve covered borders and opacity. In this tutorial, we’ll cover some of the basic CSS3 additions to the background properties. If you have no idea how to deal with backgrounds in CSS, read my tutorial on backgrounds pre-CSS3. CSS3 is gaining momentum in the Web development world and many properties are already supported by most browsers (Firefox, Konqueror, Safari, and Chrome) as well as some minor browser (Opera). If you want to stay on top of the game, you have to learn the new stuff and employ the new techniques you’re presented with.

In this tutorial, I’m going to cover:

background sizes
multiple backgrounds
background origin/clip

I will provide illustrations as to what each property looks like and you can also view my CSS3 testing sample that features this tutorial’s properties (among others). The properties will be compatible with both webkit (Safari and Chrome) and the Mozilla engine. Internet Explorer, unfortunately, does not yet support most CSS3 properties. I’d like to also note that I use a Mozilla Firefox 3.5.2 (which apparently has tons of trouble using ANY of these properties) and Chrome 3.0.195.33 (which seems to render everything perfectly).

The background-size property is very straight forward. You simply choose the width and the height as the values. You can use percentages, pixels, and other measurements.

First, why do we use this? Well, let’s say you have an image that’s too big or too small and you want to resize it without using photoshop or another tool. There are few reasons why you’d want that. Let’s say you want the same image on one website to be 400×500 px while on another site, you want it to be 200×250 yet you don’t want to create the extra file.

In my example, I have a strangely sized logo that is 474 px by 185 px. Now, I want it to be about 90 px tall, so that’s be 231 width. Here’s what the code would look like:

background:url(background1.png) no-repeat center;
	-webkit-background-size: 231px 90px;
	-moz-background-size: 231px 90px;
	-o-background-size: 231px 90px;
	-khtml-background-size: 231px 90px;
background-size: 231px 90px;

This code should show up properly on the above-mentioned browsers. I’ve had no trouble with Chrome but my Firefox is being stubborn. The result should look something like this:

correctly rendered background

As opposed to this:

incorrectly rendered background

Note that I am creating these images as I go so whenever I add more backgrounds and use other CSS3 properties, my testing site will look differently.

Ever wished you could stack multiple backgrounds without having to create multiple divs? Well, that’s what this new background extension property does. You can stack multiple backgrounds and using the rgba () value, you can even change opacity of color-based backgrounds.

Here’s the concept. Okay, so on my example page, I want the background to have a greyish background with a slight gradient. I’ll make a pixel wide pretty long strip that goes from white to nothingness on top of an actual grey background. On top of all that, I’d love to add some kind of a swirl on the left and a nice swirl in the right corner. Let’s see how that’ll look in code:

.bgr {
background: rgba(115, 115, 115, .8);
background-image:url(gradient.png), url(swirl1.png), url(swirl2.png);
background-position: top left, top left, bottom right;
background-repeat:repeat-x, no-repeat, no-repeat;
background-attachment: fixed;
}

Easy concept. I used the original backbground property and used the new rgba() value for the background. Next I used the background-image property for the images, all separated by commas, don’t forget that. Next I declared the background-position and background-repeat the same way. The background-attachment is for fun.

Now since I’m really lazy and I don’t feel like creating my own swirls in illustrator, I used some wonderful free online brushes. Also, I had a lot of trouble making this work in short-hand (ie. background: url(gradient.png) top left repeat-x, url(swirl1.png) top left no-repeat, and so on). Unfortunately, it only works with Webkit (ie Safari and Chrome) and I haven’t been able to make it work on Firefox. It should work in coming Firefox releases. Check out my testing site for a live example.

Here’s what it should look like:

It looks pretty nice, doesn’t it? I like it. I’ll probably employ it in some future websites too.

Let’s look at background-origin and background-clip. The origin comes first in the title, so it will come first in my explanation. Basically, origin tells the browser where the background image should originate. Should it start where the border ends? Should it start where padding ends? Should it start where the content ends?

This concerns the box theory and adds to the complications of it. This also concerns the background-position property that I used in the previous example. CSS3 Info has a great article that shows all of the different results you can get with clip and origin properties. It’s useful, but not the best. I’ll be using the following image to indicate all the different background origins:

The different values you can use are border-box, padding-box, and content-box. While using this property add the “-moz-” and “-webkit-” prefixes to the properties. Once again, I’m having trouble making it work in firefox. It might work for you, but it didn’t work for me. Here’s the CSS I used:

background: url(swirl3.png) no-repeat bottom right;
background-origin: padding-box;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;

Of course, I used different positions for different divs. I added some extra borders and padding for effect but go ahead and check out my example site. If it doesn’t work, here’s a screenshot:

Here’s the rundown of the properties:

border-box
padding-box
content-box

As you can see, border-box puts the background image into the border, padding-box sits right outside the border (or at the end of the padding), content-box puts the background inside the content area.

Let’s look at background-clip which has two different values, border and padding. Using border will enable the background to be visible ABOVE the border area. Padding box does the same except the background will be visible above the padding area and not the border area.

I’ll use the following swirl to show you how this works:

The first example with the green swirl used the padding while the next one will use the border value. You won’t see much difference in most of the swirls (ie between the green and the red) but when you look on the bottom left red swirl, you will notice that part of the swirl is visible in the dashed border. That is basically all the difference you will see between the border and padding values. Here’s a close-up picture:

Here’s the green swirl:

Once again though, this feature fails in Mozilla. Here’s the CSS for the last DIV on the page (where the advertisement is):


background: url(swirl4.png) no-repeat top right;
 -webkit-background-origin: content-box;
 -moz-background-origin: content-box;
 -moz-background-clip: border;
 -webkit-background-clip: border;
background-clip: border;

Well, here’s my conclusion. I found some great use for the multiple backgrounds on my testing site. Actually, all of them are pretty useful. I wish there was more support for it. I may have erred but it seems unlikely since all of the properties show up alright in Chrome. I hope you enjoyed my tutorial and look out for some more in the future!

Here’s the final website:

Share and Enjoy:

Success!

Admin — Tue, 01 Dec 2009 16:20:57 +0000

Okay, I have to thank all of our readers and people that have supported us along the way! It has been over three months now since we launched DavePCGuy.com

Since our launch, we have published 47 distinct, separate, and awesome blog posts! Most of them have been PHP or CSS tutorials and it was quite a ride. We have gotten certain distinctions for these posts, especially our top three posts (in no particular order):

According to Google Analytics, and my own research, almost half of our traffic stems from these three amazing articles! In the past month and a half, we have received 4,500 visitors that amounted to almost eight thousand pageviews. Now, the bottom two articles were not visited too much in that time scheme, but they were featured on numerous sites before that which is great. Here are some other posts of note:

These two alone contributed to about two thousand pageviews in the past month which is amazing.

Our traffic rank is about one and a half million. Now, that might sound pretty bad, but I’m proud to be ranked among the top one and a half million websites, haha. Why? Type in something to google and see how many results you get. Yeah, that’s right.

Speaking of Google. Let me show you some amazing results:

We’re the first out of 22 million websites! It maybe the only search (besides “davepcguy” together and all those variations) where we come up first, but I think this is an amazing victory!

Since our launch, I have posted 17 articles on my Good-Tutorials Account, 8 of which were actually listed and each one received over six hundred clicks! And all those that I submitted were either CSS or PHP tutorials!

The Color Scheme Designer, the only one submitted under Photoshop category, received over a thousand clicks and a five star rating. The Intro to Divs article received 899 clicks, though with a three star rating. The third place here goes to my second CSS lesson with 689 clicks, the tutorial on Fonts, Borders, and Padding.

According to StumbleUpon, CCleaner was our best hit, with a 1 096 clicks!

Okay, I don’t think I can bore you enough with my success so here’s one more thing, our website’s worth. According to many websites such as My Website Worth, our website’s worth is under a hundred bucks. I was wondering why that is. Well, apparently, most of our traffic data is publicly unavailable. Actually, nothing about our website is publicly available, not the Google Page Rank, not the Pageviews/Day ratio. NOTHING at all! Isn’t that bizarre?

Luckily, a few websites have our traffic data and all that cached before it mysteriously disappeared. Here are the results from CubeStat:

And from Website Outlook, the conclusion is about the same:

Finally, according to WebsiteValued, I was able to plugin my own custom information. It is still not 100% accurate because I started Google Analytics in mid October, after many of my favorite articles have already been posted. But here’s the result:

Note the word “Lower”
As a final note, we made about a hundred bucks in ads, which just about covers our startup costs

Thank you for being such great readers and we really appreciate the time you took to read our articles and all of your encouragement!

Share and Enjoy:

CSS Lesson 7: Border Radius and Opacity

Admin — Thu, 19 Nov 2009 21:46:02 +0000

Border Radius and Opacity

I’ve noticed some hundred tweets on CSS3, every day. Check out the CSS3 Watcher for random updates. They actually mention really awesome and useful tutorials. So now, let’s look at some basic features that actually work cross-browser (with some tweaks). You can check some of the usage on two version of one of my projects: the alpha, which utilizes rounded corners, and the beta, which utilizes a lot of opacity features.

I’ll show you some fun features as well as ways to get around them.

Rounded Corners

Creating rounded corners has always been a challenge. People have used several methods to accomplish this. One was by creating corner images to over-lap the background and make the square part of the corner transparent. I won’t explain that method, I don’t use it. But let’s look at the CSS3 write up:

border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

The short-hand property works very well here. It’s explained in my CSS Lesson 2. But let’s go over this in detail:

border-radius is the proper property mark-up in CSS3. There are variations to accommodate each corner of the object:

border-top-right-radius:
border-top-left-radius:
border-bottom-right-radius:
border-bottom-left-radius:

There, you can specify the exact curvature of each corner. You can do that in pixels, em, and other such length measurements. The larger the measurement, the more curved the corner will be.
Now, we all know that most browser today do not support pure CSS3 mark-up. There are two specific properties you can use.
For Mozilla, use these:

-moz-border-radius:
-moz-border-topleft:
-moz-border-topright:
-moz-border-bottomleft:
-moz-border-bottomright:

Yay! These work just as well and the same way as the original CSS3 markup.
For Safari and Chrome, use the following properties:

-webkit-border-radius:
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

But that’s about it. Unfortunately, none of these apply to Internet Explorer, (as was expected), so when you view my testing sites (links are at the beginning of this article), you won’t see anything different.

Input box

Here’s an input box modified by CSS3. Now to get the input box to look like this is a real problem without CSS but let me show you how you can bypass this CSS method on normal fields of text and html. Let me show you what I mean.

The “Div” Method

template diagram

Here’s a simple template diagram. The code for this would be as following:

Read my intro to divs to understand this structure better. But first, let me show you what I’m up to. Now, we know that most internet browsers these days support .PNG files, right? and .PNG files support transparency, yay! Instead of creating a mega background as I did in the case of one of my websites, we can simply take the top snippet of the background. Let me show you:

background diagram

You simply crop out the bottom and top into separate files. Make them as small as possible (height wise), let’s say ten pixels at most. Save them and insert them into the divs like this:

#topcontent {
height: 10px;
background: url(top.png);
width: 100%;
}

Do the same for the bottom content and you’re done! It’s really this easy and it saves a lot of space. You may have to create another div just for the content and right sidebar, but that all depends on what you’re doing with the site.
I hope that helped! Let’s move on to opacity!

Opacity

Opacity, yay! Or as you could call it, transparency. It’s a great CSS3 feature that I absolutely love because there is so much you can do with it. For me, it’s a great design feature because now, I don’t have to mess with new images. (I’ll show you the image method afterward). So let’s go for it. Here is the basic mark-up:

/* IE */
  filter:alpha(opacity=80);
/* CSS3 standard */
  opacity:0.8;

The CSS3 standard works on all browsers besides IE, which, luckily, has a simple work-around. The CSS3 standard works on the principle where “1″ is completely visible and “0″ is completely invisible. Anything in between is the opacity setting. The IE standard, works the same way except this time “100″ is the full opacity and “0″ is the complete transparency.
Unfortunately, this property has limitations. If used on my standard Div model, on the “container”, then not only will the background have a set transparency, but everything within the container will as well, including text, images, and everything else. I’ve tried to use the “!important” mark-up but that does not work either. Also, when another transparency is set, for example, a transparent “content” div, it will only subtract from the “container” transparency. Thus, when the “container” is set to 80 in IE, and .8 in standard, then the “content” will start with an 80/.8 transparency. So when you set a transparency of 80/.8 to the “content” it will be 80% of the original 80%. I know, confusing, but it makes sense in the end

Image Method

Okay, so let’s say you don’t want to put with this CSS3 crap, or you want only the background to be transparent. The method is simpler than you think. Create a 1 pixel x 1 pixel .PNG image, whatever color you want it, and set the transparency in the image, and save it. Then use this piece of CSS:

#container {
background: url (transparentimage.png) repeat;
}

The image will repeat indefinitely and create a transparent background. If you have an actual picture as a background, set the transparency same way.

So, this was it! I hope you enjoyed my tutorial. Spread the word ^.^

Share and Enjoy:

CSS Trick: Disappearing Textbox

Admin — Fri, 30 Oct 2009 16:21:45 +0000

Remember that trick to show a sub-menu using CSS in my older tutorial? Well, I had an idea for a project of mine, and with a little help from my dear friend Raphael. Last night, I launched my little website project called “A Night Story” and made some tweaks. Ignore the story, it’s just a concept. If you hover over the word “city” in the text, you’ll see another textbox appear with more information about the word.

The whole concept of the website is to create a story, a swift, easy-to-read story that contains more information than it seems.

Hover effect

So, let me teach you how to create such a hover effect on any word in the text, and on an unlimited amount of words without much work

The HTML

First, we have to create an ideal HTML situation that will be easy to describe with CSS later on. First, pick the word, in my case “city” and then the text.

We’ll have to put the whole thing within a “span” and then create another “span” for the hover text like this:

citythe city was large, and dark. People droned on and walked aimlessly through the streets every day. The smog filtered through their lungs. No one could escape the industrialization that overtook and destroyed the greenery that had once been there, the darkness shrouded my moves.

If you don’t want to use the tag, then use another tag that you can use as an “anchor”, ie so the browser knows its special, a good one to use could be the tag , which will let people know that the bold text is important and hoverable. Otherwise, you can create ids for all these spans and that’s just too much work. You can try different variations of this formula and see how it works. This is what I did, and it worked out well

The CSS

Let’s focus on the CSS. One thing, I want to do is change the word “city” so that it does not appear…like such a link. Let me show you how I customized the link so that it appears the way it does:

a { padding: 0px; margin: 0px; background-color: #FFFFFF; } a:link, a:visited { color: #0000CC; text-decoration: none; } a:hover { background-color: #369; color: #fff; }

That creates a nice effect. The underline is gone, the tag has no special padding or a margin. I’ve also took the the liberty to make its background match the rest of the div (not necessary). Next I changed it so that the color does not change once clicked, but the color of the word will still be different than white. Once hovered, the word will change color and background as shown on my test page.

Let’s get down to disappearing! Believe it or not, this is so easy, you’ll be asking yourself why you hadn’t thought of it:

span>span{ display: none; position: absolute; width: 300px; } span:hover>span { display: block; padding: 5px; background-color: white; border: 1px solid black; }

First, I used a strange class: span>span means, the span within another span will follow these properties. The text will not display, the position is absolute (so that it will cover other text once hovered over), and the width is nice 300px. You can change the width attribute, and mess around with the position if you wish to. I probably will in the final version.

Next, span:hover>span is a pseudo weird class. The span:hover class basically is a class that takes effect only when you mouse over the original span. By adding >span, we’ve created something genius. This class is a class that works only once the original span is moused over. Now, we’re using the display:block property to display the nice block of text. I used some padding and added a background color so that the other text won’t interfere. The border is there only for neatness.

And that’s it! With just these few steps you’ve created something that people use javascript for!

Pros:

The pros of using CSS:

It is really easy to change the effects

You don’t have to learn javascript

It works even if the user has javascript disabled

It is faster than javascript because it requires no calculation or parsing

Cons:

The Cons of using CSS for this particular effect:

less maneuverability

less special effects

looks too simple for some websites

With some experimenting and patience, you can create really beautiful drop-down textboxes with custom backgrounds. Well, the possibilities are endless!
Again, go check out my testing site for a demo!
Share and Enjoy:

CSS Lesson 6: Intro to Divs

Admin — Sun, 25 Oct 2009 22:36:44 +0000

Alright, alright. So I skipped all that fuss with horizontal navbars but that stuff is easy so I’ll create a short article on it later.

Let’s start with the
tag. It’s what I’ll be covering. Making use of div’s with CSS. You’ll need to know the following before we start the lesson:

CSS Lesson 2

CSS Lesson 3

as well as basic HTML knowledge

If you don’t how to add CSS to your website, check out my CSS Intro tutorial and CSS Lesson 1.

What are “divs”?

A div is basically a section, a chunk of HTML that you can apply the same CSS to. It works similarly to but on larger areas and more complicated HTML. Also, it supports nesting.

A single DIVision can be used, for example, to make a header, another for the navbar. Divs are usually defined using the CSS properties: margin, padding, border, height, width, and float.

So what can you do with Divs? Well, that’s the best part. Using divs, you can create multi column websites, you can make the website aligned in the center, instead to the side. You can create rules for large chunks of stuff including text and pictures.

Divs largely replaced the use of tables for page layout, which is great.

Recognizing Divs

Now, let’s look at how divs should be structured, I’ll be re-making a template I did in PSD a while ago, you can find in Exan’s Corner.

Template

Right as I’m looking at it, I can already distinguish four different sections in the template. The first is the header that contains the words “A Chiropractic Group”. The second section is the nav bar and the third is the content on the right. The fourth would be the footer. But when you’re thinking of divs, you have to think differently. This page will contain at least five different divs, if that. I’d probably cut it up to six or seven different ones. Why? Well let me show you.

NOTE: These are only examples, I am not actually recreating the template above.

Div illustration

Way too confusing, eh? Haha, there are just so many sections. Let me break it down for you and explain why it is this way. Also note that I did not add the “footer” div which would be number 7 on the bottom. It works the same way as the top div.

1. Header – Just a standard div that you’ll put at the beginning of your
tag. It will always be on top unless you set another div for absolute position. First thing you want to do while setting this division up is giving it an id or a class like this:

. Great thing about divs is that you don’t NEED to put anything in there so let’s set up the rest of the properties. Second step is to set up the width and height using CSS:

#header { width: 100%; height: 150px; margin: 0; background: url(header.png) repeat-x; }

This is basically how we set up all of the divs. Using the “repeat-x”, we don’t need to slice large portions of the header (thus adding to the size of the images needed to be downloaded) and we create a continuous header that will show up the same on all web-browsers/monitors. You’ll need to separately define the classes and ids for the logo as well as the text inside the header to match the PSD template, you might also have to create another separate div for the logo and one for the text, just in case.

2. Wrapper – I’m sure you’ve encountered that term before. Whenever you need two or more divs to show up next to each other, you need to “wrap” them in another div. In this case, it’ll be the content area, the content footer, and the sidebar that will be wrapped together. With the wrapper, we can also set it up so that the content shows up in the middle using the property “margin: 0 auto;” which will automatically center the content. Here, though, we just need to set up the background and the width of the wrapper using CSS. Once again, assign a class or an id to the div.

Sidebar div

You’d have the top div where you would use the first five or six pixels to create the corners, the bottom div for the same purpose. Also, use only PNG because JPEG does not support transparency. The middle would use a repeating background again. Here’s how you’d set it up:

#sidebar { height: 600px; width: 200px; float: left; } #sidebartop{ height: 10px; background: url(topside.png) no-repeat; width: auto; } #sidebarmiddle { height: auto; background: url(sidebar.png) repeat-y; width: auto; } #sidebarbottom { height: 10px; background: url(bottomside.png) no-repeat; width: auto; }

Now you’ve set up the sidebar. Do you get the idea yet? All you do with divs is set up portions of the page. The problem with this is that the sidebar height will be based on the content inside. For template-making purposes, set the height and change the CSS afterward if needed.

TIP: Create a special class called “clear” with these attributes: .clear { clear: both; height: 1px; } and add it at the end of every div that has the property “float”

4. Content Wrap: Here’s another tricky part. You see how the content has two different sections? One above with articles and one below with a pseudo footer? They’re aligned together so that means, we need another wrapper. This one will how 5. Content and 6. Pseudo-footer. The set up is easy.

#contentwrap { width: 700px; height: auto; float:left; } #content { width: 698px; height: auto; } #psfooter { width: 698px; height: auto; }

7. The Footer – This is the easiest part and probably the most common on all websites.

#footer { height: 20px; width: auto; margin: 0 auto; text-align: center; }

That’s it! This is how you create a website out of a PSD template, basically. And this is how you use divs. It’s all about setting up the height, width, padding, margins. Really, there is no magic to it.

Altogether, here’s the basic layout in divs:

Using the CSS, you can define the rest of the properties as shown at the beginning (ie. width, height, float, margins, background, border etc).

In my next tutorial, I’ll be covering the correct way to slice a PSD template for HTML/CSS use. Remember to use the same measurements in photoshop as in CSS and HTML!

Overview

A
or division, is a section of a webpage that shares the same properties. They’re easily recognizable, there is a div for a sidebar, for the content, the header, and the footer.

If you want multiple divs next to each other, create a “wrapper” div that will group the multiple divs together. Next, make the divs “float:left” to ensure they’ll be next to each other. After every “float”ing div, employ the “clear” div with the properties “clear:both; height: 1px”.

If you want to have rounded corners on your webpage and still retain a variable height of the division, create three separate divs nested in the original. One for the top, one for the middle, and one for the bottom. The top and bottom will contain the part of the background with the rounded corners. USE PNG!

s may look confusing at first but once you start working with them, you’ll appreciate the options they provide you with.

See you next time!

Share and Enjoy:

To do:

Admin — Tue, 20 Oct 2009 20:38:08 +0000

I thought I’d start updating on what our plans here at davepcguy.com are.

Article:

I’m currently writing two different articles, one is one Good PHP Practices which deals with good habits while writing code. I’m basically aggregating different articles that deal with this and highlighting the most important ones.

Next, I’ll be comparing the different URL shortlinks, and I’m well on the way with that. It’s an interesting article comparing bit.ly, tinyurl.com, and other such services.

Launched Websites:

We’ve finally launched a chiropractic website! Go check it out

gcgsixes.com

please check out the “specials” where my custom php e-mail script is used!

Future Launches

We’re planning three more websites to launch. One is a personal project of mine that I’ve mentioned earlier (a lot earlier, months ago) and it’ll be surprise launch when it comes out.

Next website we’ll be launching should be done in a couple of weeks. It involves a script akin to fmylife which I will be discussing in my next few articles. It will be a loooong painful process and we’ll manage it, I’m sure

Anyways, see you soon! Dave will have an article ready by the end of the week! and I’ll be posting another article once I’m done with a current PSD template I’m working on.
Share and Enjoy: