CODEWITHSUNDEEP
htmlcsslayout
GeekedOut
GeekedOut

Reputation: 17185

Top banner image needs to be half the width of the screen and breaking the top of my page

I am working on this site: http://www.problemio.com and I am supposed to make a background image for half of the width of the screen for the very top of the page with the links for log-in, sign-up, etc. and make those links appear on the right side bottom of the banner border.

I tried giving it this css:

.banner 
{
    position: relative;
    height: 80px;

    /* These paddings increase the height padding a little bit */
/*  padding-top: 10px;
    padding-bottom: 5px; */
    z-index: 1;

    border-style:solid;
    border-width:1px;   
    border-color: gray;
}

.site_title 
{
    float:left; 

    margin-top: 10px;
    margin-left: 20px;

    font-weight: bold;
    color: #ffce2e;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    font-size:2.5em;
    text-align: left
    text-color: black;
    width: 300px;
}

.site_login 
{
    width: 700px;
    float:right; 
    height: 80px;
    position: absolute;
    right: 0.5em;
    top: 0.5em; 
    bottom: 0.5em; 

    color: black;

    text-align: right;
    text-align: bottom;

    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
    background-repeat: no-repeat;
    background-position: right;

        margin-top: 10px;
    margin-left: 20px;
}

but for some reason I can not get the log-in, create-profile text to get aligned to the bottom instead of the top. And for some reason the image does not fit perfectly into the borders of the banner div.

How could I accomplish those two things?

Thanks!!

Upvotes: 1

Views: 1051

Answers (1)

mowwwalker
mowwwalker

Reputation: 17362

You can make a new div inside the banner div like:

.bgdiv{
    position:absolute;
    right:0px;
    left:240px;
    top:0px;
    bottom:0px;
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
    background-repeat: no-repeat;

}

...and for the site login:

.site_login 
{
    width: 700px;
    float:right; 
    position: absolute;
    right: 10px;
    bottom: 10px; 

    color: black;

    text-align: right;
    text-align: bottom;

}

Which produces:

enter image description here

Upvotes: 1

Related Questions