digitalRenewal » css tutorial http://digitalrenewal.com like a breath of fresh air Mon, 09 Apr 2012 15:47:06 +0000 en hourly 1 CSS Positioning http://digitalrenewal.com/css-positioning http://digitalrenewal.com/css-positioning#comments Thu, 31 Dec 2009 20:50:57 +0000 Trisha http://digitalrenewal.com/?p=670 I read about a CSS Trick where you move the menu code down past the content, while keeping the menu at the top of the page. This can help with your site’s Search Engine Optimization, giving the spiders relevant content and keywords first on your page, while still providing good navigation for your readers.

Its done with positioning in CSS. I never really did FULLY understand positioning in CSS. I was working on my SEOd like Crazy Theme for WordPress where I wanted to use this trick, and had to get to learning… BarelyFitz made a neat tutorial to learn CSS Positioning that helped me figure it out.

I knew to set my positioning on the menu to absolute, but was running into a problem: My layout was a fixed width, centered on the page.  The menu needed to stay inside my layout, not just stick to the top right of the page… Different screen resolutions will throw this layout completely out of whack… such a long explanation for such an easy fix!

Put the menu div inside another div (in this case my page wrapper) and set the wrappers position to relative.

]]> http://digitalrenewal.com/css-positioning/feed 1 Clearing Floats in CSS http://digitalrenewal.com/clearing-floats-in-css http://digitalrenewal.com/clearing-floats-in-css#comments Sun, 13 Dec 2009 04:12:17 +0000 Trisha http://digitalrenewal.com/?p=546 clearing floats in cssThis one was long overdue. Even after a year of coding with only CSS, I was ready to sit down and relearn floats. There had to be something I was missing. It just didnt work. Since the default behavior of a div is to stack on top of each other, they must be floated, so they behave like table columns. The problem arises after the float. The float must be cleared somehow or the info below runs right into the columns. After reading Smashing Magazines article on CSS Floats I was surprised at how SIMPLE the fix is. One little word was the key to ending my frustration. overflow. remember them well. You can use overflow:hidden, overflow:auto, or overflow:visible… play around with it to see what each does.

<div style="overflow: auto; width: 100%;">
<div style="float: left; width: 20%;">Left</div>
<div style="float: left;">Content</div>
<div style="float: right; width: 10%;">Right</div>
</div>
<div>footer</div>

Heres the result:

Left
Content
Right
footer

And with little extra styling:

<div style="background: #ffffff; overflow: auto; width: 100%;">
<div style="float: left; padding: 1%; background: #cccccc; width: 20%;">Left</div>
<div style="float: left; padding: 1%;">Content</div>
<div style="float: right; padding: 1%; background: #555555; width: 10%;">Right</div>
</div>
<div style="background: #333333; color: white; text-align: center;">footer</div>

Heres the result:

Left
Content
Right
footer

Happy CSSing!

]]> http://digitalrenewal.com/clearing-floats-in-css/feed 3