I was trying to style the header for a site I'm building (http://www.todddawsondesign.com/test/carmichael-hill/) and either entered some bad code somewhere or punched a button I shouldn't have or SOMETHING... when I hit SAVE, the page never finished loading. After awhile, I just closed the window, but subsequent attempts to open the Atahualpa Theme Options window, it never finishes loading.

Firebug showed this:

<tr>
<td id="header" colspan="2">
<table id="logoarea" cellpadding="0" cellspacing="0" border="0" width="100%">
<div id="menu1" class="menu-main-menu-container">
-right
</td>
</tr>

The "-right" after the "menu1" bracket looks wonky to me. But where would I find that to edit it out?

Or what file would I open to edit whatever else it might be?

Any help greatly appreciated!

We're you editing inthe backend?
Do you have a wp custom menu or atahualpa auto generated one?
Can you swap to twenty eleven?

No, I was editing in Atahualpa, in the styling heads section. Got the code from Firebug after the 'crash'.

i created the menu in WP... don't know what you mean about an atahualpa auto generated menu...

Yes, I can swap to twenty eleven. But returning to Atahualpa yields the same problem again.

Plus, when I open a new page in Atahualpa, it opens with Firebug activated, even though it was turned off before the click to the new page.

try turning off the menu you created - set dashboard->apearance->menu->theme locations->menu 1 back to blank

Thanks, Juggledad, for your help. I tried that, but it didn't seem to help.

Was using Chrome, then tried Safari (same issues), but got into the backend w/Firefox, and found that in the Style and Edit HEADER section, I'd put "%logo %pages-right" instead of "page-right", which must have messed things up.

Got it to work in FF, but still not Chrome.

Eventually turned off the Firebug extension, and now all is well. Hoo boy.

Thanks for the help, and timely responses. You guys totally rock.

Now, on to my obvious next question...

Attached is a sketch of the design I'm trying to create. How do I style the header area? As a table w/two columns? As a div w/a floated logo on left?

And do I do this in the "Style Header" area somewhere (and if so, where?) or in the Add HTML/CSS inserts area?

you could add a two cell new widget area to the header config area and then add to text widgetts with the html you need. Then you could style them independently

Thank you and bless you. I'll give it a shot.

I haven't got this right yet; the menu is showing up as a ul, not as the designed menu in the theme options pages. How do I make *that* menu show up in the widget cell?

Once again, the page being referenced is: http://www.todddawsondesign.com/test/carmichael-hill/

Apologies in advance-I'm more designer than programmer.

you don't need to have the menu in the new widget area you could have

<?php bfa_widget_area('name=Header widget area&cells=2'); ?> %pages

in the configure header area then just position and size the menu with CSS

My goal is to have the nav *in* the second cell, not below both cells. Then I know I can style w/CSS. How do I get it in the second cell?

did you look at the example I showed you? you will have two widget areas and you can put multiple widgerts in each.

but I would still keep the menu out of the wwidget areas ahd with CSS define it's width and position.

Yes, I tried the example you showed. Did you see the file I'd attached earlier showing the design of the page and the header outlined in red?

I'm attaching another jpg, of just the header. The logo extends to the bottom of the menu bar. That's what's stumping me.

I understand that inserting widgets creates a table. To format the header the way I want seems to necessitate putting the menu in the second cell. Is there a reason this is less desirable? How do I reference the Atahualpa-coded menu1?

Any other ideas to create this look?

as I said style it with CSS - here is what I did
1) set my page width to 900px (so I could use fixed PX below)
2) created widget area in header and used this

<?php bfa_widget_area('name=Header widget area&cells=2&width_1=300&width_2=600'); ?> %pages

3) added two text widgets to the new widget area with this in the first

<div id="myh1"> lala</div>

and this in the second

<div id="myh2"> lala</div>

4) added the following CSS inserts

div#myh1 {height: 200px; width: 300px; background-color: #33ffff; border: solid 1px blue;}
div#myh2 {height: 200px; width: 600px; background-color: #ffcc00; border: solid 1px red;}
div#menu1 {width: 600px;}

and this is my result

Thanks for such a detailed response-I really appreciate the help.

And I copied your steps exactly, albeit using slightly different measurements, but I did not get the same results. Even from looking at your code, I still do not see how you got the menu "inside" and to the right of the logo. In every case, the code places the menu outside.

I am sure I am missing something, I just don't know what. Here is what I did, copying your code example exactly, only modifying the width measurements:

1) set my page width to 1000px (so I could use fixed PX below)
2) created widget area in header and used this

HTML:
---------
<?php bfa_widget_area('name=Header widget area&cells=2&width_1=305&width_2=695'); ?> %pages
---------
3) added two text widgets to the new widget area with this in the first

HTML:
---------
<div id="Header widget area1"><a href="http://www.carmichael-hill.com"><img src="http://www.todddawsondesign.com/test/carmichael-hill/wp-content/uploads/2012/09/site-logo.png" width="305" height="175" alt="logo"></div>
---------
and this in the second

HTML:
---------
<div id="Header widget area2">
<h4>301.217.9300</h4>
</div>
---------
4) added the following CSS inserts

HTML:
---------
div#hwa1 { height: 175px; width: 305px; background-color: #dfdfdf; }
div#hwa2 { height: 175px; width: 695px; padding: 0 30px 10px 30px; background-color: #ffffff; text-align:right; }
div#menu1 { width= 635px;}
---------
and this is my result:

http://www.todddawsondesign.com/test/carmichael-hill/

look at the last line of your CSS again

I made the menu shorter to accommodate the padding.

I took the padding out of the div, and made the menu the same size as the div.

Still no change.

http://www.todddawsondesign.com/test/carmichael-hill/

look at the last line of your CSS again (you may kick yourself when you figure it out )

<headsmack>

Thanks.

But it didn't solve my problem. :-(

http://www.todddawsondesign.com/test/carmichael-hill/

OK-I've got it.

div#Header widget area1 { height: 175px; width: 305px; background-color: #dfdfdf; }
div#Header widget area2 { height: 120px; width: 695px; background-color: #ffffff; }
div#menu1 { width: 635px; margin-left: 335px; margin-top: -40px; }

Had to style the h4 tag to position it correctly, as padding/margin settings for the div didn't seem to do anything. Who knows.

Thanks for all the help!

add 'position:relative; left:400px; top: -30px; and adjust to suit

To the h4 tag? Where did the "400" come from? Any reason why that would be better than:
h4 { font-family: Candara; font-style: bold; font-size: 18px; margin: 1.33em 0 .2em; padding-right: 30px; color: #26458c; text-align: right; }

add it to the 'div#menu1'

Thank you, sir! Lllllloooks mahrelllous, dahlink!