Keeping the wrapper from the header section?

  • Resolved webdressing

    (@webdressing)


    18 years ago

    We are working on our first theme. The problem that we’re having is that the wrapper image is going all the way up to the top of the page.

    How do we limit the wrapper from going into the header area?

Viewing 15 replies - 16 through 30 (of 38 total)

  • You seem to be defining your choice in terms of either finding a layout you like or writing your own. It does not matter where the wrapper starts or stops. JUst move it. ??

    Thread Starter webdressing

    (@webdressing)

    Tried that before. Didn’t work. All we need to do right now is figure out why the footer won’t center, and figure out why the header has red text when it’s coded for black. The other problems have been resolved.

    You have tried something and it didn’t work? Heck…………..

    As doodlebee suggested, put text-align:center on the body. Also, you need to put the color on #header h1 a in order to make your header text black.

    Thread Starter webdressing

    (@webdressing)

    “put text-align:center on the body.”
    We’re not trying to align the text, we’re trying to align the image for the footer. This is what we tried so far:

    Aligning the footer.php div:

    </div>
    <div id=”footer” align=”center”>
    bla bla bla
    </div>
    </body>
    </html>

    Postitioning the image:

    #footer {
    margin: 0px;
    padding: 20px 0px 0px 0px;
    width: 900px;
    height: 106px;
    background: url(images/footer.gif) no-repeat;
    background-position: center top;
    text-align: center;
    font-style: italic;
    text-decoration: none;
    }

    …none of these worked.

    “you need to put the color on #header h1 a in order to make your header text black.”

    Yep that’s where it is. The weirdest part about it is that in Safari it shows up red, and in FF it shows up purple.

    #header h1 {
    margin: 0;
    padding: 45px 0 0 0px;
    color: #000000;
    font-size: 2em;
    text-align: center;
    line-height: 40px;
    }

    Here a really crazy idea – I mean, it’s really insane, so try not to be utterly shocked…

    But hey, how about giving us an actual *link* to the site so we can stop *guessing* at what the problem is?

    I know, I know…it’s so out there. I mean, who needs to see code to see what’s going on? I mean, hell, that’s like a heart surgeon performing surgery by poking the patient’s chest with a stick. Eventually, you might get something that works.

    Thread Starter webdressing

    (@webdressing)

    We’ve already posted it like 3 or 4 times already doodlebee. Sorry we thought you would just get it from one of the other threads that it’s been in. Here it is here. Thanks ??

    We’re not trying to align the text, we’re trying to align the image for the footer.

    Crazy as it may seem, try putting “text-align:center” on the body. Just try it. Putting it on the footer will do nothing but align the text inside the footer. You need to put it on something outside the footer so that the footer itself gets aligned.

    #header h1 {

    I should have written that more carefully. You need this:

    #header h1 a {
    color: #000000;
    }

    See the “a” — the header text is turning red (or purple) because it’s a link.

    Thread Starter webdressing

    (@webdressing)

    Thanks Jabecker, the header is fine now. I just have to figure out what they’re calling the tag line and it should be all finished. Shouldn’t be too hard. Thanks ??

    “Crazy as it may seem, try putting “text-align:center” on the body. Just try it. “

    Tried it. Guess what? It centered the text, not the footer :p

    But all is not lost. I read where the next version of CSS is doing away with image tags and they’re going to treat them as elements. I wonder if I do that to the body if it will work. I will keep playing around with it. Thanks again for your help Jabecker ??

    webDressing, your page has this structure:

    <body>
    <div id="page">
    <div id="header"> header stuff </div>
    <div id="container">
    <div id="content"> post stuff </div>
    <div id="sidebar"> sidebar stuff </div>
    <div class="clear"></div>
    </div> <!-- end of container -->
    </div> <!-- end of page -->
    <div id="footer"> footer stuff </div>
    </body>

    You might try changing the last few lines so it looks like this:

    </div> <!-- end of container -->
    <div id="footer"> footer stuff </div>
    </div> <!-- end of page -->
    </body>

    “page” is essentially acting as a container. I think if you put footer within page then it will center the footer correctly. I think that’s why the header centers and you just need to do the same thing with the footer. I could be wrong. But I would try that.

    Thread Starter webdressing

    (@webdressing)

    ” I think if you put footer within page then it will center the footer correctly. “

    Well yes we already tried that, but that then causes several other problems. The page then overlaps the top of the footer. Also the footer sometimes hides behind the page (the container) so essentially it doesn’t display at all when it’s added to the page section.

    So when you say “the page overlaps the top of the footer”, you mean you’re seeing page content in the footer?

    One normally handles that with a <br class="clearA" />, where .clearA is declared in the stylesheet as:

    .clearA {
	overflow: hidden;
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
}

    webDressing, I think it would be helpful if you tried it again so we can see what’s happening. I agree with vkaryl that the clear should work.

    Thread Starter webdressing

    (@webdressing)

    OK I added it back to the page section. When the page first starts to load you’ll now see it behind the page at the bottom. I tried various places to add <br class=”clearA” /> in the index.php file but nothing seened to work.

    I followed your link and the version I looked at still had “footer” outside of “page”. The background image for the footer is missing from the css now, but other than that it looks pretty much the same as the last time I looked at it.

    Sorry, but I’m not seeing that you made any changes.

Viewing 15 replies - 16 through 30 (of 38 total)
  • The topic ‘Keeping the wrapper from the header section?’ is closed to new replies.