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 - 1 through 15 (of 38 total)
  • Doodlebee

    (@doodlebee)

    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.

    Thread Starter webdressing

    (@webdressing)

    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?

    Doodlebee

    (@doodlebee)

    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>
    Thread Starter webdressing

    (@webdressing)

    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

    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>

    Good luck with your new theme guys. ??

    Thread Starter webdressing

    (@webdressing)

    “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

    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.

    Thread Starter webdressing

    (@webdressing)

    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.

    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.

    Thread Starter webdressing

    (@webdressing)

    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.

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

    Yup. That’s it. You need a lot of luck to put a theme together. ??

    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.

    Thread Starter webdressing

    (@webdressing)

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

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