Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS newbie page centering for hard-to-tile backgrounds

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #34818
    houseofgrays
    Member

    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

    #89264
    grovesk
    Member

    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

    #89267
    houseofgrays
    Member

    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

    #89271
    houseofgrays
    Member

    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.

    #89272
    grovesk
    Member

    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



    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.

    #89273
    grovesk
    Member

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

    #89274

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.