Программирование игр, создание игрового движка, OpenGL, DirectX, физика, форум
GameDev.ru / Программирование / Форум / css траблы с тулзой к eve online

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

despair1Постоялецwww7 мар. 201818:15#0
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>

чяднт?

dayllengerПользовательwww7 мар. 201820:28#1
.stripe :nth-child(2n) {...}
Было бы неплохо или цвет этот помягче сделать, или цвет текста под ним сделать белым.
despair1Постоялецwww8 мар. 20188:15#2
dayllenger
> :nth-child(2n)

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

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

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

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

L1fПостоялецwww8 мар. 201811:32#3
надо без пробела  перед двоеточием писать:
.stripe:nth-child(2n)
dayllengerПользовательwww8 мар. 201815:01#4
Что-то вроде такого:
+ Показать

CSS table example | css траблы с тулзой к eve online
despair1Постоялецwww8 мар. 201816:29#5
Так как я с 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)

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

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

std::cinУчастникwww8 мар. 201816:58#6
despair1
у элемента класса stripe, дочерний элемент класса row, каждый второй
dayllengerПользовательwww8 мар. 201819:47#7
despair1
Ну заменять bootstrap не нужно, это я просто в примере не стал его тянуть.

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

2001—2018 © GameDev.ru — Разработка игр