WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Keeping the wrapper from the header section? (39 posts)

  1. webDressing
    Member
    Posted 7 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?

  2. Doodlebee
    Member
    Posted 7 years ago #

    put the header outside of the wrapper.

    That's the best guess. Without a link to *see* it - all you're gonna get is guesses.

  3. webDressing
    Member
    Posted 7 years ago #

    Here's a screenshot which explains more. What do you mean by "put the header outside of the wrapper"?

    The corners of the header need to be transparent so that the background shows through, but instead of the background showing through, the wrapper is. I don't understand why the wrapper goes to the top of the page anyway. Shouldn't it stop (or start) at the bottom of the header?

  4. Doodlebee
    Member
    Posted 7 years ago #

    Well, again, actually seeing code would help, because I'm just *guessing* at what you're doing. but I imagine that your source code looks something like this:

    <div id="wrapper">
    <div id="header"
    header image here
    </div>
    <div id="content">
    content here
    </div>
    </div><!-- closing wrapper -->

    If that is so, then move the header outside of the wrapper:

    <div id="header">
    header image gere
    </div>
    <div id="wrapper">
    <div id="content">
    content here
    </div>
    </div>
  5. webDressing
    Member
    Posted 7 years ago #

    That works, except it left aligns everything (even though its set for center).

    </head>
    <body>
    <div align="center" id="header">
    <h1>"><?php bloginfo('name'); ?></h1>
    <p><i><?php bloginfo('description'); ?></i></p>
    </div>
    <div id="wrapper">

    <div id="content">

    You can see it here

  6. jabecker
    Member
    Posted 7 years ago #

    I think you need to keep the header inside the wrapper because it's the wrapper that provides the right and left margins and holds everything together.

    I would try adding a break between the header and the content so that the content is pushed down and doesn't float up behind the header. That would be something like this:

    <div id="wrapper">
    <div id="header">
    here's your header stuff
    </div>
    <br style="clear:both"/>
    <div id="content">
    the main column stuff
    </div>
    <div id="sidebar">
    sidebar stuff
    </div>
    </div>

  7. Root
    Member
    Posted 7 years ago #

    Good luck with your new theme guys. :)

  8. webDressing
    Member
    Posted 7 years ago #

    "I would try adding a break between the header and the content so that the content is pushed down and doesn't float up behind the header."

    Tried that, didn't work :( The wrapper is what's causing all of the problems. It's also causing the same problems in the footer. There doesn't seem to be any rhyme or reason to the wordPress way of making themes :(

    @Root - Thanks! It's very frustrating and 'luck' seems to be the only way to make a wordPress theme work :p

  9. jabecker
    Member
    Posted 7 years ago #

    It looks like you had it working pretty well just a minute ago, although you are using #page as, essentially, a wrapper.

    The little purple corners that are showing up at the upper right and left of your heading are in the image. jpg files do not have any transparency. You need to use a .gif or a .png (nicer but not all browsers will render transparent).

    If you use Firefox, I suggest you download the web developers extension. It can be very helpful in determining how your code is being interpreted.

  10. webDressing
    Member
    Posted 7 years ago #

    I was getting no where fast with that theme and so we decided to switch to the default theme and customize it. Unfortunately they use a jpg file so we switched to a jpg version of our header (that's why you see the corners now). Once we iron out all of the header problems we will find a way to convert the header.php file to accept gifs. However now it seems that our server is down so we can't access anything or work on the site (it's always something going wrong :p). There's a lot of bad CSS in the default theme so maybe we should spend this time fixing those while we're waiting for the server to get back online.

  11. jabecker
    Member
    Posted 7 years ago #

    Instead of trying to customize the default theme, may I suggest looking in the theme viewer for something close to what you want and modifying that?

    There are all kinds of challenges with Kubrick. I wouldn't start there if I were you.

  12. webDressing
    Member
    Posted 7 years ago #

    We've tried 4 or 5 themes so far, and they all have the same problem. The wrapper goes into the header and the footer area. We tried the theme viewer but all of the preview boxes were blacked out.

  13. vkaryl
    Member
    Posted 7 years ago #

    The preview boxes will show thumbs beginning about page 4. The previews are still available if you click on the black boxes.

  14. Root
    Member
    Posted 7 years ago #

    Yup. That's it. You need a lot of luck to put a theme together. :)

  15. Doodlebee
    Member
    Posted 7 years ago #

    Sorry I'm late on this...

    That works, except it left aligns everything (even though its set for center).

    You're probably viewing it in IE. That means you have to set your body in the CSS to "text-align:center". Then put in a div call in the CSS to "text-align:left", so your text will not all center.

    I think you need to keep the header inside the wrapper because it's the wrapper that provides the right and left margins and holds everything together.

    Not necessarily. I've done LOTS of sites that need to be centered, and the header isn't contained in the wrapper - for a myriad of reasons. The only real reason the header should be contained is simply for convenience. Or if you're positioning it absoultely within a relative container (like for source-ordering).

    There doesn't seem to be any rhyme or reason to the wordPress way of making themes :(

    That's just nonsense. You should make your site design *outside* of WordPress. Make it look just like you want it to. After you've done that, you just need to put in the WP tags. Make some CSS adjustments for WP (usually only for lists and text within a div), and that's that. WP can do anything you want it to. The way you make the theme is split up your design into header, sidebar, content and footer. Thats' it. *You* do the rest. WordPress just put it together however you tell it to.

    You need a lot of luck to put a theme together. :)

    No you don't.

    Making a theme really isn't that difficult. If you've ever made your own website design, you can make a theme. It's easy. (If you haven't - *that* is when it gets hard.)

    As I posted in the other thread you were involved in, web, I have a tutorial that shows you this on my site.

  16. webDressing
    Member
    Posted 7 years ago #

    "You're probably viewing it in IE."
    Nope. We either use FF or Safari. The only time we use IE is to double check a design before we release it. IE is the Kubrick of browsers :p

    The theme we're working on now is fairly good (aside from all the bad CSS they used). The only problem that we're having is that they put the footer in the page section so of course the footer doesn't display correctly. We're going to move the footer where it belongs and 'hopefully' that should fix the theme. If it doesn't then we're just going to start from scratch and write our own.

  17. Root
    Member
    Posted 7 years ago #

    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. :)

  18. webDressing
    Member
    Posted 7 years ago #

    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.

  19. Root
    Member
    Posted 7 years ago #

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

  20. jabecker
    Member
    Posted 7 years ago #

    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.

  21. webDressing
    Member
    Posted 7 years ago #

    "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;
    }

  22. Doodlebee
    Member
    Posted 7 years ago #

    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.

  23. webDressing
    Member
    Posted 7 years ago #

    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 :)

  24. jabecker
    Member
    Posted 7 years ago #

    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.

  25. webDressing
    Member
    Posted 7 years ago #

    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 :)

  26. jabecker
    Member
    Posted 7 years ago #

    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.

  27. webDressing
    Member
    Posted 7 years ago #

    " 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.

  28. vkaryl
    Member
    Posted 7 years ago #

    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;
    }
  29. jabecker
    Member
    Posted 7 years ago #

    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.

  30. webDressing
    Member
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.