newbie page centering for hard-to-tile backgrounds

[houseofgrays]

Here’s what I’ve got: http://www.houseofgrays.com/sse/index.html

Here’s what I’m playing with: http://www.houseofgrays.com/sse/index-test.html

I want the logo and search fields to move/center with the main content in

but I need the top pattern to repeat-x, outside the page-wrap width. I am having trouble including this in the page background image (http://www.houseofgrays.com/sse/images/bg-new.png) because it doesn’t tile easily with the other pattern.

I hope this makes sense but I realize there’s a good possibility it doesn’t or this is a stupid rookie question. I’d sincerely appreciate any help or tips you could offer.

Thank you much!

Megan

[grovesk]

Hi Wendy – That’s a nice design you have going, however I notice you are using tables for the majority of the layout. Tables should really only be used for tabular data so wondering why you have tables here?

Is this a template you picked up somewhere?

Karen

[houseofgrays]

Hi Karen,

Ah, should have noted that. Normally I don’t use tables but this was requested from my client’s hosting service/programmers for their custom CMS. They wanted any editable content areas to be in tables.

Any ideas about how to fix the problem? I’m sure it’s something obvious I’m missing.

Thanks,

Megan

[houseofgrays]

I guess I’ve fixed the issue through changing the background slice. But am still wondering if there’s a way to essentially layer 2 divs without pushing the 2nd one below it. Should be something I know, but can’t figure it out.

[grovesk]

First, which CMS is this so I know to avoid them ;)

You have a table inside a table in that header which is causing you grief. Below is cleaned up table. In addition, if you are being forced to use tables it would be helpful for that table to have a class. Note the class=”header-container” in the first line.

LOGO IMAGE HERE
BLOG CONTACT








SEARCH        

In your CSS remove the margins and padding from #header and add CSS for .header-container

#header {

min-height:105px;

background-image:url(images/wallpaper-bg-top.gif);

width: 100%;

}





.header-container {

width:918px;

height:110px;

margin-left:auto;

margin-right:auto;

}

This should get you closer.

[grovesk]

ah.. you have fixed it. You should still clean up that table.

[TreeTopStudio]

As a place to start…

If you have to use tables. You’ll have to combine the two cells with logo and search into one, wrap content in a DIV, apply a class or ID to image and search form (looks like you already have) and apply css styles for positioning that use % instead of inline styling applied to table cell.

Specifying a % for positioning will allow the logo and search field to reposition based on the width of browser window.

[Author]

Posts