Помогите составить структуру div

[heratz]

Добрый день
Есть вот такой css class

.placeholder-panel .available-construction LABEL.iron-mine, .right-panel .building-info-panel LABEL.iron-mine {
    background-image: url(iron-mine.jpg)
}

Помогите с него составить структуру div-ов


Как это выглядит в живую

На 55 секунде с права видно, что должно получиться ("Select Building") там изображение и т.д.

Как бы у меня есть весь готовый css, но все страницы для примера не успел взять) вот осталось сделать часть которая на видео справа, сам я не front-end разработчик, не могу разобраться с этим, если вы поможете, остальное пойдет полегче.

Я так понимаю приведенный мной класс отобразит только изображение, но дальше как и писал возможно сам уже справлюсь) Заранее спасибо

Если по куску кода Вам потребуется еще, что либо из классов я Вам предоставлю)

[spacema77]

Приветствую. Можно ли чуть по-подробнее. Откуда берется css ?

В данном случае css можно переписать в виде

.placeholder-panel .available-construction LABEL.iron-mine{
background-image: url(iron-mine.jpg)
}

.right-panel .building-info-panel LABEL.iron-mine {
background-image: url(iron-mine.jpg)
}

То есть фоновая картинка задается для двух элементов

[heratz]

Приветствую. Можно ли чуть по-подробнее. Откуда берется css ?

В данном случае css можно переписать в виде

.placeholder-panel .available-construction LABEL.iron-mine{
background-image: url(iron-mine.jpg)
}

.right-panel .building-info-panel LABEL.iron-mine {
background-image: url(iron-mine.jpg)
}

То есть фоновая картинка задается для двух элементов

Спасибо за ответ
Css это с готового проекта)
Я пробую портировать себе это дело, но без успешно, картинку портировать мало, там куча всего другово еще(

[heratz]

Вообще для меня странно

.building-info-panel LABEL.iron-mine

т.е. для этого элемента может быть фоновое изображение
Но таких элементов может быть много(с разными изо)

Но как бы по названию это panel т.е. в одном экземпляре) эх, не понятно

[heratz]

Вот попытался накидать структуру (по логичным названиям классов)

<div class="right-panel">
                    <div class="body">
                        <div class="building-info-panel">
                            <div class="building-details-dlg">
                                <div class="building-description">
                                    <label class="radium-mine"> </label>
много текста
<table>
                                        <tr>
                                            <td>
                                                <span class="resource iron">53</span>
                                            </td>
                                            <td>
                                                <span class="resource iron">53</span>
                                            </td>
                                            <td>
                                                <span class="resource iron">53</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <span class="resource population">53</span>
                                            </td>
                                            <td>
                                                <span class="resource time">53</span>
                                            </td>
                                        </tr>

                                    </table>

Но не сработало как надо building-details-dlg может иметь scrollable, но его нет)))

Если кто сможет помочь разобраться, могу стили для данных классов выложить