2201 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Had an item featured in an Envato Bundle
  • Has collected 1+ items on Envato Market
+4 more
ArikB says

Okay so straight off the bat. I am customizing the thesis theme.

Now, here’s what I want to do. I’ve set up a div that stretches across the entire screen and then I want to add a logo, navigation and search into that. I’ve set up a separate div for that. I want the width of this to match the width of container that contains the whole layout after that, screen of how it looks now:

http://docs.google.com/View?id=drp9383_1qxnq77dm

As you can see, the first list (ignore the second list, that’s a different thing altogether) is all the way to the left of the browser window. I want it to lign up with the rest of the body.

The reason why I am doing this div in div thing is because thesis has a setup that looks like this:

<body>
    <div id="container">
        <div id="page">
</div></div></body>

And the container has a width set on it, to contain the whole page. The issue here is that if I put MY header container inside the container div (or page div) it’s going to cascade and restrict the width. So I had to use a hook, to hook it BEFORE the container div and JUST after the body tag.

Which looks like this:

function header_container() {
?&gt;
<div id="header_container">     <!--container-->
    <div id="lns">                <!-- 960px wide container for logo-nav-search -->
        <img src="custom_images/logo.png" alt="Stimulivity" />
    <!-- end logo -->
    <!-- start nav -->
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    <!-- end nav -->
    <!-- start search -->
    </div>

</div>
<!-- end header -->

&lt;?php }
add_action('thesis_hook_before_html','header_container');
// END 
</pr?&gt;

As you can see it's not finished yet, I know it's a bad practice, but if I can't position it then this entire approach is futile.

My css:

<pre>
#header_container {
    width: auto;
    height: 7.2em;
    margin:0 auto;
    background: rgb(0, 0, 0); /*fallback color*/
    background: rgba(0, 0, 0, 0.8);

}

#lns{
overflow: hidden;
height: 100%; /* IE 6 Hack*/
width:980px;
position: absolute;
margin: 3em 50%;
}
</pre>

While the #header_container is good, the #lns is pretty much a lot of guesswork.

I figured at first that maybe I could put the lns inside the body container (with the set width) and then use position:relative along with z-index property to set it up, but that doesn't seem to work and it doesn't seem very elegant either.

I hope this isn't too confusing.

Note: I understand I could include the 80% black in the bg png and then save all of this headache, but I really want to have that transparent box there.
1479 posts The right tools with none of the gimmicks
  • Has referred 50+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+6 more
PixelBin says

I like that COD4 icon. :) Sorry, completely off-topic.

415 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
osigrandi says

Um….try not to use position:absolute unless it’s really necessary…I’m not familiar with the Thesis theme, but hopefully there is a way to position your layer(s) without using position absolute.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

You just need to give header_container position:relative.

If you give position:absolute to a child alement that sits inside the parent container which is not positioned, the element will be absolutely positioned to the body element.

2201 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Had an item featured in an Envato Bundle
  • Has collected 1+ items on Envato Market
+4 more
ArikB says
You just need to give header_container position:relative. If you give position:absolute to a child alement that sits inside the parent container which is not positioned, the element will be absolutely positioned to the body element.

That won’t help, it positions the lns div with the container, which in term stretches the entire screen. However, I want the contents of LNS to fixed to the width of the page or container div.

Right now it’s:

Body
    header_container
        lns
    container
        page

In order for me to achieve what I want, I would need the lns to be inside the container div, however, this will cause for the contents of the lns div to be set below the header_container div.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by