Как сделать так, чтобы заголовок сайта был таким же низким, как логотип? - PullRequest
Новая
       3

Как сделать так, чтобы заголовок сайта был таким же низким, как логотип?

1 голос
/ 01 октября 2011

Я только что изменил некоторые стили и сломал свой сайт :) и не очень понимаю, как его вернуть.

Я поставил новое изображение в качестве логотипа. До этого был крупный шрифт. И теперь div заканчивается внизу другого текста, а не внизу логотипа.

Посмотрите, как это сломано здесь: http://www.problemio.com - см. В самом верху - мне нужно, чтобы div распространялся до нижней части изображения слева.

Вот мой 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
}

и вот HTML-код, который я использую: 

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

        </div>
    </a>

И я пытаюсь, чтобы изображение появилось в названии сайта div. Я думаю, что я должен использовать тег img, верно? Как мне улучшить мои стили?

Спасибо, Alex

1 Ответ

1 голос
/ 01 октября 2011

Вы не устанавливаете высоту в своих banner или site_title div, поэтому они будут только такими же высокими, как и элементы внутри них, которые в случае banner div выглядят как текст ссылки.

В своем коде CSS вы устанавливаете background-url внутри классов .banner и .site_title. Это избыточно и может привести к тому, что вещи будут выглядеть странно, если вы дадите только один из элементов div. Почему бы не избавиться от site_title div и просто сделать его изображением? Это также должно исправить ваши проблемы с ростом.

...