2201 posts
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
  • Netherlands
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
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.
1478 posts The right tools with none of the gimmicks
  • Sold between 50 000 and 100 000 dollars
  • Elite Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • United States
+1 more
PixelBin says

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

415 posts
  • Bought between 1 and 9 items
  • Europe
  • Exclusive Author
  • Has been a member for 5-6 years
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
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
  • Netherlands
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
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.

by
by
by
by
by
by