Tutorials in ‘CSS’ Category

How to force the browser to reload CSS and JavaScript files

When editing the CSS and JavaScript of a site, there is a slight chance that the user may get the old versions, which at best will cause a lot of complains and at worst will cost you a lot of lost customers. The reason for this is that browsers cache static content like CSS and JavaScript. However, telling a browser to reload them is not that hard to do. All it takes is a little trick that will force our friendly browsers into thinking that the CSS and JavaScript are dynamic content.

Before we go on, let us take a look at how we specify the CSS and JavaScript to be used within HTML. Normally we have something in the line of:

<link rel="StyleSheet" type="text/css" href="/static/style.css">
<script src="/static/js/script.js" type="text/javascript"></script>

Where style.css and script.js are our files. Naturally CSS files are specified with the href attribute of the link tag, while JavaScript files are included using the script tag. Now, let’s take a look how we can make our browser reload CSS and JavaScript every time:

<link rel="StyleSheet" type="text/css" href="/static/style.css?version=15">
<script src="/static/js/script.js?version=15" type="text/javascript"></script>

“Now what is that “version”?”, you are probably thinking. Well it’s nothing. No really, it does absolutely nothing. You can use ?favouritesite=onlinehowto.net15 if you want. It would have the absolutely same effect.

“But what does it do?”, you are probably thinking. “This looks just like passing GET variables.” Exactly!

The browser cache uses a pretty complicated mechanism, but there is one thing that you should know for sure index.html?version=14 and index.html?version=15 are two different pages for the browsers, therefore it can’t rely on its cache, therefore it must get them again. But what happens on the server side? Well those arguments are ignored by our server and it simply supplies style.css and script.js.

Whatever language, technology, etc. you are using, you always keep a header file which is included pretty much everywhere so changing the version=<number> part after each revision is pretty easy. You can even make it a part of your site’s logic.

In conclusion, this trick may save you a lot of headaches related to cached CSS and JavaScript, and if you believe you may have some issues, we greatly encourage you to use it!

VN:F [1.9.18_1163]
Rating: 10.0/10 (2 votes cast)

CSS3 Cascading Principals #3 External Styles

Rounding out our cascading series is the external style sheet; a method that gets its descriptor because it’s not something that will actually be contained within your HTML document, but rather a separate file with the .CSS extension.
There are a couple of reasons you might want to break out your CSS file from your HTML document. For one, it allows you to select multiple style sheets, from which you can pick and choose styles from within your markup; and allows you to create multiple styles that are even further segmented. But perhaps the biggest windfall is that you can apply those style sheets across multiple pages, saving you the effort of having to re-create them in each of your HTML documents. Not only is this a tremendous time saver, but it also cuts down on potential mistakes that might be made across a large project.
Externals style documents also have the least clout in our CSS order-of-importance hierarchy, so if an in-line style or head style addresses an element, they will take precedence.

Link syntax.
<link rel=”stylesheet” type=”text/css” href=”style.css” />

Before your HTML document can begin pulling styles, however, you’re going to need to tell it where those styles are located. By linking your style sheets, the document knows to treat it as an extension of itself, and when then apply those styles just as if they appeared in the head of the document. Which is why, when we insert a <link> element, we place it in the head of our document. It works as kind of a placeholder for “styles yet to be determined”.
If you have multiple style sheets, you just repeat the process for each .CSS file that you’d like to call. You only need to include .CSS files that you are using for that particular document, and it’s important to make sure that there are no conflicts. If you have different style definitions that are attempting to alter the same element, the last style sheet you link to will be applied.
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support… Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

Learn the Basics of Floating in CSS

The float declaration is used to put elements beside one another such as several div’s. A common technique is for, say a blog, you have your content, and you have your sidebar on the right. Each one of those is their own container or div. To make them line up against each other rather than having the content on the top and the sidebar below it we need to float these div’s. Let’s start out by setting up the divs, with some dummy content we may see in a traditional blog.

So what this html is saying is that we have a container (the div “wrapper”) which has two divs inside of that. A left content div and a right content div. The left content has some dummy content and the right has an unordered list with some links. Lastly we have a div with a clear class, this will stop any elements from popping up next to floated elements Let’s modify this with some CSS.

We give our wrapper a width and center it. Next we set the width of our .leftcontent div and give it a little padding. Next we float that div to the left. This means that it will tell all other divs to ignore any undefined space around it. So since the width of .leftcontent is only 770px (compensate for padding) the .rightcontent div will pop up and line up horizontally with .leftcontent because it’s width is 210px which is less than the wrappers width which they are both contained in. Lastly we must clear the float so that no other elements try to pop up next to the divs that we want to float. The clear class is fairly straightforward, it is clearing the float so that nothing else “floats” up on the page. For this example I cleared left, you could also use the both value which would make your clear class more universal but is not needed for this example. Once you have done this your page should look similar to this.

Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

CSS3 Fundamentals #2 Background Images

Inserting a background image into your HTML document using CSS.

Background images have a rather storied history when it comes to the World Wide Web. Just like furry wallpaper and wood paneling, there’s no accounting for taste; and almost immediately after the release of Mosaic in 1995 those cursed with just a smidgen of creativity starting cladding their works with a cursed combination of teddy bears and tiled stars. After a while, the web started looking your great aunt’s Thanksgiving sweater, for better or… No. Just worse.\r\n \r\nDespite the historic stigma, background images can (and are) quite often used as an effective component in great web design, and is an essential part of CSS. You can use background images on a page level, or within individual page elements that you have created. The image will assume the total size of your element; or if smaller than the element itself, be tiled starting at the top-left corner.\r\n \r\n#background-image Syntax Formatting


All that’s required to insert a background image is specifying the location of the image. Most common image formats are supported, and as always, it’s a good idea to keep your image locations relational to your HTML document.

We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

#background-image Example

Now we’ll create a simple page utilizing a tiled background image with a sample image included in the project source. Create a new HTML5 document, and enter the following CSS definition within the header:

Background image style.

body { background-image:url(”background.gif”);}

Because our image is substantially smaller than our page, it will render in-browser tiled. Keep in mind, not all images will tile in an aesthetically pleasing manner, so make sure your image is so suited. Our example as provided here is applying the style to the entire body of the document, so all other page elements and divisions will inherit this background unless otherwise specified.

Now let’s add a <div> so that we may employ another background image, and see what our page looks like with some content: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

Creating A 3 Columns Fixed CSS Layout

In this tutorial we will use the Flexi CSS Layouts Dreamweaver extension to create a simple 3 columns CSS layout with a fixed width. Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

Why CSS is better than tables

Is CSS a viable option for a web designer that only does small sites, or using tables just fits the bill?I remember back in circa 2003 I’ve did my first site using Dreamweaver. Being a marketing guy I was perfectly happy with learning how to do tables. Doing even a 3 columns CSS site looked gibberish to me. Sounds familiar? Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

Creating a round corner css website layout

We all want to build clean CSS web pages, right? But what we could do more than just that and make it have rounded corners, flashy unlimited levels menu and a flash dynamic news feed on the right panel? Something like this web 2.0 template with nice round CSS corners and a right panel with a flash dynamic news feed. Here is my layout: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.9/10 (11 votes cast)

Center DIV Vertically

Until recently there was no convenient way of vertically centering on height boxes with open return. When working with tables is really easy to use valign = "middle", but unfortunately in CSS this is not possible.
Here I will present some methods for vertical centering DIV.

Defining the problem.
1. We have a field (eg. div) of known height
2. We inserted in the subject (usually a long text inserted in the div) who do not know the height (for example, its content is generated by database)
3. I want to object centered vertically
4. without using tables

Main in this solution in IE: internal object is positioned in the middle of the envelope field. Then moves up to half of its height. Used the wrong interpretation of the height in IE (). Inserted an extra div is needed for IE.
The decision to support better standards browsers (Mozilla, Opera, Safari, etc.) is quite different. The whole area is presented as a table (display: table; part of CSS). The internal object is presented as a table cell (display: table-cell). Here comes the trick – it is possible to use vertical-align for table-cell elements (IE ignores these properties or does not know their values).

Combine the two solutions for both the browser. Property beginning with an underscore can be seen from all versions of IE except IE7, property starting with # seen by IE7. Thus, writing feature remains hidden from other browsers.

In the code below works in IE5.0, 5.5 and 6.0, the Gecko-based browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe less version too), and Safari. The page can not be validated as a standard HTML / XHTML. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.2/10 (10 votes cast)

Center DIV Horizontally

Horizontal centering the div can be quite annoying problem for CSS beginners and not only for novice programmers. Actually it is quite simply understand it. Suppose you have the following code: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.8/10 (11 votes cast)

100% DIV height with CSS

The latter standards do not allow the use of height 100% (height: 100%), leading to major headaches in the realization of many of the designs. Of course designers prefer to use the entire field of view, even if there is not enough content to fill it and this led to major headaches for developers. Options for implementation are two, one is to use javascript, and other using height: 100% although it is not allowed. Of course, both options have several drawbacks. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 1.8/10 (12 votes cast)