[SOLVED] Header Issues

Cathy131 · #1 Nov 25, 2009, 04:29 AM

Hi there
I've been working on my blog for several days now, and I can't seem to find the answer to the following:

I'd like the left and right hand side of the header image to be purple (#91IEC3) or I'm happy to put an image (of me!) on the left and leave the right purple.
How do I figure out how wide the centre column is so I can adjust my header image to match?
How do I get my table in the middle of the centre column and change the background to white to match the background colour of the centre column?

As you're surfing 'round my site, feel free to offer suggetions

Thanks heaps
Cathy

juggledad · #2 Nov 25, 2009, 07:59 AM

1) at ATO->Body, Text & Links->Body Style set the background to your purple. That will set the background of the site, everything gets placed over the background (if you make the things you place over the background. transparent, then the purple will show thru)

2) figuring out the size of the center- it depends (I use to drive my kids crazy because I seem to always start an answer that way) it depends on wether you are using a fixed width page or fluid width. For a fixed width page, the center area is the page width (defined at ATO->Style & configure LAYOUT->Layout WIDTH and type (FLUID or FIXED)) minus the width of the right and left sidebars...unless on some pages you arn't displaying teh sidebars or only one side of the sidebars, then the center is the page width minus what ever sidebars are being displayed.

If the page width is fluid, then there is no way to determine how widt teh center colum is because it depends on how wide the viewer makes the page.

3) to center the table try putting a <div id="mytable" class="align-center">...</div> around the table, then you can use CSS to stle the color

Your logo comes out blured, get a better copy.

lmilesw · #3 Nov 25, 2009, 08:10 AM

Or if you just want a color behind your logo put

HTML Code:

background: #91IEC3;

in the "Logo Area: Styling" in the "Style and edit HEADER AREA" tab

Cathy131 · #4 Nov 26, 2009, 06:14 PM

Hi Guys
Thanks for your help got the background colour sorted.

Unfortunately, the table is still an issue. This is the HTML code around it:

<table class="c2" style="height: 57px;" border="0" cellspacing="0" cellpadding="0" width="407" align=center>
<tbody>
<tr style="text-align: left;">
<td>
<ul>
<li><span class="c1">Neck/back pain</span></li>
<li><span class="c1">Headaches</span></li>
<li><span class="c1">Stress</span></li>
</ul>
</td>
<td>
<ul>
<li><span class="c1">Muscle soreness</span></li>
<li><span class="c1">Sports injuries</span></li>
<li><span class="c1">Pregnancy pain</span></li>
</ul>
</td>
</tr>
</tbody></table>

Can anyone see errors in there?

@juggledad - where do you suggest inserting <div id="mytable" class="align-center">...</div>?
Working on a better logo. Do you recommend a particular px size and/or DPI ratio?

Thanks
Cathy

juggledad · #5 Nov 26, 2009, 07:12 PM

try this

HTML Code:

<div id="mytable" class="align-center">
<table class="c2" style="height: 57px;" border="0" cellspacing="0" cellpadding="0" width="407" align=center>
<tbody>
<tr style="text-align: left;">
<td>
<ul>
<li><span class="c1">Neck/back pain</span></li>
<li><span class="c1">Headaches</span></li>
<li><span class="c1">Stress</span></li>
</ul>
</td>
<td>
<ul>
<li><span class="c1">Muscle soreness</span></li>
<li><span class="c1">Sports injuries</span></li>
<li><span class="c1">Pregnancy pain</span></li>
</ul>
</td>
</tr>
</tbody></table>
</div>

Why are you using a '<span class="c1">' ?

Cathy131 · #6 Nov 26, 2009, 11:53 PM

cos I don't know any better?!

. I plugged the HTML in to an online code checker and it came up with this suggestions. Perhaps not such a good idea?

I've added <div id="mytable" class="align-center"> at the beginning of the code and </div> at the end as suggested but it didn't make any changes.

Cathy

juggledad · #7 Nov 27, 2009, 06:59 AM

Cathy, I just looked at the generated source for your site. It's a mess! You have a second </head> <body> and it looks like you put them in a post!?!?!
----------------------------------------------------------------

<td id="middle">
<div class="post-4 page hentry category-uncategorized post" id="post-4">
<div class="post-bodycopy clearfix"><style type="text/css">
p.c3 {text-align:center;}
span.c2 {color:#333333;}
span.c1 {font-size:12pt;font-family:arial,helvetica,sans-serif;}
</style>
<p></head><br />
<body></p>
----------------------------------------------------------------
You need to get a basic understanding of how HTML, CSS, and WordPress work, which is more than can be offered here. You need to do a little homework.

Check out this thread for a starting place http://forum.bytesforall.com/showthread.php?t=3845

Cathy131 · #8 Dec 5, 2009, 05:41 AM

Hi there
Thanks for pointing me in the right direction juggledad. I think I have a better understanding of how HTML, CSS, and WordPress work now!

If you have time, I would really appreciate your help as my table is still not working. Without logging in to WP I visited my homepage, selected all the text in the middle column and pasted it in to Text Editor. I then formatted it in to Rich text.

I logged in to WP, created a new page pasted in the text, selected all the text again and clicked on 'remove formatting' just to be sure. Check in the HTML tab - everything appeared 'naked'. I then used the 'visual editor' to set up the page. I then copied the HTML code for the table from you email and pasted that in accordingly.

No joy

( What am I doing wrong and/or how can I insert a table using the 'visual editor'?

Cathy

juggledad · #9 Dec 5, 2009, 06:12 AM

the line <div id="mytable" class="align-center">
should be <div id="mytable" class="aligncenter">

there is no css for 'align-center' (don't you hate it when the computer does what you TELL it to do and not what you WANT it to do!!!)

lmilesw · #10 Dec 5, 2009, 06:52 AM

Instead of tables I found a GREAT plugin that can columnize a page or post in several different ways. It's called Page Columnist. Here is a link to there page. If you click on the screen shots you can see the various layouts that are possible. This is now a default plugin for me.

Cathy131 · #11 Dec 5, 2009, 07:07 AM

Hey Juggledad
Tried your suggestions but still no luck. What have a messed up?

lmilesw
I don't want the whole page to be a table - just 3 lines of text! Will your plugin do that (couldn't see that on their page)

lmilesw · #12 Dec 5, 2009, 07:19 AM

The plugin uses page breaks to divide the page. In your case it looks like you would use the columns in center choice and 3 page breaks. That would leave the "Do you suffer from" part of the page at full width, create two columns for the item you are putting in a table, and the rest would be at full width. The plugin also has the ability to allow for adjusting the columns if you select that proper option and click the preview button. It's kind of hard to explain but pretty easy to use.

juggledad · #13 Dec 5, 2009, 07:20 AM

add this to the ATO->add HTML/CSS Inserts-> CSS Inserts

HTML Code:

div#mytable {
 margin-left:25%;
 margin-right:25%;
 }

Cathy131 · #14 Dec 5, 2009, 03:58 PM

Thanks so much juggledad. You are a marvel