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 .innerRoundBorder 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!

We may also throw in some answers to user posted questions, so if you have any CSS queries, please contact us and we may just be able to answer them for you!