Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap. Нужен совет как правильно это сделать / 20 сообщений из 20, страница 1 из 1
07.05.2018, 11:22
    #39641282
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
    <header>
        <div class="header__top">  - верхняя полоса с меню
            <div class="container">   
                <div class="row">
                    <div class="col-xl-2">
                        <img src="img/logo.png" alt="">
                    </div>
                    <div class="col-xl-7">
                        <nav>...</nav>
                    </div>
                    <div class="col-xl-3">
                        <div class="contacts">...</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>...</h1>
                    </div>
                    <div class="header__arrow">стрелка на расст. 5% от нижней границы экрана</div>
                </div>
            </div>
        </div> 
        </div>  
    </header>


Чтобы не путать вас, я лишние свойства (шрифты, цвет и т.д. - удалил отсюда)
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
header { 
    background: url(../img/bg.jpg) no-repeat center top / cover; 
    height: 100vh;
    position: relative;
}
.header__top { 
    height: 58px;
}
далее блок с заголовком и стрелкой. Тянем его до конца экрана. 
.a { 
   height: 93vh; 
   position: relative;  - чтобы стрелку сделать по низу.
}
.header__title {  margin-top: 20%; }   - почему чтобы заголовок был по центру пришлось отступить всего 20%, вместо предполагаемых 50% ?
.header__arrow {
    position: absolute;  
    bottom: 5%;    - почему отсчет идет от заголовка h1? Почему row не растягивается на весь экран, а заканчивается сразу после заголовка? Как мне прижать стрелку к нижней части экрана???
    display: inline-block;
    margin: 0 auto 5% auto; 
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 11:36
    #39641293
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_kпочему чтобы заголовок был по центру пришлось отступить всего 20%, вместо предполагаемых 50% ?
Если хочешь отступать 50% - придется "возвращаться" на половину его высоты вверх.
Т.к. это отступ для "начала" элемента, а не для его "середины".

Вот тебе статейка по "вертикальному центрированию"...
https://ruseller.com/lessons.php?id=1248
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 11:37
    #39641295
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
а как в данном случае прижать стрелку к низу?
я уже абсолютом пытаюсь прижать, но row заканчивается там, где заканчивается заголовок
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 11:39
    #39641296
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_kЧтобы не путать вас, я лишние свойства (шрифты, цвет и т.д. - удалил отсюда)
Если ты действительно не хочешь нас путать - нужно делать полные тестовые примеры.
Показывать огрызки плохо. Кто их потом будет собирать в один файл?
Если тебе самому это уже делать лень.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 11:40
    #39641299
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_kа как в данном случае прижать стрелку к низу?
Сделай нормальный тестовый пример. На нем и покажут...
А ты потом встроишь решение в свой bootstrap.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 11:45
    #39641303
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_k , вот смотри что вижу я

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
header { 
    background: url(../img/bg.jpg) no-repeat center top / cover; 
    height: 100vh;
    position: relative;
}
.header__top { 
    height: 58px;
}
.a { 
   height: 93vh; 
   position: relative;
}
.header__title {  
	margin-top: 20%; 
} 
.header__arrow {
    position: absolute;  
    bottom: 5%;  
    display: inline-block;
    margin: 0 auto 5% auto; 
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
    <header>
        <div class="header__top">  - верхняя полоса с меню
            <div class="container">   
                <div class="row">
                    <div class="col-xl-2">
                        <img src="img/logo.png" alt="">
                    </div>
                    <div class="col-xl-7">
                        <nav>...</nav>
                    </div>
                    <div class="col-xl-3">
                        <div class="contacts">...</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>...</h1>
                    </div>
                    <div class="header__arrow">стрелка на расст. 5% от нижней границы экрана</div>
                </div>
            </div>
        </div> 
        </div>  
    </header>
</body>
</html>


Какие уж тут стрелки...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 11:55
    #39641312
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<body>
    <header>
        <div class="header__top">
            <div class="container">   
                <div class="row">
                    <div class="col-xl-12">
                        <img src="img/logo.png" alt="" class="header__logo">
                    </div>
                </div>
            </div>
        </div>
        <!-- первый экран -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>Заголовок</h1>
                    </div>
                    <div class="header__arrow"></div>
                </div>
            </div>
        </div> 
        </div>  
    </header>
</body>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
* { padding: 0;  margin: 0; }
body { 
    font-family: 'museo', serif;
    font-size: 17px;
    font-weight: 100;
    color: #000;
}
header { 
    background: url(../img/bg.jpg) no-repeat center top / cover; 
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    height: 100vh;
    position: relative;
}
.header__top { 
    background: rgb(0,0,0,0.25); 
    height: 58px;
}
.a {height: 93vh; position: relative;}
.header__title {  margin-top: 20%; }
h1 { color: #fff; font-size: 90px; }
.header__arrow {
    border: 1px solid #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 5%;
    display: inline-block;
    margin: 0 auto 5% auto; 
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 12:18
    #39641333
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
Смешно сказать. Открыл новый файл. Стал делать тестовый пример. Убрал оттуда всё лишнее, оставил только все самое необходимое, запустил - всё работает... Сейчас буду к своему тестовому примеру по строчке добавлять то что убрал... Надо же отловить ошибку!
Спасибо )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 12:26
    #39641340
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
АГА!!!
Я понял! Приколы начанаются сразу после подключения файла bootstrap!!!!
без него всё прекрасно работает!!!
Вот тестовый пример:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<link rel="stylesheet" href="bootstrap-grid.min.css">
<style type='text/css'>
* { padding: 0;  margin: 0; }
header { 
    background: green center top / cover; 
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    height: 100vh;
    position: relative;
}
.header__top { 
    background: rgb(0,0,0,0.25); 
    height: 58px;
}
.a {height: 93vh; border: 2px solid #0f0f0f; position: relative;}
.header__title {  margin-top: 20%; }
h1 { font-family: arial; color: #fff; font-size: 100px; }
.header__arrow {
    border: 1px solid #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 5%;
    display: inline-block;
    margin: 0 auto 5% auto; 
}
</style>

</head>
<body>
    <header>
        <div class="header__top"> 
            <div class="container">   
                <div class="row">
                    <div class="col-xl-12">
                        logo
                    </div>
                </div>
            </div>
        </div>
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>Заголовок</h1>
                    </div>
                    <div class="header__arrow"></div>
                </div>
            </div>
        </div> 
        </div>  
    </header>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 12:27
    #39641342
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
это всё положите в одну папку! без бутстрапа работает, с ним - нет
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 12:28
    #39641345
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
стрелка короче, это в данном случае кружок. Если убрать бутстрап, то кружок будет внизу, если вернуть - то вверху, вместе с заголовком
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 13:14
    #39641369
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
Правильно я понимаю, что никто не знает как прижать в данном случае стрелку книзу?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 13:17
    #39641371
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_kСмешно сказать. Открыл новый файл. Стал делать тестовый пример. Убрал оттуда всё лишнее, оставил только все самое необходимое, запустил - всё работает...
Вот для этого и делаются тестовые примеры.

dik_kЕсли убрать бутстрап, то кружок будет внизу, если вернуть - то вверху, вместе с заголовком
Значит смотри кто и какие селекторы тебе "сбивают" установки по ЦСС.

Либо сам усиливай свои селекторы, дабы они "перебивали" другие установки...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 15:00
    #39641456
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_kэто всё положите в одну папку! без бутстрапа работает, с ним - нет
Нажмите в браузере F12, воспользуйтесь инструментами разработчика, и Вы поймёте, что происходит.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 16:16
    #39641541
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
Я скинул который можно запустить сохранив под любым именем и приложил бутстраповскую сетку. Если интересно, можете посмотьреть чем отличается работа с сеткой от работы без неё.
Теперь по поводу F12 - естественно я смотрел что происходит.
Вот в этом куске:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
        <!-- от меню и до нижней части экрана -->
        <div class="a">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__title">       
                        <h1>Заголовок</h1>
                    </div>
                    <div class="header__arrow"></div>
                </div>
            </div>
        </div> 
        </div>


специально добавил div с классом "a", ему присвоил позишен релатив и его же тяну на весь экран. По моим расчетам от него и должна отталкиваться стрелка, но она отталкивается от низа ROW. А ROW (написан через строку от дива с классом "а") имеет высоту до конца моего заголовка, то есть примерно до середины экрана.
Поэтому кружок (ну в будущем стрелка), отсчитывается от середины экрана.
Как этот ROW сделать до низа? Я не умею бутстраповский ROW переназначать...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 16:19
    #39641543
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_kТеперь по поводу F12 - естественно я смотрел что происходит.
И что происходит на закладке Styles? Какие селекторы перекрываются бутстрапом?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 16:24
    #39641548
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
Код: sql
1.
class="row"



вам он точно нужен? если без него всё как вам надо, то добавляйте этот класс
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 16:24
    #39641549
Konst_One
Konst_One
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
то НЕ добавляйте ...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.05.2018, 16:52
    #39641575
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
хм... оказалось причина в COL. он же у меня = 12 колонок, вот и сливался со строкой.
В сетке бутстрап по умолчанию для всех COL стоит позишен релатив. Вот относительно его и отсчитывается стрелка. А как переопределить COL?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.05.2018, 08:32
    #39641783
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap. Нужен совет как правильно это сделать
dik_kА как переопределить COL?
Подключить свой ЦСС ниже библиотечного. Тогда твой "кол" перебьет библиотечный.
Посмотреть какой селектор "библиотечный" и сделать свой селектор более приоритетный.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap. Нужен совет как правильно это сделать / 20 сообщений из 20, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 373ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444193]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 39ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 54ms
get tp. blocked users:
 2ms
others: 232ms
total:  373ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]