Hi,

Still learning CSS.. Getting there!

I have purchased two theme's to get me going on upgrading my website.

I have finished the home page which is one template, however I have tried combining two templates after login.

Everything works fine, however once you login, the lower section (the 2nd template) is set to start right up on the edge of the page. Whereas i would like it to be centered just how the home page is prior to login.

The URL is: http://www.citysidesports.com/cliftonhill/ and I have created a test username/pass for people to be able to take a look:

Email: test@citysidesports.com
Password: testpass

I have tried numerous different things, however I'm driving myself crazy to try and work it out. It's probably very simple - but not for me! lol

Thanks for any advice! :thumbsup:

Taylor

Hi,

Still learning CSS.. Getting there!

I have purchased two theme's to get me going on upgrading my website.

I have finished the home page which is one template, however I have tried combining two templates after login.

Everything works fine, however once you login, the lower section (the 2nd template) is set to start right up on the edge of the page. Whereas i would like it to be centered just how the home page is prior to login.

The URL is: http://www.citysidesports.com/cliftonhill/ and I have created a test username/pass for people to be able to take a look:

Email: test@citysidesports.com
Password: testpass

I have tried numerous different things, however I'm driving myself crazy to try and work it out. It's probably very simple - but not for me! lol

Thanks for any advice! :thumbsup:

Taylor

Try this addition:.container {
margin:0 auto;
width:960px;
}

That does the trick... Or at least half of it.

Now it has the background not lined up as you'll see.

By the way, I can't believe it was that simple! Someone was discussing auto margins with me yesterday too.. UGH!

Thanks Rowsdower.

Try adding clear:both; to #footer

Your background is applied to the body and relies on an image to create the appearance of both sections of the page - the sidebar and the main content - having full height (this is called "faux columns"). Since you are not using the template quite as intended you will need to adjust the method a bit to suit.

Try this:
.container {
background:#FFFFFF url(../img/bg.gif) repeat-y scroll 0 0;
margin:0 auto;
width:960px;


And then adjust the body's CSS like so, to avoid complications on super-wide screens:
/*background:#FFFFFF url(../img/bg.gif) repeat-y scroll 0 0;*/ /*commenting this out since it really won't belong here any more */
background-color:#e0e0e0; /*setting background color to match the left-hand side of the old BG image*/
color:#333333;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:12px;
line-height:20px;

Bingo!

Thank you very much!