Uneven repeating backgrounds ilustrated

Notice the marked areas. Well, I found a pretty awesome and easy to implement solution.

You slice the marked images and you do the following — when you have your main page container, as its siblings you create 2 new divs, bgHelperLeft and bgHelperRight, and you style them something like this:

Since you used z-index: -1; then it means that it won’t overlap any of your center images. Absolute positioning means that it will stay there, and those widths means that they will meet BEHIND your center area so the user won’t see the binning point — all creating a cursive flow from one side of the screen to the other side of the screen.

It works on all major browsers, so this is a good trick to know and have in the book.

Leave any questions in the comments!

Did you know that IE6 (and only IE6, IE7+ doesn’t have this issue) has a weird UL/OL bug ? This can be quite an issue, though not as much nowadays since people use IE8 and such, but it can be an issue for graceful degradation of your website.

Let’s say you want to make a vertical list of items that are linked-able like this:

In all browsers except IE6, the list will look OK, however IE6 has a peculiar thing — because you press ENTER and you put the list items each on a new row, somehow IE6 interprets that space as a white line, and you will end up with THIS:

THE HORROR!!!!…

Well, there are multiple ways to fix this issue, from involving Huge javascript codes to doing some very basic things. The most basic method of all is to write those links as follows:

The “wonders” of IE6 …

If you have questions, post them in the comments and I will be happy to answer them.

We’re going to do that via the CSS3.0 rule @font-face. This only works in Firefox/Safari/Opera/Chrome/+ other more modern browsers. IE7/8, unfortunately, do not qualify for “modern” status, however as long as you declare some default general fonts after your custom font, then IE won’t really have an issue rendering the “other” default fonts. If you absolutely must give IE the same custom font, you can use the .eot font-types that IE can read.

This is the chunk of code that you need:

@font-face { /* declare fonts */

    font-family: "MuseoLight";

    src: url("fonts/Museo300-Regular.eot");

    src: local("Museo 300"), local("Museo-300"),

        url("./../fonts/Museo300-Regular.woff") format("woff"),

        url("./../fonts/Museo300-Regular.otf") format("opentype"),

        url("./../fonts/Museo300-Regular.svg#Museo-300") format("svg");

        }

        /* display fonts */

        h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }

        h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }

        h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

This pathing assumes that you have a CSS folder where you have your stylesheet, and a fonts folder where you use your custom fonts.

For a good web converter of fonts, I highly recommend Font Squirrel | Create Your Own @font-face Kits – it’s very reliable, and they even give you the CSS you’ll need to copy. So, no need to muck around with the above code too much, but it helps to understand what it actually does.

Basically, the above chunk of code checks the server (your website) for the custom fonts and then loads and applies them to the requested elements. There are multiple fonts because each browser had the awesome idea of only rendering their own fonts; IE has the .eot fonts, .woff is for Firefox/Gecko browsers, .otf is for Safari/Chrome, and #svg is for basically any browser that supports svg-fonts… so you’ll need all of them if you have to have some sort of consistent results via multiple browsers.

That’s about all for this week. Stay tuned for more!

This is a bit nerdy, but a very cool thing you can do is to play with javascript and random numbers and the math functions (this is nerdy, all right).

First, we need the functions we will work with:  math.floor() and math.random()

- math.floor() – Rounds the number down to its smallest point, so 4.9 becomes 4, 5.3 becomes 5 and so on and so forth

- math.random() – Returns a number between 0 and 1

How can we use them both together? Very easily:

// random number between 0 and 10 //
// the * 11 part is the max number you can roll, you put 11 because 0.9 x 11 is less than 11 so it will be
// rounded down to 10,
 $(document).ready(function(){
 var x = Math.floor(Math.random() * 11);
 $("body").append("<div class='alpha'> </div>");
 $(".alpha").text(x);
});

The above code will give you numbers between 0 (including 0) and 10 (including 10).

If you want to skip the 0, and actually get numbers between 1 to 10, then you need to do this:

// however you can get also a 0 number because 0.0(something) will be rounded to 0
// in order to prevent that we add a +1 like this. this means that you will have numbers between 1 and 11
// so we have to make it * 10 instead of * 11
 $(document).ready(function(){
 var x = Math.floor(Math.random() * 10)  + 1;
 $("body").append("<div class='alpha'> </div>");
 $(".alpha").text(x);
});

The reason why I changed it to *10 is because 0.9 x 10 = 9 and adding 1 at the end of the function will bring it to 10, however 0.0 x 10 = 0 + 1 = 1, so we will never ever get a 0.

Of course, you can change the numbers to suit your needs.

This technique is very useful when you try to do random numbering or random encryption.

You can easily do a full number password generator just by combining the function 10-15 times (on the amount of numbers you request):

$(document).ready(function(){
 var x = Math.floor(Math.random() * 10);
 var y = Math.floor(Math.random() * 10);
 var z = Math.floor(Math.random() * 10);
 var k = Math.floor(Math.random() * 10);
 var all = String(x) + String(y) + String(z) + String(k);
 $("body").append("<div class='alpha'> </div>");
 $(".alpha").text(all);
});

We did it * 10, so we don’t get a (10) number (2 numbers instead of 1) and we removed the + 1 because we want to have 0′s.

The script above will create a random 4 number password with 4 numbers between 1 to 0. You can add as many numbers as you want.

Stay tuned for more!

This is a short post about how to speed up your website using cutting edge CSS 3.0 techniques. Unfortunately, this isnt very viable for large scale websites (since it doesnt quite work in IE7/8), but for the other 30-60% of your users, a quick speed increase is welcome.

The CSS rules are very simple:

.preload-images {

    background: url(image-01.png) no-repeat -9999px -9999px;

    background: url(image-01.png) no-repeat -9999px -9999px,

            url(image-02.png) no-repeat -9999px -9999px,

            url(image-03.png) no-repeat -9999px -9999px,

            url(image-04.png) no-repeat -9999px -9999px,

            url(image-05.png) no-repeat -9999px -9999px;

    }

Stay Tuned for more tutorials!

Optimizing CSS can be very helpful, but for small websites, it’s highly unimportant. Ten bytes fewer or more really doesn’t really matter these days — they’re insignificant. However, if you are running a shopping cart website with 200,000 lines of code, then having clean CSS code is a huge boon, both to easily make changes and to make it load faster (10 bytes here and 10 bytes there really add up!).

Let’s start with some easy tricks you can do:

1) Making sure to split your CSS between backgrounds / outer layers / navigation / static elements and different mobile elements that aren’t present in more than one page will help a lot. Only one CSS file will always be loaded and cached (the first one) while each page will download its own specific CSS file.

2) Keep everything neatly spaced and commented. This will help you when you have to change one link from blue to red in your giant CSS file.

3) Always keep duplicate properties to a minimum. Do more with less!

4) Combine similar numerical values, for example:

margin: 10px 20px 10px 20px;

becomes 10px 20px;

Stay tuned for more!

This tutorial will illustrate how to create a variable width/height box with a background image and rounded corners via CSS.

The solution is very easy, and the box created can be easily modified and shaped according to different widths and heights required.

First: You need a PSD file or an image with the entire box.

Second: You need to have an HTML file, a CSS file, and the images folder.

Okay, so the HTML structure will look like this:

THE XHTML

The first line is the container of the box.

<pre>
<div>
<div><div><div><div><div><div><div><div>
<div>
&nbsp;
</div></div></div></div></div></div></div></div></div>
</pre>

The second line is a helpful CSS class helper and it shows in the code what that div is doing.

The logic is: top bar, bottom bar, left bar, right bar, bottom-left corner, bottom-right corner, top-left corner , top-right corner. The

is another helpful CSS class –  you can chain your CSS so that you don’t have to have large specificity. The fact is that this technique is based on the specificity of the CSS, as you will see in the following CSS file below.

The PSD will be sliced like this: the corners, and then a section of each of the 4 bars, the heights must be identical of the bars, ie. the top-left corner, the top-bar, the top-right corner all of them must be of equal height, and ie. the top-left corner, the left bar, bottom-left corner (for these the width must be identical).

The CSS:

 .roundedBorder {
 /* heights width are set here like */

 width: 300px; height: 300px; /* or */ width: 150px; height: 500px;

 /*  or something you want, and if the lines are simple and have a simple background,
 the background-color of the INNER BOX must be set HERE, like */ 

background-color:  #f2f2f2;}

To tell others who may work on the code after you, you can put a small comment at the top like this:

/* border logic
t
t b
t b l
t b l r
t b l r blc
t b l r blc brc
t b l r blc brc tlc
t b l r blc brc tlc trc
*

.roundedBorder .border {  background-image: url("./images/topBar.png");
 background-repeat: repeat-x; background-position: top center;}
.roundedBorder .border div { background-image: url("./images/bottomBar.png");
 background-repeat: repeat-x; background-position: bottom center;}>
.roundedBorder .border div div { background-image: url("./images/leftBar.png");
 background-repeat: repeat-y; background-position: left center;}
.roundedBorder .border div div div { background-image: url("./images/rightBar.png");
background-repeat: repeat-y; background-position: right center;}
.roundedBorder .border div div div div { background-image: url("./images/bottomLeftCorner.png");
 background-repeat: no-repeat; background-position:  left bottom;}
.roundedBorder .border div div div div div { background-image: url("./images/bottomRightCorner.png");
 background-repeat: no-repeat; background-position: right bottom;}
.roundedBorder .border div div div div div div { background-image: url("./images/topLeftCorner.png");
 background-repeat: no-repeat; background-position: left top;}
.roundedBorder .border div div div div div div div { background-image: url("./images/topRightCorner.png");
background-repeat: no-repeat; background-position: right top;}
.roundedBorder .border div div div div div div div div { background-image: none;}
/* THIS IS VERY IMPORTANT, MAKES SURE NO IMAGES WILL SHOW TO INNER DIVS */

This technique can be used both on large scale and on small scale, however it’s best not to exaggerate a lot as the number of divs gets exponentially larger.

The 2nd way to make rounded corners is by using the jQuery framework and the jQuery Corner Plug-in. The explanations on its website will be sufficient enough to get you started, but if you require more info post a comment and I’ll see what I can do.

Best Regards.

First off, a CSS framework is a very compact, complex, and relatively useful base on which you can style your own elements independently. It offers basic layout classes, basic width classes, basic height classes and a standardized way to write your CSS. This is all nice and great – on paper – however, in real life and real life development it only works if you have a very specific goal you want to achieve.

CSS frameworks work very well when it comes to building a huge website that is PHP/ASP.NET based and which has a very standardized layout, ie. most elements on the page are placed into modules and each module is presented after a strict grid like this:

<div class="module">
 <div class="mod-header">

 </div>
 <div class="mod-content clearfix">
  <div class="list-item">

  </div>
  <div class="side-item">

  </div>
 </div>
</div>

If you have a website that has a lot of different content on all pages, and many different ways you want the content represented, building the website via a framework is impossible.  But let’s say you wish to build an administrative panel for a software — then, since everything is modulated and everything almost looks the same because each module is a function of that CMS system (much like in wordpress admin panel ), actually making the entire CSS based on a framework is actually a smart decision that will cut your development costs significantly.

Also, having a framework is very good when it comes to getting people to work on your code; since I highly doubt that the developers who build the website will remain with the same company for the next 5-10 years, having a standard on which everything is built can help the newcomers get up to speed quickly and without too many hassles.

PRO

• Highly easy to build from the ground up
• Fits like a glove when you try to build an admin-panel or anything modular
• Helps newcomers get up to speed quickly
• Lowers development costs

CON

• Highly unsuited for building a regular dynamic website
• Very complicated to learn from the start if you have zero previous knowledge
• Lots of files to manage

So, CSS frameworks have their usefulness but it’s not the “end of everything” as they are preached by various CSS coders.

Regarding CSS frameworks suggestions, I highly suggest jQueryUI framework which comes bundled with image-icons, CSS code, and jQuery functionality all in one, so you can grab that @ http://jQueryUI.com

That’s all for this week.

Conditional Comments are a proprietary function created by Microsoft for Internet Explorer browsers, so developers can tag XHTML/HTML code specially for an Internet Explorer browser. In other words, everything inside a Conditional Comment will be skipped by all browsers except IE if the Conditional Comment follows certain conditions.

These conditions are:  lte (lower than or equal to), lt (lower than), gt (greater than), gte ( greater than or equal to)

<!--[IF lte IE 6]> Only stuff that will be read by browsers
 lower than Internet Explorer 6 or by Internet Explorer 6. Internet Explorer 7
 and above will not read this code <![endif]-->

<!--[IF lt IE 6]> Only browsers lowers than IE6 will
read this paragraph <![endif]-->

<!--[IF gt IE 6]> Only browsers higher than IE6 will read
this paragraph, such as IE7/IE8 and above. <![endif]-->

<!--[IF gte IE 6]> Only browsers higher than IE6 or
IE6 will read this paragraph <![endif]-->

And an extremely nice thing you can do is that when you wish to eliminate a browser from your website, as in you do not wish to serve CSS and JS files for it, you can do this easily using XHTML code; you don’t need to do server side verification or js verification.

<!--[IF IE]>-->
THIS PARAGRAPH WILL NOT BE READ BY ANY IE version
<!--<![endif]-->

<!--[IF gte IE 7]>
ONLY IE7+ will read this following paragraph
<![endif]-->

Effectively you have removed your server from serving CSS/JS to IE6 browsers. This is done because IE6 is a very old browser and modern web applications may not work on IE6…  and if they’re dumbed down for IE6, the application may lack lots of features. You can also use this technique to send any sort of CSS, such as a basic style or a basic JS, so you provide only the basic features. The possibilities are endless.

Next week we’re going to talk about CSS 3.0 features

Best Regards

Hello, my name is Alexandru Dinulescu (aka Alex D) and I am the XHTML/CSS coder for Lifeline Design. I have been invited to share some of my knowledge on this blog, so without further ado, this is the first lesson: how to insert CSS code into your XHTML pages.

Before I begin, a short explanation on what CSS is and what it does. Basically, there are 3 layers on your website: the first one is the content of the website which includes all the text, links, images, and so on. This is the content layer or the XHTML layer. On this, another layer is added which is the CSS layer – it governs how the site looks, what colors you use, the site’s position (left, center or right), widths and heights. The 3rd layer is the behavioral layer and it involves interactions between the first and the second layers based on user input. This 3rd layer is also known as the javascript layer.

Now involving CSS, this means that we are using the 2nd layer to style the content layer and there are a few ways to do it.

The Old Way

Back in the good ol’ days of the late 90′s the web was a mess, as every page was table-tag based and the CSS was added inline. What does that mean? Well it’s simple, every tag had its CSS added individually instead of using a specialized option, and when you had to modify something, let’s just say that it could take hours or even days for a huge website.

An example looks like this:

<p style="color: #fff; line-height: 30px; font-weight: bold">
Individual Styled Paragraph</p>

Now the downsides of this method as previously stated are huge. Every time you wish to change something you have to go over all the pages and modify every individual element, which can turn a 2 minute job into a full-week job, which is good for us, the coders, but bad for business.

Another old way insert CSS code in XHTML was by using the <style> tag. This tag can either be added in the <head> section or anywhere in the XHTML code.

<style type="text/css">
 /* css code goes here */
</style>

The New Way

After browser support got a bit better, another easier way of inserting CSS came to light: using the <link> tag inside the <head> tag. This means that you had an individual file that coordinated the CSS, and finally the 2 layers of content (XHTML) and presentation (CSS) got separated, thus making life easier whenever it was time to modify some things:

<html>
 <head>
  <link rel="stylesheet" href="./css/file.css" media="screen, handheld" type="text/css" />
 </head>
 <body></body>
</html>

This method proved to be highly adequate and self-sufficient, but some developers thought of an even better way of organizing the CSS files, and they did that using the @inport feature. Basically, instead of having 1 master CSS file that contained EVERYTHING, you had a CSS file for every section of the page (or every page-module if the website was built with a modular approach in mind) and then you had a MASTER CSS that contained only a few lines such as this:

/* Master CSS FILE: */
@import: url("./head.css");
@import: url("./body.css");
@import: url("./footer.css");

/* and now you can just link the master.css file instead of all 3 */
<link rel="stylesheet" type="text/css" href="./css/masterCss.css" type="screen, handheld" />

That’s about it for this week. Catch you all next week when I’ll talk about Conditional Comments, and how can Conditional Comments help you fix problems for Internet Explorer 6 and occasionally Internet Explorer 7 browsers.

Stay Tuned!