Войти
ПрограммированиеФорумВеб

css траблы с тулзой к eve online

#0
18:15, 7 мар. 2018

https://www.dropbox.com/s/qmfe8gus0ccgnbb/Screenshot%202018-03-07… 5.14.png?dl=0

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

html темплейт:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{{url_for('static', filename='js/main.js') }}"></script>
    <style>
.container{
            max-width: 650px;
}
.stripe{}
.stripe :nth-of-type(2n) :only-child {
        background: #aaaaaa;
}
    </style>
</head>
<body>

<div class="container" width="300px">
    <h4>Выберите Продукт</h4>
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds">
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">Новые продукты</div>
        <div class="panel-body stripe" id="log">
            {% for entry in entries %}
            <div class="row">
                <div class="col-lg-9">
                    <div data-product-id="{{entry.product_id}}"
                         onClick='$("#post_product_id").val($(this).attr("data-product-id"));
                        document.forms["invisible_form"].submit(); return false;'>{{entry.names.name}}
                    </div>
                </div>
                <div class="col-lg-2">
                    Delete
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<form id="invisible_form" action="/product_detail.html" method="post" target="_blank">
    <input id="post_product_id" name="product_id" type="hidden" value="default">
</form>
</body>
</html>

чяднт?


#1
20:28, 7 мар. 2018
.stripe :nth-child(2n) {...}
Было бы неплохо или цвет этот помягче сделать, или цвет текста под ним сделать белым.
#2
8:15, 8 мар. 2018

dayllenger
> :nth-child(2n)

https://www.dropbox.com/s/inu8yy9d7dz5059/Screenshot%202018-03-08… 1.35.png?dl=0

теперь все delete окрасились

а пример цвета помягче можно?

и все таки, как полностью каждый четный ряд окрасить?

#3
11:32, 8 мар. 2018

надо без пробела  перед двоеточием писать:
.stripe:nth-child(2n)

#4
15:01, 8 мар. 2018

Что-то вроде такого:

+ Показать

CSS table example | css траблы с тулзой к eve online

#5
16:29, 8 мар. 2018

Так как я с css всего 3й день работаю, то совершенно не понимаю как bootstrap заменить на чистый css

Но зато поменяв:

.stripe :nth-of-type(2n) :only-child {
        background: #aaaaaa;
На
.stripe .row:nth-child(2n) {
  background: #eee;
}

все заработало как и хотелось и цвет действительно перестал резать глаз

а что означает:
.stripe .row:nth-child(2n)

у класса страйп, паждый второй ребенко класса ряд?

или у классов страйп и роу любой второй ребенок?

#6
16:58, 8 мар. 2018

despair1
у элемента класса stripe, дочерний элемент класса row, каждый второй

#7
19:47, 8 мар. 2018

despair1
Ну заменять bootstrap не нужно, это я просто в примере не стал его тянуть.

ПрограммированиеФорумВеб