Question

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!!

Answer 1

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: