CSS tip of the day

About

WebDesignBlog is the personal blog of Katrine Thorulf, a Multimedia Design Student from Aarhus, DK. This site is my tube, voicing the things that are going on in my Multimedia world. Please feel free to join in on my thoughts.

Exams are coming up…. yaakk. Well thats the only very bad thing about being a student, but I think I will be ok. On January 10th I will be having a group examn on a school project that we did before Christmas. We worked on that project for one month, and i actually think it has turned out quite ok. The project was about creating and promoting a website for an Icelandic guesthouse and café with the uniqueness of having a cowshed right next to the cafe, thus giving the option to watch the cows through a window while drinking your latte in the cafe. Experience economy we argue:-) 

Our mission was to establish a livestream for the cowshed from ustream.tv and create some viral video to draw some attention to the website. Sounds a bit funky? Better check out the site at http://bippi.net/cowshed/web/ however not yet fully completed but still working enough for you to get the idea:-) It has been a very interesting experience, a shitload of good laughs and a ton of web 2.0 fun. Ill let you know whether or not an external censor would get the point when exam results are in:-)

I have recently started working with Firebug, a great extension to Firefox that lets you edit, debug, and monitor CSS, HTML, and JavaScript in your web pages.

Where I have found it very useful is when my web designs screw up and I find it difficult to figure out where something went wrong.

Firebug gives you the option of navigating the mouse over the page after which the relevant HTML section for that particular part of the page is shown in the main bar window and the relevant CSS information with inherited values are shown in a side window.

This way you are able to easily work out what CSS values apply to individual HTML sections and what CSS values are inherited from elsewhere in the CSS. Once you have located mistakes, it is easy to switch between inspecting and editing of code.

Firebug displays your CSS, and if you want to change something, the program provides values that can be used instead, and immediately displays the changes on the page so that you can see if it is changes that you want done to your designs, and if they help you get your mistake corrected.

Another feature that I am quite fond of is that it clears up the the nested boxes that make up CSS, known as the margin, border, padding, and content. As you move your mouse over an HTML element in any of Firebug’s tabs, you’ll see the element’s boxes shaded in different colors right inside the page. In this way you quickly see the difference between margins and padding, for example.

I have not been around all functions yet, but so far I think it is a great tool, that definitely has helped me. It is easy to use, and install, so just go ahead and get your own version at:
http://www.getfirebug.com

Kuler is the place to get your color inspiration.

It is a web-hosted application from Adobe Labs designed both to stand alone and to complement Adobe Creative Suite software.

The good thing about it is that it is all about color: You can get inspiration, experiment with colour combinations and share with others. It is created in Flash CS3 and is quite interesting and inviting.

Check it out at http://kuler.adobe.com/

I recently got the task of creating a flash file and convert it into some “normal” movie-like format for a presentation. Piece of cake I thought!

Well!….

I became wiser…. Apparently Flash8, which at the moment is the version I use, is not built to export .swf to .avi. Hrrmf! At least not when you do not have all your elements on the main time line. In this case it just left out whatever movieclips I had. That caused me some headaches, struggling with different methods to get the stuff exported the right way.

I ended up finding some free trials of some converting programs, actually quite a few, and ended up with one called “Bytescout SWF To Video Scout” that kind of did the job, but unfortunately in a poor version with quite a quality loss.

I have, however, heard that the new Flash CS3 is integrated with Premiere, and thereby is able to do the job through Premiere. So next on my “wish list” is a new version of Flash and Premiere to do the job. I’ll look forward to this! Meanwhile, does any of you know a freeware program that does the job of converting .swf to .avi without much quality loss?

I’ve been discussing with friends and acquaintances why they are blogging. There turn out to be many reasons, and networking seems to be an important reason for many - including me. It is amazing how many brilliant minds you find out here in cyberspace and blogging is a very good opportunity to get to them and perhaps pick their brains to develop your own game… I’m personally learning new good stuff every day from you guys out there, so thanks very much:-).

And as there is so much talent in cyberspace, some say that blogging opens doors for some people in the sense that the display of your “stuff” through your blog makes it possible to be “spotted” on your talent and thereby opening the door to e.g. your dream job. In this connection it would be interesting to hear from any of you who might have experienced that blogging opened some doors for you, as good inspiration for fellow bloggers.

Please share your stories:-)

It is a good habit to test your designs in as many different browsers as possible, and for PC users, testing the Safari browser has not always been an option, as this is a mac browser. However, a Safari browser for Windows is now available. Find it here.

You can always argue how much energy you should put into fitting your designs to the Safari browser as their market share is not extremely big (4.68% August 2007). If you expect a lot of U.S. visitors, it might be a good idea - otherwise check your counter for the percentage of Safari browser hits to see how great the demand is.

It is always a good thing to test your designs in different browsers and different versions of these, and if you haven’t got a full browser archive, evolt.org provide downloads of older browser versions of all the browsers you can think of…

I’m sure you have been there: pulling your hair out because of the trouble of having to use different computers when testing your web site in multiple IE browsers.
I came across this brilliant program that allows you to have multiple IE browsers installed on your computer, and switching easily between them when necessary. It definitely makes my life easier!
Check out this link:
http://tredosoft.com/Multiple_IE