August 22nd, 2007 Luke
I’ve been building the template for a new project lately, and it will have Adsense built into the sidebar for users who aren’t logged in. However, having the Adsense box aligned to the left side of the sidebar just looked…ugly. I wanted the Adsense box centered within the sidebar.
After googling, I was told to use absolute positioning to align my Adsense box. The only problem is, I couldn’t seem to actually center the box using absolute positioning.
Then I tried floating the box. That didn’t work either; how do you float something and center it?
Then I stumbled upon the ever-so-handy text-align attribute. I put my Adsense code inside a div:
<div id='ads'>
<!-- Adsense Code Here -->
</div>
And then put this inside my CSS:
div#ads {text-align:center}
And…voila! A centered google adsense box, with minimal extra markup.
Posted in adsense, css, design, monetizing | No Comments »
November 11th, 2006 Luke
A little while ago, I was working on Parakeet and I had a problem: I wanted to highlight a <tr> element when there was an error, by applying a unique background-color and border to it. However…you can’t apply a border to a <tr> element. That’s because a <tr> isn’t technically rendered, per se, so much as used by the browser to denote where a row starts and where a row stops.
This was a problem, that I was determined to solve. It took a custom class for the <tr> element, and some a few descendent selectors to get working, but it did. Here’s the breakdown:
.errorRow td {
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: green;
}
This piece of code makes it so that EVERY <td> inside anything with the class of ‘errorRow’ has these style rules applied to it. This allows us to set a default view for every cell within the table.
.errorRow td.outerLeft {
border: 1px solid black;
border-right: none;
}
.errorRow td.outerRight {
border: 1px solid black;
border-left: none;
}
This code makes it so that the two cells marked ‘outerRight’ and ‘outerLeft’ within our ‘errorRow’ element will override some of their default attributes, and set up their own border rules. The ‘outerRight’ class is applied to the cell that is on the right side of the <tr>, and the ‘outerLeft’ class is applied to the cell that is on the left side of the <tr>.
After setting all of this up, we can easily apply a border to the entire <tr> simple by setting its class to ‘errorRow’, or in some cases adding the class of ‘errorRow’ to it.
Here’s the code, all summed up:
.errorRow td {
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: green;
}
.errorRow td.outerLeft {
border: 1px solid black;
border-right: none;
}
.errorRow td.outerRight {
border: 1px solid black;
border-left: none;
}
Posted in Code, css, hack | No Comments »