Проблема размещения логотипа и баннера в Firefox с помощью CSS - PullRequest
Новая
       11

Проблема размещения логотипа и баннера в Firefox с помощью CSS

1 голос
/ 10 ноября 2009

Я хочу использовать CSS в Firefox для отображения логотипа и флеш-баннера на моем сайте.

Логотип должен быть размером 250 X 250 и баннер 800 X 250. Оба должны отображаться в одном ряду.

Вот мой текущий CSS: 

#logo{
    background:#FFFFFF;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 200px;
}

#Banner{
    background: #1071A6;
    position:absolute;
    left: 250px;
    top: 200px;
    width: 850px;
    height: 250px;
}

К сожалению, баннер отображается внизу логотипа.

Есть предложения о том, как правильно расположить эти элементы?

Ответы [ 4 ]

5 голосов
/ 10 ноября 2009

Сделать это: 

#logo {
    background:#FFFFFF;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 200px;
}

#Banner {
    background: #1071A6;
    position:absolute;
    left: 250px;
    top: 0px;
    width: 850px;
    height: 250px;
}

Должно быть top: 0px; на обоих.

0 голосов
/ 10 ноября 2009

Я бы сделал разметку так: 

<div id="Header">
    <div id="Banner"></div>
    <div id="logo"></div>
    <div style="clear:  both;"></div>
</div> <!-- /Header -->

И CSS вот так. 

#Header {
    width:  1120px;
}

#logo {
    position:  relative;
    float:  left;
    width:  250px;
    height:  200px;
    margin:  0;
    border:  1px solid blue;
}

#Banner {
    position:  relative;
    float:  right;
    width:  850px;
    height:  250px;
    margin:  0;
    border:  1px solid red;
}
0 голосов
/ 10 ноября 2009

Возможно также, что его внешний контейнер имеет ширину менее 1100 пикселей. Необходимо также учитывать отступы и отступы.

0 голосов
/ 10 ноября 2009

Вот, пожалуйста, 

<html>
<head>
    <style type="text/css">

    #logo{
        background:#FFFFFF;
        position:absolute;
        left: 0px;
        top: 0px;
        width: 250px;
        height: 250px;
    }

    #Banner{
        background: #1071A6;
        position:absolute;
        left: 250px;
        top: 0px;
        width: 850px;
        height: 250px;
    }
    </style>

</head>
<body>
<div id ="logo"> 
</div> 
<div id="Banner">
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...