PeteL's Blog : CSS Examples

ReMIX: Presentations in PDF & Source for VS2008 Demo

PeteL — Thu, 28 Jun 2007 02:02:00 GMT

Yep, the internet is on! I think most of the comments I got yesterday all revolved around the fact that I posted all my presentations in PPTX format. I work for Microsoft, and well, I use PowerPoint to create my presentations. I figured most people, even if they didn't have PowerPoint on their machines would at least have the viewer so they could see the slides, but it sounds like quite a few people would rather have a PDF or some other format. So, here you go!

TechEd: Top 5 Web Blunders
ReMIX: Building Your Own Video Site
ReMIX: Implementing Rich UI
ReMIX: A Tour Around VS2008
ReMIX: Search Engine Optimization for Rich Media

Note that these are stored on my personal website, so I can't guarantee how long they'll last as they're not on an official Microsoft server.

I've also included with this post the source to the VS2008 demo that I did. I had to swap the pictures out and replace them with corporate clip art, but the rest of the content is the same. I included the source for what I started with, and the source that I finished with so that you can see where I started, and where I finished. If you want to follow along, you can watch the original demo at the MIX site

ReMIX: Search Engine Optimization For Rich Internet Applications

PeteL — Tue, 26 Jun 2007 00:06:00 GMT

I think that this was my favorite session I did while doing all my ReMIX presentations. It was the one I found most interesting, and most relevant to the work that I do, and see many web developers and designers doing every day.

I'm not sure if there is video for this session, but if it shows up, I'll be sure to link to it. In the mean time, I've included the slides for you to check out, and I'll try to get a blog post out about in the next week or two summarizing the info in the deck.

Web Blunders: The Top 5 Biggest Mistakes On The Web

PeteL — Mon, 25 Jun 2007 23:45:00 GMT

At TechEd this year, I presented a session where I presented my top five pet peeves on the web, the biggest and easiest problems to avoid on the web. With how easy it is to share content on the web, I felt that these top five things were the best and easiest to get rid of.

In order, I felt they were:

5. Unprofessional Site Design
4. Lousy Content
3. Poorly coded HTML/CSS/JavaScript
2. Inappropriate use of Rich Content
1. Not Being POSH

I've attached my slides below, so check them out, and let me know what your pet peeves are!

One Way to Level the Layout Playing Field

PeteL — Thu, 12 Apr 2007 22:02:13 GMT

One of my pet peeves about CSS and HTML standards is sometimes, they aren't overly explicit, and browser vendors pick arbitrary values for things like line height, or margin or padding and the like. Eric Meyer has talked about a reset.css stylesheet that would effectively eliminate those differences and override the browsers value with the ones that you know and you specify.

I'm excited to see that he posted a version of it (though reading the comments, it sounds like there will be a few revisions coming) on his blog today. I'd highly recommend checking it out. He based it on the one from the guys at Yahoo! UI, added a few things and tweaked a few others. It's certainly one way to help eliminate those frustrating hair pulling "why isn't this working" kinds of questions!

IE Chat Transcript Online

PeteL — Fri, 19 Jan 2007 10:15:27 GMT

I want to thank everyone who came attended today's chat, we had a great turn out this morning! It's a lot of fun to talk to other web developers and web designers. We move forward by talking to you, and hearing what you want, and this is a great opportunity for us, and it's a cool way to help you figure out some of the stuff you're working on.

I should also thank you guys for putting up with LiveMeeting instead of a real chat client. We'll be moving into a proper chat client in the near future. There were some problems getting it set up in time for this chat, so we used LiveMeeting instead..

I've posted the transcript online, and we'll be getting it into a more permanant place, I just wanted to get it online and available as quickly as possible.

The chats will continue, keep an eye on the IE Developer Center or the IE Blog as we'll be posting upcoming chats and web casts there. We'll also try to make sure they're available online after so that those who can't make it can still get the information.

Web Designer Expert Chat Tomorrow (1/18/07)

PeteL — Wed, 17 Jan 2007 23:54:20 GMT

Just a quick note to about the expert chat tomorrow. It'll be a great opportunity to talk to the IE team about CSS, HTML and other design specific stuff. If you've got questions, this is the place to ask them.

We do plan on making it available for download after the session. We had a small problem with the first one, and unfortunately we lost it, but hopefully we won't lose this one.

Hope to see you tomorrow!

CSS Celebrates 10 years and Problems With BHOs & Tool Bars?

PeteL — Tue, 19 Dec 2006 23:53:00 GMT

We just moved into our new building here on campus (we moved from 42 (good) to 17 (not so good)). I've spent most of the day unpacking so far, and haven't gotten much else done yet. Though I'm back to a window office. I'm right at the edge here on getting a window office. I've been here 5.5 years, and 5 seems to be about the magic number for this tema. The question now becomes how long will I get to keep it until someone more senior comes along. In any event, this new building is interesting. The view out of my window is great, the fact that I CANNOT find the stairs for the life of me, drives me up the wall. I'm the kind of guy who doesn't like taking an elevator for less than 5 floors. I'm on the third, so I'd rather take the stairs. In this building, I've not been able to consistently find them yet. God forbid if there is a fire or anything like that, I'm screwed!

I also thought it would be neat to throw out a happy birthday to CSS! The W3C, in a press release today announced that CSS is now 10 years old. Very neat, though a little scary.

Also, I came across a blog post on Tony Schreiner's blog about problems with BHO's and Toolbars. If you're working on one, and you're running into problems, it might be worth checking out!

Web Design World Session: IE7 From CSS to RSS: How to Take Full Advantage

PeteL — Wed, 13 Dec 2006 23:51:00 GMT

I just finished my session titled "Internet Explorer 7 From CSS to RSS: How To Take Full Advantage" here at Web Design World, and it went over pretty well. Cameron Moll is currently doing a session right now, so we did lose quite a few people to him, but he's an excellent speaker and is showing some really cool CSS and design stuff, so I understand why they're over there.

I talked about some of the cool features around IE7, like what quirks mode is vs. standards mode; how to use RSS on your site, how to implement OpenSearch on your page, and then finally some of the cool CSS fixes that we made for IE7.

I've uploaded my slides along with this post so that the info can be shared. I'm don't have the samples that I showed available, but much of the info that I showed is included in the slides. If you're looking for something specific, let me know and I'll try to get it up there for you!

Useful Web Design Links: Submitting to search engines, and picking colors/colours

PeteL — Mon, 30 Oct 2006 01:04:00 GMT

I just finished teaching "From Prints To Online: Creating Your Own Website" class at PCNW and we found a couple of useful links that I though I would share.

Getting listed on the major search engines:
Google: http://www.google.com/addurl/?continue=/addurl
Search.MSN.Com: http://search.msn.com/docs/submit.aspx
Yahoo: http://search.yahoo.com/free/mobile/request

We were also searching for custom colours to use on your website, and when we searched for colors, we came across the Web Color Wheel. It's a pretty neat little site that lets you move the mouse until you find a colour you like, then it gives you the appropriate HTML color codes that you can use to pick the colors.

Live From Redmond: Creating Real World Web Application UI with Master Pages, Themes and Site Navigation

PeteL — Tue, 08 Aug 2006 04:08:00 GMT

A few days ago, I presented a Live From Redmond: Creating Real World Web Application UI with Master Pages, Themes and Site Navigation in an on demand web cast. For my first presentation, it went pretty well. I had never used Live Meeting before, and had only had one Live Meeting "Goofup", where I forgot to shift over to the desktop, instead of the slides.

The presentation went well, but admittedly, there was a lot of information presented, an hour was really way too short to do everything that I wanted to talk about. In fact, I cut out a good chunk of stuff as I was moving through in order to get through to site navigation and themes in the last few minutes.

In any event, I had said that I would offer the sample for download after the presentation, and so here it is. You can download it at http://www.nocommonground.com/blogSamples/finishedsite.zip. It's about 6 megs to download but contains everything that I demo'ed in it's completed form, so you can use that as a sample for where you want to go.

Open Source Web Designs

PeteL — Wed, 26 Jul 2006 21:15:00 GMT

One of the things that I rarely have the time to do is to create really nice looking web templates. Stuff that is just graphically pleasing, between work, school and having a social life, I just don't get time to do it. But reading one of the many blogs that I read in the morning, I came across this site called Open Source Web Designs. It's a great idea, and a fun way to share your artistic talents.

Each template has it's own EULA, so you'll have to have a look to determine if it will work for you (and your business if that's the case), but the idea of having a good looking CSS designed page it awesome.

I would love to see someone do something similar to this, but instead of simple HTML and CSS, to use Master Pages, HTML and CSS so that you could plug it right in to ASP.NET and have it work.

I think I'll probably be looking over the site in the next few days to see if one or two catches my eye, and roll it out on www.nocommonground.com as that site is SORELY in need of some make overs.

Oh, and Alison, on of my coworkers made cupcakes last night, and brought one in specially decorated for me! How cool is that! That's supposed to be me rowing a single shell! Thanks Little!

CSS Class Inheritance (Descendants and Siblings)

PeteL — Thu, 22 Jun 2006 01:17:00 GMT

I got some great feedback on my last big CSS post, so I'm going to continue working through some neat and fun examples of CSS. I'm going to continue along the same path of applying CSS to pages as I think this is a really important area. There are so many ways to apply CSS, and so many funky ways to get things done. I've attached the file I wrote this up in as an attachement to this post, so if it doesn't appear properly in your browser, it may be because the blog software is eating my CSS. In that case, just view the attached doc.

Using the same theory that I talked about last time, and derived CSS classes are really cool. For example, this span looks pretty normal, except for this bold chunk. Notice the bold is bold and blue. To get that, I used a descendant selector. In my style sheet, I put: span b { color: blue; }. That applies the style to bold block that is within a span. Not a bad little trick if you want to do something specific on some HTML that will be within another block. Obviously, you can get much deeper, such as in this case.

Descendant selectors are cool, but might not always do what you want. What if you want to only apply some CSS style if an element is a child (direct descendant) of another element. Well, you can do that too! Instead of just separating the two with a space, you simply use the > symbol. For example, above, I created a new item that will only affect em's that are direct descendants of spans. That way, you get something like this.. The code I used for this was span > em Sadly, this isn't something that is supported in IE6, but is properly supported in IE7.

But what about just hitting siblings? This is another one that IE6 doesn't properly support, but is supported in IE7. Say for example, you want to hit on tag that immediatly follows another. For example, this bold followed by italic, should have the a chunk of the text in teal. If you use the + sign between CSS style attributes, you can express that the tag immediately following should also get the attributes that you specify. So above, I've got b+i { color: teal; }

Rounded Corners in CSS

PeteL — Wed, 14 Jun 2006 20:12:00 GMT

I was talking with a friend last night, and he was lamenting the problems that he was having with CSS. Not so much the problems, but more the fact he was just starting to learn it and wasn't really enjoying it so much. While we were talking, I tried to poke a few ideas out for future CSS blog postings. I came up with one that I wanted to play with as I haven't done much work with it at all, and figured it'd be a good way to make sure I knew it, and that it worked properly.

Sure enough, the idea was how to create rounded corners on website. So I got in this morning, and started my morning blog reading, when I came across a post titled Rounded Corners with CSS by Rick Strahl. He beat me to it! And did a great job of it too.

So rather than rehashing exactly the post, I'm simply going to suggest you guys have a look at his post, and in fact, check out his blog, he posts lots of neat stuff on there. He has a set of web utilities that will even generate the rounded corners on the fly for you too, which is really hot! Though, for my personal site, it's a little more than I want to pay.

CSS Class Selectors and ID Selectors

PeteL — Wed, 07 Jun 2006 23:20:00 GMT

EDIT: the blogging engine may be eating my style content, so if you don't see colors, bolds, and such in the below text, check out the same entry as an HTML file on my web site at http://www.nocommonground.com/blogSamples/selectors.htm

Classes vs IDs

Classes and IDs both allow you to define how a control will look on a page, though they have different uses, and shouldn't be used interchangeable. The first and biggest difference, is that with ID's, you can only have a single instance of an ID on a page. For example, if you have a DIV on your page with the ID as "myDiv" you cannot have another control (of any type) with the same ID. Thus, if you create a selector, you can only use it once. With classes, you can use it as many times as you want.

IDs do have a few things over Classes though. ID's generally take a higher precedence over Classes when trying to determine which control gets what style applied. For example, this span has both a class selected, and an ID defined. The class sets the background colour to blue, and the ID sets the background colour to green. Since the ID is higher in the precedence list, it takes priority.

Be careful though, as browsers generally treat class names as case sensitive, thus you may find yourself wondering why a style isn't being applied. It's either the browser being funky or a problem with cases!

Using Multiple Classes

One of the cool things that you can do with CSS classes that you can't do with ID selectors is inherit and build upon other classes, or use space separated lists in the class definitions of controls to apply multiple styles on a single control. IE6 does have some weirdness in this area, though IE7 and FireFox do behave correctly.

I've created 4 style classes below, .blue, .bgYellow, .bold and .combo.blue.bgYellow. Each one is pretty simple, and does exactly what it's name implies. Where things start to get interesting is when you use more than one class in a given control. For example, the second scenario, where class="blue bgYellow". It combines the properties blue class and the properties of the .bgYellow class, into a composite class, resulting in blue text with a yellow background. (IE6 has a bug here and includes the .combo.blue.bgYellow properties here), One of the cool things that you can do with CSS is inherit and build upon other classes, or use space separated lists in the class definitions of controls to apply multiple styles on a single control. IE7 and FireFox does display this properly, though as mentioned above, IE6 needs a swift kick in the pants.

<style type="text/css">
   a[href="http://www.microsoft.com"] { background-color: Red; color: White; }
   #spanID { background-color: Green; } .blue { color: Blue; }
   .bgYellow { background-color: Yellow; }
   .bgBlue { background-color: Blue; }
   .combo.blue.bgYellow { font-weight: bold; }
</style>

<span class="blue">this is just a single, unexciting class, nothing special here</span>
<span class="blue bgYellow">composite of both .blue and .bgYellow styles</span>
<span class="combo blue yellow">composite of .blue, .bgYellow and adds bold to the mix</span>

Attribute Selection

This is one of my favourite things about CSS, and unfortunately, it's not supported by IE6 so if you're looking with IE6, you won't see the cool factor of this. I've got two links here, Live.com and Microsoft.com. If you're looking at this in something other than IE6, Live.com looks like a normal link, but the Microsoft link is white text with a red background. CSS lets you specify styles based on attribute values. In my style block, I've got a[href="http://www.microsoft.com"] { background-color: Red; color: White; } So any a tags, that have the attribute href="http://www.microsoft.com"] get that style applied to them. You can also apply based on partial values by doing using a[title~="yay!"].

DOCType? Why do I need that?

PeteL — Thu, 18 May 2006 20:33:00 GMT

I got a comment on my last post (CSS Positioning: Margin, Border, and Padding) that was rather blut, telling me to pull it down, as it was confusing and IE rendered things incorrectly. I did a little checking into things and s/he was partially correct.

In all ASP.NET and HTML page templates that are supplied by VWD, they all include a DOCTYPE at the top of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You've likely seen it on all kinds of pages. The interesting thing about including this DOCTYPE in your page, is that it causes IE to render in a more standard, and acceptable way. When it's not there, IE renders in what is called "quirks" mode. For example, without it, IE counts the width of the DIV as the content, plus the padding and border width! So suddenly, your 500px DIV is no longer 500px, but 500px minus the width of your border (for each side) and minus the width of your padding.

And that is why you should always include the DOCTYPE line, in your page. It'll make sure that IE behaves itself, and doesn't get all "quirky". It's also why my fine art photo website doesn't render properly! I took it out not realizing it. Oops! That's also why this page doesn't render quite correctly, the blog software use doesn't have the correct DOCTYPE line in it, so things render in quirks mode.