CSS

Yes, I know I’m a bit late with this, but I still had to give you the run down.

Originally created by Lokesh Dhakar

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Have you ever gone to a website and seen this nice lil' thing they do when you click on a thumbnail and it pops up a larger image in the same browser window? That’s LightBox. I’ve seen it before and I haven’t given it a lot of thought. I just naturally assumed that it would take too much time to implement, so I left it alone. Oh was I wrong.

I’ve sort of been fighting it for a while now. I must say I’ve been stuck in the past and I apologize for that. I was stuck in the whole “It’s gotta be less that 800 pixels” things. That’s just a basic rule of accessibility, which I’ve carried from years ago. Back them a significant number of Internet surfers still had relatively small monitors and used the 800×600 resolution. Therefore, if you wanted your content accessible to the highest majority of visitors you had to ensure that your site can be viewed relatively well in at least 800 pixels. Although the number of visitors using this resolution was in the minority, it was still not small enough to ignore.

Now comes another problem. Rather a solution that causes a problem. Most people fixed this resolution issue by slapping on a fixed layout. Now fixed layouts have their pros and cons. The pros are, you know exactly how it will look every time. You know where every thing will be on the website. One major con, I experienced at a friend’s house. He had just gotten a brand new 21" flat panel monitor and everything looked so crisp. After a couple hours of playing, Wolfenstein: Enemy Territory we were just browsing the Internet and I just asked him to check out my latest post at the time. When he did I was horrified. My beautiful fixed width 787 pixel layout, which looks just brilliant on my 17" at home, still looked brilliant here, but it was so bloody small. I mean the thing was tiny and scrolling took forever. Yeah, we would have had to scroll a lot on a smaller monitor but since we have this huge one, why should we. There was just so much wasted screen space it annoyed me. You could almost fit a whole other site right next to mine.

Sometimes we forget that CSS is actually code. Usually it is just thrown together as an after thought because we simply one a few styles here and there. However, anyone who has dealt with CSS files over 100 lines long knows that just throwing together tags in a wild maylay is not the way to go. CSS code should be laid out and structure just like any other code we write.

With the advent of CSS we knew that the visual aspect of HTML would be vastly improved. At least that was supposed to be the plan. We've seen it a lot with images and text, but I must say this is the first time that I've seen CSS used with forms in such a way. Smashing Magazine has an excellent list of CSS Based Forms, which give forms a modern new look.

I'm not sure how many of you actually gave thought to creating your own Image Gallery, I know I haven't. If I needed one I'd just use a prepackaged one. But that was because my application always needed an entire gallery. But if you just need to through up some pictures a CSS Image Gallery is the way to go. Why CSS? CSS is light and clean and it’s HTML standard.

Not much more to say than, here's the link. Dan at WebDeveloperNow, has a nice lil' basic CSS run down for beginners. Skip this if you’ve had to hack together some stuff before.

I read this title and I was a bit confused. How, was my first question. Well, they did it. They did it a number of ways. Basically, they use a full background color and use CSS and a little bit of JavaScript to "eat" away at the corners. Very interesting idea. Alessandro Fulciniti writes: This is the original article. The technique has been improved with better browser support and a lot of new features.

Nothing new, just a different spin on it. View the source at byteMyCode. You simply call function CSS (url, media) and that’s it. It fetches the URL of the CSS style sheet; checks to see whether the file has already been loaded. If not it dynamically sticks it into the “link” section in your document head. I’ve seen dynamic CSS elements before, but not an entire CSS file. Are you thinking what I’m thinking?

Dynamic Drive has done us all a huge favor. They have code for different CSS layouts: Fixed, Fluid, Two Column, Three Column and everything in between. Do enjoy. []1