KillerSites Blog

CSS

CSS Layouts Video Tutorial Series – Introduction

May 29, 2010

Hi,

I just wanted to announced that I have just released our new video course on CSS layouts. It is a 13 part series where you will learn both fixed layout and liquid layout using modern CSS techniques.

As an added bonus, you will also be learning a little about Dreamweaver CS5 since all the demos are done in the new Dreamweaver.

Check out the intro video (watch it in 720p and fullscreen):

I will be releasing more samples from the course on my blogs but you can get the whole course through our video tutorial subscription service.

Thanks for reading.

Stefan Mischook
www.killersites.com

read more

How to Add a Background Image with CSS

March 4, 2010

csstutorial.net logo

Hi,

In our continuing pursuit to make web design easy for you, we have yet another great little tutorial on using CSS to insert background images into your web pages.

A little bit from the article:

CSS also gives us the tools to direct our background image how we want it. The default, as you can see, is that it repeats itself horizontally AND vertically to fill the entire background, regardless of size. Sometimes we might want the image appear only horizontally or vertically – and maybe not directly on the edge of the viewing area.

… Anyway, you get the idea. Just in case you missed the link, here it is again: background images with css.

Thanks for reading,

Stefan Mischook
www.killersites.com

read more

Styling a Horizontal Navigation Menu with CSS

March 3, 2010

csstutorial.net logo

Hi,

We are busy at work here creating new videos and tutorials with the aim to make web design easy … so, I just wanted to mention a new CSS tip on csstutorial.net on:

Styling a Horizontal Navigation Menu with CSS

From the article:

It’s true: Your navigation items are really a LIST. Bread, Milk, Sugar, Coffee, Home, Contact Us, About, Cheese, Tomatoes, Sitemap. See, it’s a LIST!! And it should be coded and styled like a list. It’s easy.

Just another one of our growing collection of CSS tips.

Thanks,
Stefan Mischook

read more

CSS Tips and Tricks Collection

February 20, 2010

csstutorial.net logo

Hi,

We just started building a new collection of CSS tips and tricks on our dedicated CSS training site csstutorial.net.

CSS recipes that are byte-sized!

I wanted to create a beginner friendly collection of CSS tips that got to the point fast. For example, check out this tip on CSS and font sizes.

Anyway, you should see this collection grow fast (with the help of a few authors) that will include written and video CSS tips.

Thanks and let me know what you think.

Stefan Mischook
www.killersites.com

read more

CSS Page Layout Strategies

September 13, 2008

If you’ve been struggling with CSS based page layouts (as apposed to using tables) and you’ve been smacking your head against the wall to get things to work … believe me, you’re not the only one!

No, you’re not stupid … CSS for page layout is.

What?! CSS is flawed?

Indeed. CSS for page layout sucks hard because the logic behind CSS page layout is weak at best, and perhaps, even flawed. I can say this with experience in other languages like Java and even VB. Not that I am saying CSS is a programming language.

Anyway …

For web designers used to the craziness of CSS layouts, they would be flabbergasted at how easy creating layouts/views/screens are in VB or even Java when compared to CSS.

What’s the main problem with CSS?

read more

Cleaner code is better than faster code

May 11, 2008

I can’t tell you how many times that my programming experience (in Java, PHP etc) has guided me in my web design work … and strangely, even in other aspects of my life not at all related to topics ‘nerd’.

… Ah, nerd wisdom prevails in all aspects of life.

🙂

Anyway, here yet again, is another example where programming guides me: this time, it’s all about web design and code.

Over the last few years, the consensus in the web design community has been to streamline code. In real terms, that comes down to:

  • collapsing html
  • collapsing css
  • … and consolidating css code into one file, to minimize the number of server hits.

… The idea is to speed up web page load times and to reduce web server loads.

This is an important goal and something all web designers should be concerned about. The problem is that if you are concentrating on optimizing your CSS or HTML to speed things up, you are concentrating on the wrong parts of your websites.

The fact is, that most of the optimization opportunities is actually found in your images, Flash movies and other multimedia content – not the code.

read more

Use Dreamweaver CS3 templates to save time

May 1, 2008

Hi,

When I was working on the redesign of the killersites.com, I found (as a starting point) that the templates that ship with Dreamweaver CS3 useful.

Dreamweaver CS3 starter templates

Dreamweaver has a nice collection of bare-bones web templates. One thing I found cool about these templates, is that they contain a lot of notes that describe why they (the web-nerds at Adobe) have certain things in place – like the specific code they used to deal with a given CSS layout issue.

… This is another good way to learn more about CSS.

read more

How to organize your css code: the ‘killer’ css structure

April 29, 2008

I can’t stand articles that make you read two pages before getting to the point. With that in mind, let’s look at how I think css code should be organized.

php-video-tutorial

In a nutshell: css code should be divided up into at least 4 separate pages:

  1. page-structure.css
  2. text-styles.css
  3. misc.css
  4. ie-styles.css

How about we call this the ‘killer’ css structure.

🙂

Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.

read more

Automatic Table Styling with Javascript.

January 10, 2008

A while back a wrote a JavaScript script that automatically styled an HTML table. In a nutshell, the script automatically changes the background color of every 2nd row in an HTML table.

Anyway, someone recently sent me an updated version of the script. You will probably want to read the original article before looking at these changes.

From the email:

I did some simplification on the code for zebrastripes. I don’t bother with the last array bit because TR elements have the bgColor attribute.

trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;

Greetings,

tarjei

The complete function:

function stripe_table(id_name) {

var my_table = document.getElementById(id_name);

/* For debugging */
if ( !my_table ) {
alert(“The ID ” + id_name + ” is not found.”);
return;
}

/* Table may have more than one tbody element */
var tbodies = my_table.getElementsByTagName(“tbody”);

for (var cnt = 0; cnt < tbodies.length; cnt++) { var trs = tbodies[ cnt ].getElementsByTagName("tr"); /* Walk table row for row */ for (var i = 0; i < trs.length; i++) { if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor) { trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd; } } } } }

CIAO.

Stefan Mischook

read more