Posts Tagged ‘Code’

Position: Absolute; (Centered)

It’s pretty easy to center a relatively positioned div:

#div { position: relative; margin: 0 auto; }

However, sometimes centering a div that has an absolute position can be a little tricky. Here’s a workaround that I’ve been using that seems to get the job done. Say you have a logo that you want to center in your header and it has a position that is absolute, sort of like the following example:

<div id="body">
<div id="header">
<div id="logo"> logo </div>
</div>
<div id="maincontent"> main content</div>
<div id="footer"> footer </div>
</div>

Basically, what you can do is give the div #logo a value of left: 50%. The first thing you’ll notice is that the div doesn’t appear to be perfectly centered. Well, that’s because it’s not. It’s simply starting at the halfway point in your screen. To center the div you’ll need to make sure there is a clarified width. Then, take the width and divide it by 2 (round to even number). The result of half your width is what you will set your margin-left to in a negative value. Here’s a quick example:

#logo { position: absolute; width: 108px; left: 50%; margin-left: -54px; }

And that should just about do it. If you have an alternate, or better way of accomplishing absolute centered, leave a comment!

Continue Reading No Comments

Validated by the Validator

W3CI remember when I first started making websites, I lived by the Validator. It was code up a site, check the validator, make adjustments, check the validator; Validate, Validate, Validate! It more or less became this goal to slap a W3C logo on the footer of every site I made.

To my dismay, I learned that just about every client has no idea what W3C validation means, nor do they really care as long as their site looks good in all major browsers. I’ve done a bit of reading on this topic over the last year as well as my fair share of podcasting (listening) and  I’ve sort of come to grips with the fact that the little W3C badge really isn’t as cool as I thought it was.

Truth is, not everything has to validate. Some of the newest/groundbreaking coding methods often don’t. The validator isn’t going to guarantee that a site will look the same on all browsers, it’s just letting you know of any syntax errors that may be present.

Don’t NOT use the Validator

Now, I’m definitely not saying that one should avoid using a site validator.Validation helps with cross-browser/future compatibility, enhances search engine visibility, shows signs of professionalism, as well as a level of web standards that we can all follow. It’s just important to keep things in perspective. I liked what Jeffrey Zeldman stated in an episode of Shop Talk Show:

Site validation shouldn’t be looked at as a badge, but rather as an available tool.

We should use the validator as a tool to help create clean code and troubleshoot issue areas, but don’t live or die by it. If a site is proper, modern code, or  a snippet that acts as a nice workaround but doesn’t validate, so what? As long as the webpage looks great in all major browsers, is clean and doesn’t reflect usability issues, validation shouldn’t been seen as critical.

Continue Reading No Comments