изменить цвет фона div при нажатии кнопки

0

Я проектирую интерфейс и здесь я не могу отформатировать его должным образом.
Две вещи, которые я не могу сделать:

  1. left-1, left-2, left-3.. текст начинается в нижней части изображения кнопки. Я хочу, чтобы они оказались справа от изображения?
  2. Как только я нажму кнопку слева, можно изменить цвет фона, в котором размещено изображение и текст (т.е. для левого-1 и левого-2)?

Как я могу это понять.

Код: -

<!DOCTYPE html>
<html style="height: 100%;">

<head>
<style>
body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
}
.input {
    display: inline-block;
    padding: 0 2px;
}
.input input {
    display: block;
}
.imgtxt {
    margin: 0;
    font-family:arial;
    color:#DDDFED;
    font-size:15px;
}
#images {
    background-color:#888686;
    white-space:nowrap;
}
div.scrollable {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableMenu {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

#Menu {
    background-color:#292B3B;
    position:absolute;
    top:124px;
    bottom:20px;
    left:0;
    width:200px;
}
#center {
    background-color:#eeeeee;
    position:absolute;
    top:124px;
    left:200px;
    right:0px;
    bottom:20px;
}
#fotter {
    background-color:#CC99FF;
    text-align:center;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}
</style>
</head>

<body >


<body>
    <div id="images" class="scrollable">
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-1</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-2</p>
            <hr style="border-color:#DDDFED; background-color:#00FF00;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-3</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-4</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-5</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-6</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-7</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-8</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-9</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-10</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-11</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-12</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-13</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-14</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-15</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-16</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-17</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-18</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-19</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
    </div>
    <div id="Menu" class="scrollableMenu">
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" hspace="10"/>
            <p class="imgtxt" style="padding-left : 16px;">Left-1</p>
        </div >
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-2</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-3</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-4</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-5</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-6</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-left : 16px;" >Left-7</p>
        </div>
        <hr/>
    </div>
    <div id="center">Table center</div>
    <div id="fotter">Copyright  2014 My First Layout</div>
</body>

</body>
</html>

Изображение 174551

  • 0
    Вы можете создать jsfiddle для этого?
  • 0
    456bereastreet.com/archive/200711/...
Показать ещё 1 комментарий
Теги:

4 ответа

0

Поскольку другие люди ответили тем, что я предложил бы, я думал, что Id напишет что-нибудь полезное.

Почти каждый тег, отличный от <DIV> и <SPAN> автоматически возвращает результат.

Пример:

    <h1>Title</h1>
    <p> Hello </p>

Слово Hello всегда будет ниже заголовка, потому что есть автоматический возврат <br/> на <H1>

Использование Float: в вашем CSS это позволит избежать этого.

Поделиться
0

Часть 1: для размещения текста вправо вы можете использовать свойство float css

Часть 2: и для изменения цвета вы можете использовать, например, Jquery.

Код (я не использую правильные идентификаторы. Просто даю базовую идею, что может решить ваши проблемы...)

Код Css для части 1:

input {
float:left;
clear:both;
}

.imgtxt {
float:right;
}

Код JQuery для части 2:

$("button").clicked(function() {
    $("#Your-Div-to-change-color").css({'background':'#ddd'});
})
Поделиться
0

Вы можете использовать родительский метод jquerys для получения узла, который был нажат. Добавьте класс css, например,

JS

$('.input input').click(function (){
  $(this).parent().addClass('selected');

});

CSS

.input.selected{
  background-color: pink;
}
Поделиться
0

Для левого-1, левого-2, левого-3.. текста...

Просто плавайте вещи. Для экземпляра присвойте ширину изображению или другому контейнеру [при любом использовании u], а также поместите текст..... Имейте в виду ширину..... и также очищайте элемент float после Text.

Например

#menu > div > input {
  width:50%;
  float:left;
}

[или подходит для себя, но не оставил ширину изображения и текста на 100%] 

#menu > div > p.imgtxt {
  width:50%;
  float:left;
}

#menu > div:after {
  clear:both;
}

ИЛИ

#menu  hr {
  clear:both;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню