Andre writes:how do you center images inside a div with css?Andre, here's one way. If your html looks like this:<div> <img src="elephant_ball.jpg" alt="" /></div>Apply display:block; to the image, and also make sure it's left and right margins are set to "auto", like so:<style type="text/css">div img { display:block; margin:auto;}</style>That should do it. View the example.I hope you didn't mean "vertical" centering......because right now, there's no elegant and easy way to do it that's acceptable to all browsers. Below are some possible options to look into - pick your poison.Applied CSS Vertical-AlignVertical Centering with a Floated Shim

Bill writes:One thing I am not certain how to do, or if it is even possible is to define some sort of pseudo-variable that can be used in the CSS definitions. For example, I am working on a page that the owners want a specific color scheme used throughout the site. Each page has five colors (they all share the same set of colors). CSS has made my life sooo much easier to make changes they want (they are making several changes a day trying to "fine tune" the exact shades they want.Anyway, it would be nice if I could do something like this: #Red1 { color: #400000 }#Cream1 { color: #F0E68C }#Cream2 { color: #FAFAD2 }#Blue1 { color: #00008B}and then further in the CSS file uses these names...

Update (5/14/2007): If you like this post, you might also appreciate validation hints.Update (4/20/2007): Vox.com, the site whose registration form this article is based on, has changed that form, and it no longer uses the effect.Update (4/3/2007): Fixed IE6 bug - see below.Update (4/3/2007): textarea example providedMy co-workers pointed out a nice effect on the Vox registration form. As you tab through each input field, some helper text appears in box out to the right. Try it out. Update (4/20/2007): It has been pointed out that Vox has changed their form, and it no longer uses this effect.It's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of t...

I and many others were excited by reading DOM Scripting by Jeremy Keith. That book can take a CSS designer with no prior JavaScript experience, and equip that reader with some easy but powerful dom-manipulating know-how, all the while reinforcing the standardista's mantra of separation of structure, presentation, and behavior. A JavaScript beginner who reads this book can feel empowered. I read it twice, the second time with a highlighter, both times in my bed late at night with flashlight and a wife that wished I would just go to sleep and save my geekiness for the daylight hours. It was like reading a page-turning Grisham novel, except instead of a lawyer running from the mob, it wa...

Alan asks:What software do you use for CSS editing?I use BBEdit. When I was on a PC, I used Homesite. At the root of it, I just need some color coding and line numbers to keep me sane, but the extra features of BBEdit, like the grep search, can come in handy.I use those not just for CSS, but for HTML as well. I have found that it fits my work flow best.I remember when Dreamweaver started supported CSS in preview mode, and quickly requested that my employer purchase it. After a few weeks, I realized that it wasn't getting the job done. I like to see how my changes affect different browsers, and Dreamweaver's preview pane can't do that. Plus, I find it's just as easy to switch from te...

I work for Hilton Hotels, which operates Homewood Suites. Homewood Suites has just rolled out a way to choose your hotel room (or in this case, "suite") by selecting the room on a diagram of a floorplan. It's driven by CSS and JavaScript, and this post will explain how the interface works.The DemoYou can interact with the demo, which includes one floor and some sample rooms. You can choose and switch rooms using either the left side, which shows the traditional radio input choice list, or the right side, by selecting an available room on the map and clicking the "Switch to this suite now" link in the popup.You may also download the demo in zip format, which includes all html, CSS, image...

I was looking over the shoulder of another designer who wanted a box with a headline and copy, and wanted the entire thing to be clickable. Here are some thoughts on marking this up.As a brief aside, I started looking for this effect on other web sites so I can see how others mark it up, but wouldn't you know it, I couldn't find any examples. (Never there when you need them...) If you know of any, leave a comment with a link so we can peak under the hood. I'm confident there is a better way, or at least some solid alternatives out there, to achieve this effect - let me know what they are.The IdeaA box contains a headline and some copy, and we want the entire box to act as a link to an...

Brett writes:I am trying to implement your row over selection technique but have found that clicking the actually checkbox does not work. It would be great if this could work. Clicking the row works and checks the box but if it is checked and you click the checkbox, it doesn't work. Did you ever fix this?Brett, prompted by your letter, yes, now I have.Brett is referring to this post, and specifically, this particular example.I had my function set up so that if any part of the row was clicked, the checkbox would check. When I clicked the actual checkbox, it would show a checkmark, but since the checkbox is a part of that row, my function would run, too, which would then think it's time...

Shawn writes:This problem probably doesn't come up very often, but I was wondering if you knew of a collection of 'disabled text box' styles.I'm going to assume you mean input fields of type="text", as opposed to textareas. I never think about disabled text inputs as I rarely use them. For those who want clarification, a disabled text input usually has a grayed-out look, and the value is not able to be modified by user input. It's has the disabled attribute, like so:<input type="text" value="you cant edit this" disabled="disabled" />And here's an image of what it would look like, right under a enabled text input for comparison, as rendered in Firefox:As for styling it...You ca...

Stijn writes:Now I ran into a site a while ago that had a basic form with a gray border, if I would enter a correct contents the outline would be green, if I would enter something like: fake@fakemail as the contact mail address the outline would be red. I really like this effect but can't seem to find a tutorial on it. Maybe you have a good solution?I'm not sure if we can check if the email address is a real email address on the fly, but I think I get what you're asking.As someone is typing an in an input field, it would be nice give feedback to the user as they are typing if they have satisfied that field's validation criteria. This article will explain one way of achieving this effect ...

JD and I are hosting a little markup contest. It's the kind of contest I'd want to enter - take a psd and slice it up into HTML + CSS. If that's what you like, too, consider entering.

So here it is:*:first-child+html {}But conditional comments are still better.

Folks, this post has nothing to do with CSS.My scripting skills are still in the beginner stage. The only JavaScript library I've been using is EJ - Essential JavaScript, which is very small, very readable for a newbie like me, and easy to work with for the very basic DOM manipulation I've worked on in projects. It even uses $('someID') as a document.getElementById replacement so I can use the dollar signs like the big boy libraries.But when a project demands some special effects (like moo.fx or scriptaculous), I thought I could just pull in my favorite library and slide, grow, shrink, whatever, without any hiccups. Not so. I found jquery, and tried to plug it in and use alongside my e...

Karen writesI am working on developing a reporting form for a mobile device as a part of NASA's Constellation project and I'm trying to figure out how to do entirely CSS tooltip pop-ups onclick instead of a hover effect, without use of Javascript DOM since it is not supported in IE Mobile 5. I've been trying to figure out ways but so far haven't found a good method. Do you have any ideas? Yes, I have ideas, but I have no way of testing this in IE Mobile 5.We could start with a basic CSS hover tooltip example. My first thought is to tweak it to work with :focus instead of :hover.Here's a simplified :hover example.If we just swap out :hover with :focus, we get a method that works in Firefo...

Update Aug 29, 2007: Examples 9 and 10, and the downloadable zip now accommodate for JavaScript-disabled browsers.Update Aug 28, 2007: links to examples fixed. Again.I like Crazy Egg's pricing table on their Pricing & Signup page. When you click on "Sign Up" for an option, that plan's column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.If you just clicked over to look at Crazy Egg's site, then clicked back, consider visiting there again when you're fini...