So many thoughts. So little time.

Category Archives: CSS

Positioning Content Precisely using CSS

In the Headway grid layout system, blocks align at their top margins to sit together in a row – taking advantage of the CSS section-based layout system. This is a very good thing. However, it means that if two items are in close proximity in the grid, but one under another, the lower block item will be asked (not politely) to be on a different row, which pushes that lower block down under the blocks on the upper row. Disconcerting!

Sometimes you can adjust the horizontal spacing between blocks to communicate clearly to the grid rendering engine what your intention is (which row you wish your block to be on, shared with which other blocks.) That’s a nice thing that helps a bit to make you feel more in control. But, that doesn’t make all possible layouts, well, possible!

The way around this – and to take TOTAL CONTROL over your blocks – is to use the positioning capabilities built into CSS. These positioning capabilities allow you to grab hold of a block and position it ANYWHERE on the page that you wish!!! So, if the row/grid system is saying, “You sit down there, under us!” to a block you want to sit alongside them, your block can rise to the occasion and show them just what’s what!

Here, in a nutshell, are the primary CSS tools used to position items:


position: (well, that one was easy!)

Property Values & Description

static Elements renders in order, as they appear in the document flow. This is default. (BORING!)

absolute The element is positioned relative to its first positioned (not static) ancestor element (WE LIKE!)

fixed The element is positioned relative to the browser window (WE LIKE!) (but…) (IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.)

relative The element is positioned relative to its normal position, so “left:20px;” adds 20 pixels to the element’s LEFT position. “left:-20px;” subtracts 20 pixels from the element’s LEFT position. (WE LIKE A LOT!)

inherit The value of the position property is inherited from the parent element (Not in IE7 – Not used easily in IE8 as !DOCTYPE must be set. OK in IE9. Avoid, I say.)

The related, very useful and important settings:


Especially margin-left and margin-top when used in position:relative mode. Set in pixels (px). However, see top and left below.


Allows layering – must be applied to all items involved in the layering. Requires position: to be set to one of the above values.

top: and


Sets position from corner of browser (absolute – first ancestor usually is the browser html tag, or the top-left corner at 0,0) OR from corner of any element the item is sitting inside of in the ID/Class hierarchy (relative). Use instead of margin-top or margin-left for more flexibility with all modes. Set in pixels (px). Can also be set as a percentage.

Now that you have the most important modifiers, here’s some CSS:

#block-ID {
left: some number in px or percent;
top: some number in px or percent;
z-index:level in the layer hierarchy - lower numbers are under higher numbers


.block-type-whatever .custom-class .item-number-class {
left: some number in px or percent;
top: some number in px or percent;
z-index:level in the layer hierarchy - lower numbers are under higher numbers

You can play with position:absolute; or position:fixed (note caveats above for fixed)

Watch the video from the Tips and Tricks section to see how to use the arrow keys in Firefox or Chrome’s Inspect Element to make positioning fun! (…And grab the numbers and settings you want!) Note how I used margin-left and margin-top in that, but you can get the same result with left: and top: in relative mode. Total crazy control over the whole page in absolute mode!! Negative numbers are allowed in all cases.

This video shows how to use the keyboard in Chrome or Firefox’s Firebug to nudge items around and get the values you want, which you can then paste into your own CSS stylesheet or use in Headway. See at the bottom after item 24.

So, I hope you’re “getting it” that where the grid and row system sends your blocks is of little consequence as pertains to WHERE YOU CAN PLACE THOSE BLOCKS!!!! You can place them anywhere. This is like layout on steroids.

I hope this was helpful. I’ll make another video going deeper into this if people ask for one.

25 Cool Blogger and Web Developer’s Tricks and Tools in Firefox and Chrome

1 } Press and hold the back or forward buttons in the browser to see a list of pages you’ve been on, then select from that list to jump to a page rather than hitting the back or forward button repeatedly.

2 } F5 reloads/refreshes the page. Much easier than groping for where they’ve moved the reload button to this time with your mouse! (And a fun key to pound upon – easy to reach!)

3 } CTRL-F5 forces the cache to be emptied and the page loaded entirely afresh.

4 } CTRL-clicking a link will open that link in a new tab.

5 } CTRL-NumberKey will open the tab corresponding to that number.

6 } CTRL-Tab will move through the tabs sequentially. CTRL-Shift-Tab moves you backwards through them.

7 } Similarly, CTRL-Page-Down moves you forward through the tabs, and CTRL-Page-Up moves backwards through them.

8 } CTRL-W will close the current tab

9 } CTRL-T opens a new tab

10 } CTRL-N opens a new window entirely

11 } Still new to many people are the basic keyboard shortcuts for undo, cut, copy, paste, select all, bold and italic. So, here they are:

Undo – CTRL-Z
Cut – CTRL-X
Copy – CTRL-C
Paste – CTRL-V
Select All – CTRL-A
Bold Selected Text – CTRL-B
Italicize Selected Text – CTRL-I

12 } Clicking at the beginning of where you’d like to make a selection (or end!) and then holding down the Shift key and clicking at “the other end” will select everything between those clicks for you.

13 } The “End” key takes you to the end of a line. The “Home” key will take you to the beginning of a line. CTRL-End goes to the end of the document, while CTRL-Home goes to the top of it.

14 } Holding the Shift key and hitting “End” selects from where you are to the end of the line. Shift-Home does the same but from where you are to the beginning of the line. CTRL-Shift-End selects everything from where you are to the end of the document, and CTRL-Shift-Home selects everything from where you are to the top.

15 } Firefox’s Firebug and Chrome’s Inspect Element tools will allow you to edit HTML and CSS elements live in the browser and see immediately what the results will look like. Once you have the code working the way you like it, copy what you’ve come up with and paste it into your actual web programming software or CMS templates.

16 } If you set the CSS settings for an image or other object to position:relative; then you can move in negative directions using the margin settings and employ the z-index for layering/overlapping things. You also can watch the position of the image move to where you want it by double-clicking on the setting and hitting the up and down arrows to sequence through numerically on the setting you’ve double-clicked upon.
(See the video below this article for a demo)

17 } Chrome has an add-on called Pendule that adds many very useful functions to Chrome and are great additions to the capabilities of the Inspect Element tool. [Addendum: Additionally, here’s a link to Chris Pederick’s web developer tools for both Chrome and Firefox browsers so that those aren’t left out here! Thanks to Ron Amatriain for his comment suggesting this!

18 } Chrome’s Inspect Element tool, when arrived at via right-clicking on a spot on your page and selecting “Inspect Element”,  will zap you right to the section of HTML where that element’s code exists, so you don’t have to first open the editor and then use the magnifying glass (like Firebug’s selector tool) to get to the element. Currently in Firefox, the right-click on an element and selecting “Inspect Element” brings up a differently formatted viewer, where you have to click the HTML or Style buttons to see all the info for that element. However, selecting “Inspect Element in Firebug” performs the same feature as Chrome does.

19 } Both Chrome and Firebug have a very powerful selector tool that helps you find where in the HTML your code is sitting. Additionally, clicking on a DIV or any other element in the code will expose its CSS settings for you to play with or add to in the right-hand column.

20 } Both Chrome’s Inspect Element tools and Firefox’s Firebug will open their toolbox when pressing the F12 key. They also respond with “Inspect Element” tools when pressing CTRL-Shift-I.

21 } Both Chrome and Firefox will allow you to view the browser window full-screen using the F11 key. This removes the tabs, bookmarks and other toolbars, the URL window and all menu items. The Firebug and Inspect Element tools remain! The above-mentioned CTRL keyboard shortcuts still work to move through the tabs or close them, and CTRL-clicking a link still opens the link in a new tab.

22 } WordPress and several other CMS platforms having built-in editors often have a full-screen option that further empties the clutter out of your way for writing or coding. WP has this for both their visual and HTML raw code editors. Talk about uninterrupted focus! The WordPress HTML editor will allow you to insert a link and an image or media item, but that’s about it. The Visual editor has bold, italics, ordered/unordered lists, block-quote, insert media and  link make/break, but that’s it (though I’ve installed Syntax Highlighter Evolved and the sister Syntax Highlighter TinyMCE Buttons, and the PRE and CODE buttons appear even in this sparse editor!) Again, the CTRL-key combo shortcuts still work for navigating through your tabs, so you don’t have to leave this environment to switch to the page after saving your code or writing to view the results on a refreshed (F5) page.

Getting your writing done in the HTML editor in WordPress and a few others is cleaner code as hitting the return key does not insert “ ” place holders between paragraphs – just auto-generated paragraph tags. Clean!

(EXTRA: Many people don’t realize that in WordPress the HTML editor will insert <p>paragraph enclosures</p> around paragraphs written there – oh, yes it does! Check out your page’s source! But it can and usually will figure out when you’ve placed code in there and it doesn’t do that to your code.)

23 } ALT-left-arrow will take you back to a previous page, while ALT-right-arrow will take you forward one page. Same as hitting the back or forward buttons, but faster than a mouse can do if you’re typing already.

24 } Shift-Enter will often insert a soft-return via a “break” <br /> tag rather than a full </p> paragraph closure with a new <p> paragraph on the next line. Makes for tighter, truly single-spaced lines of text or other elements when that is what is needed or desired.

example (hitting Shift-Enter)

This is a new paragraph (hitting Enter)

25 } Sometimes viewing the raw source code for a page is the best way – especially if you use find/search on the page. So, for the final ones, you get a two-fer: CTRL-U brings up the source code, and CTRL-F brings up the Find search box.

That’s enough to keep you busy for a while! Use the shortcuts often and they will become new habits that can really save you time and wrist-agony in the long run!

Here is a video that demonstrates the keyboard arrow keys trick in Firebug and in Chrome’s “Inspect Element” tools:

Best watched full-screen at 720p, either from here or at YouTube.

Have fun!


CSS – How To Create Colored Link Website Navigation-Bar WordPress “Breadcrumbs”

Thanks to WordPress automatically adding new CSS classes of its own to the navigation structure since WP3.0, color-indicated “breadcrumb” navigation is now possible, not only via the navigation bar, but using widget menu links or even links within an article! Dynamic Navigation Link Coloration is easy, now!

Here are the new classes we’re getting to play with in the navigation now:

li.current-menu-item a { }
li.current_page_item a { }
li.current_page_ancestor a { }
li.current_page_parent a { }
li.current-post-ancestor a { }
li.current-post-parent a { }
li.current-menu-ancestor a { }
li.current-menu-parent a { } a { } a { } a { } a { }

Note that some of the above use underscores, and others use hyphens.

“Parent” usually indicates that a parent had been assigned when creating the page, while it refers to the category when referring to a post. It gets pretty hairy – when selecting a post from a category archive menu item, the resulting page displays “current-post-ancestor” “current-menu-parent” AND “current-post-parent” as that menu item’s new classes, each presenting a different opportunity for coloring that category-archive menu item’s link! (I present how it is done with category archive links in the video.)

“current-menu-ancestor” is more to do with drop-down menus (sub-menus), indicating all of the higher menu item(s) in the hierarchy. “current-menu-parent” is the immediately higher menu item in a sub-menu, mostly useful with two or more levels cascading sub-menu items.

Make your code affect only the first element using the greater-than “>” sign.

I first read about WordPress adding these new classes at this site:

But, frankly, it took me a while to comprehend what on earth the author was driving at (and how to actually USE that information!)

Here we have a video that explains some things, and I’ve included example code below.

And the Addendum #1 recorded almost immediately after watching the first one:

The order of items is important, as they “cascade”. It is important to always remember that CSS ALWAYS reads from top-to-bottom on both the HTML page and in your CSS definitions, sequentially taking in each of your design items one after the next, with ones lower on the page superseding higher ones. Thus, the initial “fallback” items are at the top. On the web page itself, the same rule holds – it reads from top-to-bottom, so you always have to find relevant “selectors” that come BEFORE the class, ID or element that you want to ultimately affect.

And here are the code examples. (The videos cover how to get the best selectors for your theme.)

/* Table of Contents */
/* Navigation Background Color */
/* Default colors for all navigation bar links */
/* Current Page Ancestor - the parent page's link on the nav bar */
/* Current Page Item */
/* Sub-menu Current Menu Item */
/* Sub-Menu Current Page Item */
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
/* Highlight Main Blog Posts Link on Single Pages */
/* Navigation Background Color */
 .yourBestSelectors(NavBar) {background:white !important; }
/* Default colors for all navigation bar links */
 .yourBestSelectors ul li a { color:gray !important; font-weight:bold !important; }
 .yourBestSelectors ul li a:hover {color:red !important; }
 .yourBestSelectors ul li a:active {color:blue !important;}
 .yourBestSelectors ul.sub-menu li a { color:green !important; font-weight:bold !important; }
 .yourBestSelectors ul.sub-menu li a:hover { color:red !important; }
 .yourBestSelectors ul.sub-menu li a:active { color:blue !important; }
/* Current Page Ancestor - the parent page's link on the nav bar */
 .yourBestSelectors ul li.current_page_ancestor a {color:orange !important; }
/* Current Page Item */
 .yourBestSelectors ul li.current_page_item a {color:yellow !important; }
/* Sub-menu Current Menu Item */
 .yourBestSelectors ul.sub-menu li.current-menu-item a {color:gray !important; }
/* Sub-Menu Current Page Item */
 .yourBestSelectors ul.sub-menu li.current_page_item a {color:yellow !important; }
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
.yourBestSelectors ul > a {color:#1a91a1;}
/* Highlight Main Blog Posts Link on Single Pages */
.yourBestSelectors ul a {color:#1a91a1; font-weight:bold;}

Those last two examples are handy when landing on a page that is arrived at via a widget menu item or an on-page link reference. Naturally, the menu-item-## will change from theme-to-theme. Analyze your page source to get that info.

(The videos also cover using Firefox’s Firebug, or alternatively Chrome’s and other’s “Inspect Element” right-click menu item, which work very similarly. The videos additionally expose the fact that using Child Themes are not for the rich and famous only. Anyone can – and should – edit their theme’s CSS styles this way.)

Sometimes you have to force the color changes using the !important command inserted before the semi-colon of each color. (That’s an exclamation mark before the word “important” there.) Especially in cases where the definitions were applied to an ID rather than a class, you’ll need that !important item to override its settings. Basically, whenever something that should be working isn’t working, try this, but also look for missing commas, semicolons, or selectors and/or elements like I managed to miss LIVE on both videos at one point or another…

Note the ancestor code is at the top of this CSS definitions section, followed by the page item and category menu items. You’ll sometimes find that matters a lot.

So, how do you determine what .yourBestSelectors are? That can be tricky! For that, view the videos!

I will tell you that targeting IDs as opposed to classes is easier, since you don’t have to worry about the context. By definition, an ID is only supposed to appear once on a page, so it is always unique, whereas a class is permitted to be used in multiple locations on the same page, so it needs some information accompanying it to give the reference as to which instance you are using it in.

Also, you can combine a couple of items that will have the same settings using commas. Be aware, however, that things like two ID-defined items may both need the ID, as in a situation I just encountered:

Didn’t work correctly:

#block-22 ul.special-nav li.current-menu-item, li.current_page_item a {
    color:lightBlue !important; text-weight:normal;

Worked correctly:

#block-22 ul.special-nav li.current-menu-item,
#block-22 ul.special-nav li.current_page_item a {
    color:lightBlue !important; text-weight:normal;

This example needed to override the current_page_item setting that affected other nav-bars, but couldn’t affect this special one. If I didn’t include the second #block-22, it would override the default use of the class. Who would have guessed! Both classes are legit for the same menu item! Well, that’s why they call them “Cascading Style Sheets”!

Here is the code that was included in the child theme for the twenty-eleven theme mentioned in the video:

 Theme Name: Twenty Eleven Child Test
 Theme URI:
 Description: Child theme for the Twenty Eleven theme
 Author: Terry Leigh Britton
 Author URI: http: //
 Template: twentyeleven
 Version: 1.0
@import url("../twentyeleven/style.css");
li.current-menu-ancestor > a, li.current_page_item > a, li.current_page_ancestor > a {
 color: #1A91A1 !important;
 li.current-menu-item > a {
 color: orange !important;
 li.current-post-ancestor, li.current-menu-parent, li.current-post-parent a {
 color: lightBlue !important;

The “Early Morning” Child Theme for the Thematic parent theme by can be found here:

To make life easier on yourself, if you have a theme that supports adding custom classes to your individual blocks , one thing you should do first is name your navigation bar or widgetized menu with a custom name and assign it an allOneWord custom css class under the block’s config. Headway by makes that quite easy to accomplish. (That’s my affiliate link, if you want to purchase it through me!) I probably am going to have a review here about Headway soon.