<TD> Ячейка не показывает фоновые изображения - PullRequest
Новая
       16

<TD> Ячейка не показывает фоновые изображения

2 голосов
/ 21 января 2012

У меня есть код для таблицы, и у меня есть три ячейки в нем. Я хочу, чтобы каждая ячейка имела разные фоновые изображения. Но проблема в том, что только первая ячейка показывает изображение! Пожалуйста помоги! Мой код:

Я изменил ширину #topbar td!

Успешный код: 

#topbar {
        width: 100%;
        color: transparent;
        font-size: 13px;
        border-spacing: 0px;
        white-space: nowrap;
    }
    #topbar td {
        width: 8.33333%;
        margin: 0px;
        padding: 0px;
    }
    #topbar td {
        height: 15px;
        margin: 0px;
        background-color: transparent;
        white-space: nowrap;
        cursor: pointer;
    }
    #topbar td:hover {
        background-color: transparent;
    }
    #topbar td.selected {
        font-weight: bold;
        color: #FFFFF;
    }
    #topbar td.empty {
        cursor: auto;
    }
    #topbar td.empty:hover {
        background-color: #2d2d2d;
    }
    #topbar td span {
        display: image;
    }

СТАРЫЙ КОД В шапке 

#topbar {
    width: 100%;
    color: transparent;
    font-size: 13px;
    border-spacing: 0px;
    white-space: nowrap;
}
#topbar td {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#topbar td {
    height: 15px;
    margin: 0px;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}
#topbar td:hover {
    background-color: transparent;
}
#topbar td.selected {
    font-weight: bold;
    color: #FFFFF;
}
#topbar td.empty {
    cursor: auto;
}
#topbar td.empty:hover {
    background-color: #2d2d2d;
}
#topbar td span {
    display: image;
}

В теле: 

<table id="topbar">
    <tr>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBarMain.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar2.png) no-repeat">
    </tr>
</table>

Ответы [ 2 ]

2 голосов
/ 21 января 2012

Отображаются все изображения, все они расположены друг над другом, поэтому вы можете видеть только первое.

Не знаю, как вы хотите, чтобы они отображались, но добавление правила display:block; к #topbar td не позволит им находиться друг над другом

РЕДАКТИРОВАТЬ : Если вы хотите показать их в одной строке, вам нужно будет указать значение ширины для каждого из элементов TD. Установленное в настоящее время значение 100% занимает весь экран, поэтому затемняются другие элементы TD.

Пример: http://jsfiddle.net/mZEWN/

0 голосов
/ 21 января 2012

Попробуйте закрыть свой TD balise: 

<table id="topbar">
    <tr>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBarMain.PNG) no-repeat"/>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar.PNG) no-repeat"/>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar2.png) no-repeat" />
    </tr>
</table>
...