Question

I just changed some styling and broke my site 🙂 and have not much clue how to set it back.

I put a new image as the logo. Before it was large-font text. And now the div ends at the bottom of other text and not at the bottom of the logo.

See how it is broken here: http://www.problemio.com – see on very top – i need to make the div extend to the bottom of the image on the left.

Here is my css:

.banner 
{
    width:60em;
    margin: 0 auto;
    position: relative;
    padding: 0.3em 0;
    z-index: 1;
}

.banner .site_title 
{
    background: url("http://www.problemio.com/img/ui/problemio.png") no-repeat scroll 0 0 transparent;
    padding:5px 60px;
    font-weight: bold;
    color: #ffce2e;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    font-size:2.5em;
    text-align: left
}

and here is the HTML I use:

<div class="banner">
<!--  title and login/sign up go here -->
    <a href="http://www.problemio.com">
        <div class="site_title">

        </div>
    </a>

And I am trying to make the image appear in the site title div. I think I should use the img tag, right? How should I augment my styles though?

Thanks,
Alex

Answer 1

You’re not setting a height on your banner or site_title divs, so they are only going to be as high as the elements inside them, which in the case of the banner div appears to be text links.

In your CSS code, you’re setting the background-url inside both the .banner and .site_title classes. This is redundant and can lead to things looking weird if you give only one of the divs a margin. Why not get rid of the site_title div and just make it an image? This should fix your height issues as well.