I am trying to condense white space in the header section. Both the %image and %pages items in the Configure Header Area section take up the entire width of the page leaving dead space in the left or right columns before the widget content shows up. You can see what I mean at www.eWrittenWord.com. I thought I would try to work around this using custom widgets in the header area.

To start, I have added this code in the Configure Header Area to create three custom widgets:

%image %bar2 %pages
<table width=100%><tr>
<td width=4></td>
<td align=left; width=200px><?php bfa_widget_area('name=Left Header Widget'); ?></td>
<td valign=bottom><?php bfa_widget_area('name=Center Header Widget'); ?></td>
<td align=right; align=top; width=213px><?php bfa_widget_area('name=Right Header Widget'); ?></td>
</tr></table>

I know I should be able to create 3 widgets in a single line of code, but for a no-coder, I'm at a loss for the proper coding. But that is not my question. I now want to replicate the CSS coding I used to generate my menu bar and insert it into a PHP Code Text Widget (Center Header Widget). This should allow me to place widgets in the other two holder and have them at the same vertical starting place of my menu bar. Here is the coding I am using in the CSS Insert.

ul.rMenu-hor li.current_page_item a:link,
ul.rMenu-hor li.current_page_item a:visited,
ul.rMenu-hor li.current_page_item a:active,
ul.rMenu-hor li.current_page_item a:hover a{
color: #FFFFFF !Important
}

div#menu1 ul#rmenu2 li.current_page_item a{
font-weight:bold;
background-image:url(http://www.ewrittenword.com/Image_Li...nuButton01.png) !important
}

ul#rmenu2 {
padding-left: 235px;
}

div#menu1 ul#rmenu2 {
background:none;
}

div#menu1 ul#rmenu2 li {
margin-right:10px;
}

div#menu1 ul#rmenu2 li a:hover {
background-color:transparent;
}

div#menu1 ul#rmenu2 li ul a:hover {
background-color: #AAC95F;
}

div#menu1 ul#rmenu2 li a,
div#menu1 ul#rmenu2 li.rMenu-expand {
font-weight:bold;
background-image:url(http://www.ewrittenword.com/Image_Li...nuButton02.png) !important
}

I am using WordPress 2.8.4 and Atahualpa 3.4.3. Thank you in advance for any help offered.

Sometimes I try too hard. The simple solutions always work best. I just needed to add %pages to one of the table cells.

%image %bar2
<table width=100%><tr>
<td width=4></td>
<td align=left; width=200px><?php bfa_widget_area('name=Left Header Widget'); ?></td>
<td valign=top>%pages</td>
<td align=right; width=213px><?php bfa_widget_area('name=Right Header Widget'); ?></td>
</tr></table>

Hope this helps others.