Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Помогите составить структуру div (https://javascript.ru/forum/xhtml-html-css/73806-pomogite-sostavit-strukturu-div.html)

heratz 17.05.2018 09:22

Помогите составить структуру div
 
Добрый день
Есть вот такой 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 20.05.2018 22:09

Приветствую. Можно ли чуть по-подробнее. Откуда берется 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 21.05.2018 06:19

Цитата:

Сообщение от spacema77 (Сообщение 485698)
Приветствую. Можно ли чуть по-подробнее. Откуда берется 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 21.05.2018 07:28

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

.building-info-panel LABEL.iron-mine


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

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

heratz 21.05.2018 07:35

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

<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, но его нет)))

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


Часовой пояс GMT +3, время: 06:47.