Archive for the ‘CSS’ Category
Easy Equal Columns with CSS
Thursday, August 7th, 2008In a previous article I described (in principle) a method using JavaScript to get equal columns in a two-column layout. Of course, that’s not always the most elegant solution. Another solution, which is much easier to implement is completely CSS based. I’ll describe briefly how this is done and what possible effects it could have on your site’s layout and code. Here is the demo page, if you want to jump ahead.
The Key — The columns are not *really* equal
The only way to do this without using a very complex CSS layout is to essentially create the illusion that you have equal columns. But don’t worry — although the result is not really equal columns, it looks and acts exactly as an equal column layout would.
How to mimic the columns
To describe the method, I’ll just use a simple example: Two DIVs side by side representing the two columns; and one DIV containing the two. From there, it’s quite simple — just wrap your containing DIV with another DIV then apply ”overflow: hidden” on that outer DIV to ensure it doesn’t collapse in Firefox. Then, add a background image that repeats on the Y-axis (vertically). So, if you have a drop shadowed border, or even a simple 1 pixel border, you would create the image in your image editing program (Photoshop, Illustrator, etc.) and then just adjust the background-position of the image in your CSS to place it exactly where you want it. Since this DIV is essentially behind your two columns, holding both of them, you cannot have a background color on your columns, as it would block the image from showing up.
Keep in mind
You might think this could be done with a one pixel-border on one of the columns, but remember, one of the columns is not going to extend to the bottom, so the border method won’t work without some serious CSS hacks and workarounds. You’re creating the illusion that the short column is extending to the bottom by positioning the background image in a place where it mimics the short column’s border. Except, unlike the short column, your outer container (the container holding the container, if you will) is always going to extend to the bottom, thus creating the illusion of a two column layout where the columns are always equal, regardless of content. And best of all, either of the two columns could extend larger than the other, and the illusion would still work.
Overall, a very easy solution with limited drawbacks
This really is an easy to implement solution that can work on many CSS layouts, and doesn’t have too many drawbacks, other than adding some non-semantic code to your markup and (somewhat) complicating your DIV structure.
So if you’re in need of a hack-free quick fix to a two-column layout, this is a good solution and will work in virtually every browser and platform.
View the demo page, to see this simple, yet effective, solution in action.
Tips for Better CSS Files
Thursday, July 3rd, 2008While working on medium to fairly large websites, I’ve recently found it helpful to apply certain coding practices in my CSS files to help readability, and to ensure that any future developers (including me) will have little difficulty editing the CSS code. Since my main CSS files nowadays often end up being anywhere from 1000 to 2000 lines long, here are some quick tips that I think help CSS code to be more readable and web developer-friendly:
1. Indent CSS using the same structure as the HTML
I don’t know why this isn’t more prevalent (at least it’s not written about a lot online), but I recently started doing this after viewing an online video from a fairly popular CSS developer and blogger. Having the Web Developer Tool Bar in Firefox helps track down CSS fairly quickly, I find the indenting actually assists the development of the site itself. It’s much easier to read the CSS and see what the code is doing, even as you type. Especially is this important if the project spans many weeks or months, as the structure of the HTML and how it relates to the CSS styles can easily go forgotten. So, indent your CSS in a hierarchical manner so you can easily match a nested section of HTML to its CSS counterpart.
2. Use lots of spacing and comments
The comments are generally a no-brainer. All good code is commented. But the spacing is simply for readability. I know, the more white space you have, the more bandwidth it’ll cost you, but you can always remove the white space towards the end of the project, if necessary. And spacing should not just include that which occurs as entire lines between ID and Class groupings — I personally like to see white space in between all the selectors and colons as well as between grouped styles that are organized all on one line (as opposed to one on each line within the group, as seems to be most common). So do this:
#example_section {
float: left;
width: 300px;
height: 400px;
background: url(../images/example_image.jpg) no-repeat 0 0;
}.example_section_2 {
color: #fff;
line-height: 14px;
}
Not this:
#example_section{
float:left;
width:300px;
height:400px;
background:url(../images/example_image.jpg) no-repeat 0 0;
}
.example_section_2{
color:#fff;
l ine-height: 14px;
}
The difference is subtle in this short example, but the first example is much easier to read when applied to a 1000+ line CSS file.
3. Always use external files to hold your CSS code
This is a basic tip, and all good developers should do this. If your main CSS file applies to dozens, or even hundreds, of content pages, then your pages will load faster with an external file because all subsequent page loads will get the CSS code from your browser’s cache. Thus the CSS will only load once, saving bandwidth and improving user wait times. And of course, the other benefit is that the CSS stays separate from the HTML, the same way the JavaScript should, keeping the 3 layers of front end web development clean and separate.
4. Keep default styles and link styles near the top
For me, this one is a bit of a personal preference. I like to know that all my default styles (CSS reset code, heading styles, unordered list styles, hyperlink styles) are easily accesible near the top of the CSS document. After all, those styles are not always part of the HTML hierarchy, and often won’t fit well with the DIVs, custom paragraph tags and the like. So when I do a high-speed scroll through my CSS code, I know that when I get to a certain section near the top (in my case the section that styles all hyper links on the page), then I know that all my default styles have ended and the hierarchical section begins. And with some effective commenting, the rest of the document can be just as easy to scroll through and find a particular section.
5. Use shorthand notation
This will improve your CSS code immensely, as well as save a few kilobytes in bandwidth. Basically it means putting related CSS styles on one line instead of declaring them all using separate selectors. So for example, here is a long-winded example of applying a background image to a DIV tag:
#my_example {
background-image: url(../example_image.jpg);
background-image: background-color: transparent;
background-image: background-repeat: no-repeat;
background-image: background-position: 0 0;
}
And here is the better shorthand version of the above code:
#my_example {
background-image: url(../example_image.jpg) transparent no-repeat 0 0;
}
Much easier to read, easier to maintain, and the order of the values doesn’t matter, so you can make the reference to the JPEG image the last value if you prefer.
Benefits while you develop as well as in the future
The benefits reaped from these tips will not only help developers working on the site in the future, but will help you during the process of developing the site. Often, client requests and other project details interrupt the workflow. That can put a damper on your mental ability to stay focused on how you’ve organized your code. To ensure that your code doesn’t become an unintelligible mess, keep things neat and organized and you’ll see the benefits now as well as in the future.
Equal Column Height using JavaScript
Thursday, May 29th, 2008I’m currently working on a project that requires that I use either some very tricky CSS or else JavaScript to make a left column div expand automatically to fit its parent container. The parent container and left hand nav appear on multiple pages, and there is different content, including that which is dynamically generated, so I cannot just add a height to both elements in the CSS.
CSS Solutions available
I looked over some CSS possibilities for this, but since I was already quite far along in the development, I thought it would be best to use JavaScript to accomplish this task. This problem should be quite simple to solve, but because of current CSS limitations, it’s a little tricky, and in fact, would be easier with a table-based layout.
Enter Javascript – with caution
The first thing a developer should consider before using JavaScript to solve a problem is whether or not the page will degrade gracefully. That is, if JavaScript is not available on the client side, will the site or page be unusable? In this case, the answer was no. The page would be perfectly usable, just not as aesthetically pleasing. And in this particular design, some users may not even notice that something is missing (namely, the bottom of a light-colored gradient background image that needs to fill the column in question).
A simple calculation through the DOM
As mentioned, I need my navigation column on the left side of the page to stretch to fit its parent container. Here is the code I’m using:
var myContainerDivHeight = myContainerDiv.offsetHeight + “px”;
var myLeftNavDiv = document.getElementById(”leftNavDiv”);
myLeftNavDiv.style.height = myContainerDivHeight;
Here’s a rundown of the code (which obviously is stripped of its event handlers and any code that needs to trigger it like a function call): On line 1, I’m putting the container DIV into a variable via the DOM getElementById method. I then use the non-standard, but cross-browser friendly, offsetHeight property to get the height of the container. That’s done on line two, which sets another variable with the value of the height of that element, and appending ”px”, to prepare it for insertion as a CSS height value. For example, if my container is 400px high, then the variable myContainerDivHeight would equal the string “400px”. It’s important to note that this value is a string and not a number that we can manipulate mathematically, due to the trailing “px”. And finally, line 3 is almost identical to line 1, only this time I’m putting the left hand div into a variable to set it up for the “400px” value that I’ve already obtained. Thus, on line 4 (I hope you’re still with me!) I set the style.height property of the left hand div to be equal to the height of the child.
Further development on this technique
This solution assumes that the left hand DIV (whose size we are adjusting) will start at the top of the parent container (whose size we are obtaining). There could be a situation where the left hand div appears below an image, or below another DIV. In this case, your code would have to take this into consideration, and you could easily subtract the height of that DIV or image from the total height, to ensure that your left hand DIV doesn’t extend too long.
Use it the right way!
I hope my readers find this code useful. I think a CSS solution to this problem would be nice, but from the research I’ve done, it does not seem that there is an easy one. In virtually every CSS solution there will be nonsemantic markup included, so I really feel that a JavaScript solution is cleaner, and much easier, provided it’s done unobtrusively.
Do You Comment Your DIVs?
Sunday, May 25th, 2008
A little background
Since I started working for my current employer, I’ve built a number of sites from scratch using CSS layouts. I’ve also had to work on older web sites built using older HTML methods. The good thing is, many of these sites have CSS-based layouts. The annoying part is that some of them suffer from divitis (i.e. too many nested <DIV> tags, in the same style as table layouts). In my view, if developers are going to use this style of layout, then they might as well use tables.
The problem is…
But getting to the purpose of this post – what I find tedious at times is when I need to wade through dozens of nested DIV tags, and there are no comments to guide me along. I might have to delete or alter one particular DIV. Or I might even have to add another DIV to the already existing mess, as it may not be in the budget to rework the whole section. But I can’t tell just from glancing at the code which DIV is the one I need to edit.
Dreamweaver offers some help
Fortunately, there’s a simple feature in Dreamweaver that allows you to right-click on any opening tag and choose “edit tag”. This highlights the entire tag, including closing tag, so you can see where it ends. But that method is not always easy, since the opening and closing tags may be in different files (because of server-side includes), and the closing tag may even be well off the screen, and so the whole section is not completely visible. Thus, you still have to do a little poking around just to ensure you’re deleting/editing the correct tag.
My recommended solution
My solution to this problem is to put a comment at the end of every single DIV in my HTML. Here is an example:
I know, it adds to the file size, and it can be pointless at times (for example when the closing DIV tag is on the next line with nothing nested). But commenting ensures that anyone who needs to look at the code will be able to read it easily, and most importantly, be able to discern almost immediately which section of code he will have to edit.
I think this is a good, clean, and universal solution to many code reading issues, and I find that it should be considered a “best practice” — especially in complex CSS layouts.
One caution about using this method: Including multiple comments in a CSS layout can trigger the IE6 ghost text bug. But the simple solution is to put the comment just inside the closing div tag. It’s not as clean looking, but it’s an acceptable workaround.