Hi,


I have added a background image to www.annsworld.com

I would like the actual website starting with the logo area's upper left hand corner to be positioned at the top (which it does) and 200px away from the background image's left edge. Currently it centers horizontally.

There must be a way of positioning the whole thing align: left; padding-left:200px; (or something like that. But where would I actually have to put this?

ATO -> ???

Thanks,
Ann.

To position the center area as you want you would use something like the following.

#wrapper {
    left: 200px;
    position: absolute;
}

As an aside the file size of your background image is very large (almost 1Mb) and will slow down page loads.

Thank you. Do I put that into the CSS or ito the header where I put the code for the background image?

Ann.

Missed the bit about the page loads. Oh thank you, I need to look at that. I need actually to rewrd the background image - I took the one from twitter to test. :-)

As an aside, how do I get an image to tile? For the other site I am working on.

Originally Posted by annsworld

Do I put that into the CSS or ito the header where I put the code for the background image?

You put it in ATO>Add HTML/CSS Inserts>CSS Inserts

Originally Posted by annsworld

As an aside, how do I get an image to tile? For the other site I am working on.

You use the CSS repeat command. See w3schools.com

Thank you Larry,

Turns out I had a semicolon too many in there that's why it didn't tile. Life would be soooo much easier without typos!!

The wrapper thing is not working. The inner column moves around as before rather that staying attached to the left hand side at 200px. Any ideas?

So just to be clear... Are you saying you put the following in the CSS Inserts box in the theme options? (I changed it a bit as I think the 230px is more what you need.)

div#wrapper {
    position: absolute;
    left: 230px;
}

If that isn't working try adding !important after each line as below.

div#wrapper {
    position: absolute !important;
    left: 230px !important;
}

Hi Larry, thanks.

Sorry about the delay - I haven't been able to work on this for a few days.

Anyhow, I put in ...

div#wrapper {
position: absolute !important;
left: 230px !important;
}

... and it is completely ignoring that, as well. :-(

Isn't CSS fun?
It sometime is a matter of trying this and trying that so try this which worked in my tests.

In ATO>Style & configure Layoue>Layout container style

• Change position: relative; to position: absolute;
• Add width: 760px;
• Add left: 230px;

You can also remove the code from before just to clean things up.

lol... you can see how much fun I am having from the bite marks on the side of the table I have been biting into ... :-)

...

trying

...

oh shit... big problem. Now the centre column is tiny. But it did fix the whole thing ont he LHS where it is supposed to go.

Have a look ...

Took them out one by one. It is the "relative" substituted for "absolute" which makes the centre column really tiny. WHY?????

Did you add width: 760px ?

Actually just had another look. it makes the right sidebar attach to the left border

The centre column seems to be one letter wide. Showing the title of a post basically vertically.

yes I did.

I have this:

position: absolute;
width: 760px;
left: 230px;

pasted in there.

it seems that one needs perhaps to put something else there for the centre column width?

It looks like you still haven't added width: 760px; to the Layout Container Style box

I did, though. Look: :-)

Add !important after the width and see what happens. Your code would look like the following.

position: absolute;
width: 760px !important;
left: 230px;

Yes! That did it! Thank you.

one donation coming up. :-)

Thanks,
Ann.