Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как расположить элементы на странице таким образом?

Здравствуйте.

Есть вот такой HTML код:

Отображается он сейчас так:


Hеобходимо сделать так:


Картинка и название статьи должны быть ссылкой. Тег <h3> в примере должен иметь черный фон и нижнюю линию на всю длину блока.

Ответ:
Спасибо за ответ.
Вопрос: Задать тело одиночной функции f таким образом

Здравствуйте. Недавно начал изучать javascript. Наткнулся на вот такую задачку. Интересно узнать решение (как-то не доходит оно пока до меня.))
Буду признателен за помощь.)

Задайте тело одиночной функции f таким образом, чтобы значение i2.value
стало синхронизировано с i1.value, то есть, оно должно быть равно
i1.value и в дальнейшем меняться при изменении i1.value.
i1 и i2 – input элементы.
Ограничение1: нельзя использовать глобальные переменные
Ограничение2: i1.id и i2.id неопределены, и их нельзя определять
Ограничение3: нельзя модифицировать свойства i1 и i2, кроме value и
свойств, отвечающих за события (onChange и т.п.).
function f(i1,i2) // i1,i2 - input-элементы
{}
Ответ: scrollquest,
читать то когда научишься что ТС пишет?
<input> <input>
<script>
f = function(input1, input2){
   input1.oninput = function(){input2.value = this.value}
}
inputs = Array.from(document.querySelectorAll("input"))
f(inputs[0], inputs[1])
</script>
Вопрос: Блок на оставшуюся ширину/ высоту страницы

Всем привет. Хочу сверстать несколько блоков на странице. Шапка, с фиксированной высотой, шириной 100%.

Затем 2 блока. Левый блок с шириной 200px, правый блок, который бы занимал всю оставшуюся часть страницы.

Footer фиксированной высотой, шириной 100%.

Пример во вложении, или по ссылке: [del]

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

И как вообще сделать блоки 2 и 3 высотой на всю оставшуюся часть страницы таким образом, чтобы скролл появлялся только в блоках 2 и 3 если контента в них очень много и этот контент вылазит за пределы блоков?

Вот что смог пока сделать:
HTML5
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
<body>
    <header>
        Шапка
    </header>
    <div class="container">
 
        <div class="users">
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
        </div>
        <div class="messages">
            Блок, заполняющий оставшееся пространство
        </div>
 
    </div>
    
 
    
    <footer>
        footer
    </footer>
    
    
</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
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
body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: auto;
    height:100%;
}
*{
    border: 0px solid #000;
}
 
body{
    width:100%;
    height: 100%;
}
 
 
header, .users,.messages,footer{
    border: 1px solid #000;   
}
 
 
.container{
    width:100%;
    height: 100%;
    display: table;
    margin-top: 50px;
 
    
}
 
.users,.messages{
    display: table-cell;
    float:left;
    position: relative;
 
}
 
.users{
    width:200px;
}
 
 
 
header{
    position: absolute;
    top:0;
    height: 50px;
    width:100%;
    background-color: lime;
 
}
 
 
 
footer{
    background-color: lightblue;
    width:100%;
    
    height: 100px;
    bottom:0;
    position: absolute;
    z-index:1;
}
Народ, помогите пожалуйста кто знает.
Ответ: С шириной разобрался, а вот как сделать высоту 2 и 3 блока так, чтобы она была равная высоте страницы - высота шапки - высота подвала? И чтоб если блоки 2 и 3 из-за обилия контента не вмещаются в эту область, чтоб скролл появлялся?


HTML5
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
<body>
    <header>
        Шапка
    </header>
    <div class="container">
 
        <div class="users">
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
            Блок с известной шириной<br/>
        </div>
        <div class="messages">
            Блок, заполняющий оставшееся пространство
        </div>
 
    </div>
    
 
    
    <footer>
        footer
    </footer>
    
    
</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
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
body{
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: auto;
    height:100%;
}
*{
    border: 0px solid #000;
}
 
body{
    width:100%;
    height: 100%;
}
 
 
header, .users,.messages,footer{
    border: 1px solid #000;   
}
 
 
.container{
    width:100%;
    height: 100%;
    display: table;
    margin-top: 50px;
 
    
}
 
.users,.messages{
    display: table-cell;
    position: relative;
 
}
 
.users{
    width:200px;
}
 
 
 
header{
    position: absolute;
    top:0;
    height: 50px;
    width:100%;
    background-color: lime;
 
}
 
 
 
footer{
    background-color: lightblue;
    width:100%;
    
    height: 100px;
    bottom:0;
    position: absolute;
    z-index:1;
}
Вопрос: Вывести значения id всех элементов страницы через пробел!

Как через пробел вывести значения id всех элементов страницы?

Сделал так, но на выходе только id последнего элемента (
<!doctype html>
<meta charset='utf-8'>
<title>PERFECT</title>
<div id='lorem'>
  <div id='ipsum'>
    <div></div>
    <div></div>
    <div id='fox'></div>
    <div></div>
  </div>
  <div id='menu'>
    <div id='item-1'></div>
    <div></div>
    <div></div>
    <div id='controls'></div>
  </div>
</div>

<div id='output'></div>

<style>
#output {
  margin: 20% auto;
  background: #e5e5e5;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
}
</style>

<script>
'use strict'
var i, idElements, idList;

window.onload = function() {
  idElements = document.querySelectorAll('[id]');
  for (i of idElements) {
    idList = i.id;
    output.textContent = idList;
    console.log(idList);
  }
};
</script>
Ответ: Lemme,
Спасибо, выручил! Всего доброго!
Вопрос: Javascript-код для вывода дерева элементов страницы, с которой этот код запущен

Всем привет. Возникла трудность при изучении javascript, а именно с темой, связанной с DOM. Не могу справиться со следующей задачей: написать Javascript-код для вывода дерева элементов страницы, с которой этот код запущен.
Если кто поможет, буду благодарен.
Ответ: Спасибо, то что надо)
Вопрос: Как поменять стартовую страницу в .htaccess?

Приветствую, форумчане!

Суть проблемы:
Имеется некий сайт с автоматическим генерированием страниц, начиная с index.php
Мне нужно перенастроить файл .htaccess таким образом, чтобы начальная страница была не index.php, а другая статическая. Но при этом нужно, чтобы при переходе по ссылкам статической страницы генератор работал в обычном режиме.
Другими словами, нужно сделать так, чтобы при обращении к сайту стартовая страница была статическая, а все остальные--динамическими, изменяя только файл .htaccess

Рассчитываю на вашу помощь.


Код файла приведен ниже
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
AddType image/x-icon .ico
AddDefaultCharset UTF-8
Options +FollowSymlinks
Options -Indexes
 
<IfModule mod_rewrite.c>
RewriteEngine on
#RewriteBase /
 
#Перенаправление на www.site~
#RewriteCond %{HTTP_HOST} !^www.
#RewriteRule (.*) http://www.%{HTTP_HOST}/$1 [R=301,L]
 
 
RewriteCond %{REQUEST_FILENAME} !-f [OR]
RewriteCond %{REQUEST_URI} \.(ini|php)$
RewriteRule ^(.*) index.php [L,QSA]
</IfModule>
 
<IfModule mod_php5.c> 
php_flag magic_quotes_gpc Off
</IfModule>
Ответ: После введения DirectoryIndex ничего не поменялось.
НО. Решил проблему обходным путем.
Поменял RewriteRule на нужную стат. страницу, а уже в ее коде сделал ссылки вида
Code
1
условный_сервер_.com/index.php(который генератор)/конец_ссылки
Таким образом, после клика на ссылку на начальной статической странице генератор работает через index.php.
Конечный URL стал длинней, но все работает.
Тему можно закрывать.
Вопрос: Не получается расположить элементы друг с другом

Здравствуйте! Возникла такая вот проблема, мне нужно чтобы три картинки вместе с названием были расположены рядом. Подскажите пожалуйста, что я делаю не так)

HTML5
1
2
3
4
5
6
7
<div class="works">
    <h3 class="name_work1">Работа 1</h3>
    <img src="http://www.cyberforum.ru/images/_works/work1.jpg" class="image_work1">
 
    <h3 class="name_work2">Работа 2</h3>
    <img src="http://www.cyberforum.ru/images/_works/work2.jpg" class="image_work2">
</div>
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
.image_work1{
    width: 25%;
    height: 10%;
    float: left;
    margin: 0px 0px 0px 40px;
}
 
 
.name_work1{
    width: 25%;
    height: 10%;
    margin: 0px 0px 0px 40px;
}
 
image_work2{
        width: 25%;
    height: 10%;
    float: right;
}
 
 
.name_work2{
    width: 25%;
    height: 10%;
    float: right;
        margin: 0px 0px 0px 40px;
}
Ответ: Ой, мама дорогая, что же это твориться. Во первых зачем дублируешь код ??? - тебе же в дальнейшем будет сложно поддерживать такой код. Во вторых - используешь свойство "float" - не забывай чистить поток стилей для родительского элемента, .

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="clearfix">
  <div class="works">
    <h3 class="name_work1">Работа 1</h3>
    <img src="http://www.cyberforum.ru/images/_works/work1.jpg" class="image_work1">
  </div>
 
  <div class="works">
    <h3 class="name_work2">Работа 2</h3>
    <img src="http://www.cyberforum.ru/images/_works/work2.jpg" class="image_work2">
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* For modern browsers */
.clearfix:before,
.clearfix:after {
   content: "";
   display: table;
}
.clearfix:after {
   clear: both;
}
 
/* для IE6-7 */
.clearfix {
   zoom: 1;
}
 
/* -------------------------------------*/
.works{
   width: 25%;
    height: 10%;
    float: left;
    margin: 0px 0px 0px 40px;
} */
Вопрос: Как правильно определять шрифт для элемента страницы

Всем доброго времени суток.
Суть проблемы такова. На страницу подгружается кастомный узкий шрифт (Bravo), применяется к кнопкам, опшионам селектов и заголовкам. Размер шрифта для этих элементов приходиться увеличивать в стилях. Происходит следующее, в первые секунды рендеринга страницы элементы разъезжаются до того момента как браузер не загрузит шрифт и не применит его. Стандартный шрифт при этом не виден, но если отключить кастомный, то отчетливо видно, что символы стандартных шрифтов гораздо шире символов кастомного шрифта. Подскажите как решить проблему, если конечно есть решение кроме замены шрифта.
Если есть решение с заменой шрифта, то подскажите аналог.
С уважением LuckyMen
p/s: Увидеть проблему можно на сайте flatinfo.ru
Ответ: LuckyMen, можно попробовать заюзать такое свойство, такое как letter-spacing и задать расстояние между символами кастомного шрифта, тем самым его подрастятнуть...
Вопрос: Нет элемента страницы при ее полном просмотре

Например в базе Яндекс СМИ() если просмотреть код элемента 110km.ru, то мы увидим:
HTML5
1
2
<a class="link link_theme_normal agency i-bem link_js_inited" data-bem="{&quot;link&quot;:{&quot;_tabindex&quot;:&quot;0&quot;,&quot;origTabindex&quot;:&quot;0&quot;}}" tabindex="0" href="/smi/110km">
<div class="agency__title">110km.ru</div></a>
Но если просматривать всю страницу, то такого кода не найти. Почему?
Ответ:
Потому что это динамически созданные элементы, посредством скриптов. Их не будет видно в самом коде.
Вопрос был задан потому что, есть необходимость распарсить такой же код. Но при запросе кода странцы я получаю последнюю и парсить ее не очень удобно.
Вопрос: Расположить элементы в две колонки bootstrap 3

Здравствуйте. Я создала 6 кнопок, используя при этом сворачивание collapse. Как мне распределить их на две колонки? Когда я прописываю col-md, то данные кнопки работают неадекватно. Мне надо, чтобы при нажатии на первую/вторую/третью кнопку в первой колонке, ничего не происходило со второй колонкой. А у меня при таком нажатии оставшиеся одна/две кнопки в первой колонке перескакивают во вторую колонку. А когда во второй колонке нажимаешь на любую кнопку, то "разворачивание" происходит и в первой колонке. На картинке представлено, как должно быть
HTML5
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<section id="price">
        <div class="container">
            <h2>УСЛУГИ И ЦЕНЫ</h2>
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" >
                Парикмахерские услуги
                
                   </button>
            </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Стрижка с сушкой.........1000 — 1500 руб.
                            <br>Стрижка с укладкой......1400 — 2200 руб.
                            <br>Коррекция челки............200 руб.
                            <br>Окрашивание................1600 — 5000 руб.
                            <br>Окрашивание корней....2000 — 2100 руб.
                        </div>
                    </div>
                </div>
 
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Косметология
                   </button>
            </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Чистка кожи............2200 — 2800 руб.
                            <br>Маски для лица......400 — 800 руб.
                            <br>Массаж лица...........500 — 1500 руб.
 
                        </div>
                    </div>
                </div>
 
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                Услуги визажиста
              </button>
            </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Макияж дневной...............1000 — 2000 руб.
                            <br>Макияж вечерний.............2000 — 3000 руб.
                            <br>Репетиция макияжа..........50% от стоимости
                            <br>Макияж подиумный..........4000 — 6000 руб.
                        </div>
                    </div>
                </div>
 
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                Солярий
              </button>
            </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Вертикальный...........20 руб./мин
                            <br>Горизонтальный........15 руб./мин
                        </div>
                    </div>
                </div>
 
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                Ногтевой сервис
              </button>
            </h4>
                    </div>
                    <div id="collapseFive" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Маникюр............................800 — 1000 руб.
                            <br>Педикюр............................1500 — 2000 руб.
                            <br>Покрытие Shellac..............1200 руб.
                            <br>Наращивание....................3000 — 6000 руб.
                            <br>Услуга Calgel:
                            <br>Укрепление.......................1700 руб.
                            <br>Однотонное покрытие......2200 руб.
                            <br>Растяжка...........................2200 — 4200 руб.
                            <br>Японский френч...............2700 — 4200 руб.
                            <br>Наращивание...................3700 — 7200 руб.
                            <br>Укрепление шелка...........300 руб./один ноготь
                        </div>
                    </div>
                </div>
 
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
                Эпиляция
              </button>
            </h4>
                    </div>
                    <div id="collapseSix" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Эпиляция воском..............250 — 2500 руб.
                            <br>Биоэпиляция сахаром......400 — 2800 руб.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
Ответ: Так не получается, хоть он элементы теперь и не перекидывает, но.. сворачивание как надо не работает, при нажатии на кнопку раскрывается внизу её содержимое, при нажатии на другую кнопку, содержимое первой должно скрыться, а второй открыться. В данном случае, как вы говорите сделать, происходит вот что (показано на картинке)