Question

I am new to design and layout and I was given this wireframe:

http://problemio.com/problemionewest.pdf

and I have to make the grey border extend the entire width, and the logo to be vertically centered.

Right now I have this lol: http://www.problemio.com – the banner extends all the way across, but there is an ugly vertical line on the right side of it because of the repeat. And also, I am not sure how to make the logo image be centered. The original image is a bit large, so I need to make it some percentage of the original and align center it vertically.

Any ideas how I can do these?

Thanks!

Answer 1

You need to do the following:

1. set a new height on the .banner I choose 70px

2. give .banner a background-size:100%

3. remove vertical-align from .site_title and add margin-top: -15px;

CSS

.banner {
   position: relative;
   height: 70px;
   z-index: 1;
   border-style: solid;
   border-width: 1px;
   border-color: gray;
   background-image:url('http://www.problemio.com/img/ui/banner_background.png');
   background-size: 100%;
}

.site_title {
   float: left;
   margin-top: -15px;
   margin-left: 20px;
   width: 300px;
}