Advanced CSS: Adjacent Sibling Selectors
In my web articles thus far, when I’ve talked about CSS it’s been in terms of the basics: the box model, relative positioning, page flow, etc. In the Advanced CSS articles, I’ll be talking about aspects the you wouldn’t normally find on every page. This isn’t necessarily new stuff from CSS3, just things that you wouldn’t normally need to know to do CSS design, but can come in handy sometimes. Generally with CSS, we select an element based on its class or ID and on its ancestors. However, sometimes we need...
read moreKeyword Stuffing
Earlier today, I was working on an article for another site and needed some anecdotal statistics, which I obtained by taking a look at the computer services section on craigslist. I noticed that a lot of the website designers and so-called SEO experts advertising there are still trying to get away with keyword stuffing. Keyword stuffing is a spam method that was employed in the 90s and the first half of the past decade; unethical web designers would fill their keyword meta tags with a huge number of unrelated keywords in an attempt to get...
read moreCross-Browser Compatibility
One thing that causes a lot of headaches for web developers is getting sites to look good in every browser. Notice that I did not say, getting a site to look the same in every browser. While it’s possible to get a site to look more or less the same, there are always going to be minor differences and it’s generally more trouble than it’s worth. As long as the site looks good and has consistent branding, there’s no reason that it needs to look identical on every computer. Once you realize that, web design becomes much...
read morePagerank, Relevance, and the SERPs
We’ve previously talked about why pagerank doesn’t matter, but a number of people still attach a great deal of importance to it. It’s easy to see their point: plug pretty much any search term with any competition into Google, and the top results are likely to be mostly high-PR sites. What many people don’t realize is that the high PR is a symptom of what’s making the page rank well, not a cause. What does that mean? Well, suppose I have a website talking about topic X. This is a really good site, so I get a lot of...
read moreGearing Up for 2011
GEARING UP FOR 2011 One Ear Productions is currently lining up for a record year in 2011. Since we first become a company in 2007, we have been growing slowly. We have had such a great year with 2010 in maintaining great working relationships with existing clients, our continued charity contributions and signing up new clients. We strive to bring only the best quality to YOU, our clients, at an affordable rate. GROWING/ EXPANDING 2010 saw One Ear Productions add another staff member, William Springer. Now we are a wife/husband run...
read more*SPECIAL OFFER*
One Ear Productions is giving in INSTANT 50% off their Service of your choice – Need a site? Need marketing Materials (brochures, cards, postcards, etc)? Better hurry and contact them soon as this deal ends on November the 5th! Request us to design your marketing needs (site, print) by November 5th for this special offer! As always when you refer a family/friend to us, you will always get a slight discount off your next project. Contact us (only one service is discounted for this special...
read morePage Flow, Inline and Block Elements, and Relative Positioning
The HTML flow model is pretty simple: every element goes in a box, and the web browser stacks up those boxes when you view the page. Block boxes, which are generated by tags such as <p> and <h1>, get stacked on top of each other, while inline elements stay (surprise, surprise) in a line (unless the line reaches the edge of the container, in which case it runs over to the next line). Easy enough, right? Although elements have a default type (block or inline), you can change this in your CSS with the display: property. You can also...
read moreUnderstanding Relative Positioning in CSS
One aspect of CSS that can be a bit confusing (not that there aren’t plenty of those) is relative vs absolute positioning. It really seems a bit backwards at first. Suppose you have the following code: #container { position: relative; } You might think this means that you’re not positioning container relative to something else, but in fact it means that other boxes inside container can be positioned relative to it. If you give absolute positioning to elements inside container, they’ll now have an absolute position relative to...
read moreCSS Programming and IE6, Part 2: The Box Model
Let’s start with a quick review of the CSS box model. Suppose I have a div. From the outside in, I first have the margin, which is distance from the surrounding elements. Then there’s a border. Inside the border is padding, and inside that is the content. In a modern browser, the total width that the div takes up on the screen (from the border in) will be the combined widths of the content, padding, and border. For example, given a div with width of 80px, border 3px, padding 7px will take up 100 pixels (80 + 3 + 3 + 7 + 7), as...
read moreCSS Programming and IE6, Part 1: Checking Compatibility
Like nearly all web designers, I detest making sites work in IE6. The browser is ancient; it released in 2001! There is absolutely no reason for anybody to still be using it. Unfortunately, for some reason, people still do. This means we have to make our websites accessible to IE6 or lose a fairly sizable minority of our users. With plain HTML, this generally isn’t a big issue, but IE6 understandably has somewhat limited CSS support (it is, after all, over nine years old!) This naturally leads to websites that are essentially...
read more