CODEWITHSUNDEEP
htmlcss
Xehara
Xehara

Reputation: 33

Layering Multiple Divs

Mock Up Image

Live Preview

I am attempting to code the above image for a tumblr theme. I am running into issues with the initial set up of the textured strip and the header plaque in the center. It isn't something that can be a body background as I plan for a div to be under and over it as the picture shows. When I add in top: 39px for the strip, and top: 18px for the plaque, it only top aligns 18pxs. Furthermore, the strip is not extending the full width of the page.

This is my current coding for the strip, plaque, and editable header without metas applied:

#bgstrip {
        background-image:url('http://static.tumblr.com/gxcukg0/b4un4hotv/bg-strip.png');
        background-repeat: repeat-x;
        background-position: center;
        height: 53px;
        width: 105%;
        left: 0;
        z-index: 95;
    }

#blogtitle {
        color: #553030;
        font-family: 'Dr Sugiyama', 'cursive';
        font-size: 72px;
        text-align: center;
        z-index: 105;
    }

#header {
        background-image:url('http://static.tumblr.com/gxcukg0/F3Tn4hn9n/plaque.png');
        background-repeat: no-repeat;
        background-position: center;
        z-index: 100;


<div id="bgstrip">
        <div id="header">
            <div id="blogtitle">{Title}</div>
        </div>
        </div>

Upvotes: 2

Views: 78

Answers (1)

random_user_name
random_user_name

Reputation: 26160

To get full width, take the margin off your body:

body, html {
    margin: 0;
}

Then, below is one way to achieve what you want (there are others, but this is the simplest to achieve given your current markup / css):

Don't position the bgstrip with left unless you've given it position: absolute. It'll be left: 0 on it's own.

In order to make the contents push / pull with top margin, we also need to give it a bit of top padding. So, we need to give it a touch of padding-top.

#bgstrip {
    background-image:url('http://static.tumblr.com/gxcukg0/b4un4hotv/bg-strip.png');
    background-repeat: repeat-x;
    background-position: center;
    height: 53px;
    z-index: 95;
    padding-top: 1px;  
    margin-top: 25px;
}

Then, to get the center badge where you want it, use negative top margin, like so:

#blogtitle {
    color: #553030;
    font-family: 'Dr Sugiyama', 'cursive';
    font-size: 72px;
    text-align: center;
    z-index: 105;
    margin-top: -25px; 
}

Upvotes: 2

Related Questions