Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Социальные группы Поиск Сообщения за день Заказать работу  
 
Рейтинг 4.76/21: Рейтинг темы: голосов - 21, средняя оценка - 4.76
0 / 0 / 0
Регистрация: 31.12.2018
Сообщений: 7
1

Отступы сверху-снизу и цвет ссылок

31.12.2018, 16:52. Показов 4241. Ответов 13
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте! С Наступающим! Я новичок, только начал разбираться. Я хотел сделать одинаковые отступы, но не получилось, почему? Я хотел еще сделать, чтобы цвет ссылок был всегда одинаковым, вне зависимости от того, открывались они или нет. Можете, пожалуйста, посмотреть? Может есть еще какие-то комментарии по коду?

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Структура</title>
    <link rel="stylesheet" href="css/main.css">
</head>
  <body>
    
 
    <div class="flex-container">
 
        <div class="my-flex-container-1"> <!-- ПОИСКОВИКИ -->
 
  <p> Посковики:
   &nbsp &nbsp 
    <a href="https://yandex.ru/">Яндекс</a>
     &nbsp &nbsp
      <a href="https://www.google.com/"> Google</a>
&nbsp &nbsp  
<a href="https://mail.ru/"> Mail.ru</a>
&nbsp &nbsp  
<a href="https://rambler.ru/"> Rambler</a>
  
</p>
</div>
 </div>
 
 <div class="flex-container">
 
        <div class="my-flex-container-2"> <!-- ПОИСКОВИКИ -->
 
  <p> Карты: &nbsp &nbsp 
    <a color: green href="https://yandex.ru/">Гугл Карты</a>
     &nbsp &nbsp <a href="https://www.google.com/"> Яндекс Карты</a>
&nbsp &nbsp  <a href="https://mail.ru/"> 2gis</a>
  
</p>
</div>
 </div>
 
  <div class="flex-container">
 
        <div class="my-flex-container-3"> <!-- ПОИСКОВИКИ -->
 
  <p> Мессенджеры и vk:
      &nbsp &nbsp 
    <a  href="https://yandex.ru/">Whatsapp</a>
    &nbsp &nbsp 
    <a  href="https://yandex.ru/">Whatsapp</a>
     &nbsp &nbsp
      <a href="https://www.google.com/"> Telegram</a>
  
</p>
</div>
 </div>
 
 
 <div class="flex-container-4">
 
        <div class="my-flex-container-2"> <!-- ПОИСКОВИКИ -->
 
  <p> Карты:
      &nbsp &nbsp 
    <a  href="https://yandex.ru/">Яндекс Карты</a>
    &nbsp &nbsp 
    <a  href="https://yandex.ru/">GoogleMaps</a>
     &nbsp &nbsp
<a href="https://mail.ru/"> 2gis</a>
  
</p>
</div>
 </div>
 
 
  <div class="flex-container">
 
        <div class="my-flex-container-2"> <!-- ПОИСКОВИКИ -->
 
  <p> Почта:
      &nbsp &nbsp 
    <a  href="https://yandex.ru/">Яндекс Почта</a>
    &nbsp &nbsp 
    <a  href="https://yandex.ru/">gmail</a>
     &nbsp &nbsp
<a href="https://mail.ru/"> mail.ru</a>
&nbsp &nbsp
<a href="https://mail.ru/"> rambler</a>
  
</p>
</div>
 </div>
 
  </body>
</html>
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
65
66
67
68
69

body {
    font-family: Georgia, sans-serif;
    padding: 0;
    margin: 0;
    color: #222222;
 
     A {
    color: green; /* Цвет ссылок */
   }
   A:visited {
    color: green; /* Цвет посещенных ссылок */
   }
   A:active {
    color: green; /* Цвет активных ссылок */
   }
}
 
.flex-container {
flex-direction: row;
margin-top: 50px; 
 
}
 
.my-flex-container-1{
  display: flex;
 color: green;
 margin-bottom:30px;
    flex-direction:row;
  justify-content: center;
  align-items:center;
  }
 
//*.my-flex-container-1 a{
    color:green;*//
 
 
}
.my-flex-block{
 margin-right:15px; 
}
 
 
  .my-flex-container-2{
  display: flex;
    flex-direction:row;
  justify-content: center;
  align-items:center;
   margin-bottom:30px;
}
 
.my-flex-container-2 {
    color: red;
}
.my-flex-container-3{
  display: flex;
    flex-direction:row;
  justify-content: center;
  align-items:center;
  margin-bottom:30px;
}
.my-flex-container-4{
  display: flex;
    flex-direction:row;
  justify-content: center;
  align-items:center;
  margin-bottom:30px;
 
 
}
Добавлено через 2 минуты
И еще, можно ли здесь оставлять ссылки на codepen или так здесь не принято?

Добавлено через 16 минут
Ссылка https://codepen.io/Nikolaevi4/pen/REjQLL
0
Лучшие ответы (1)
Сообщение: #13207468
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 31.12.2018, 16:52
Ответы с готовыми решениями:

Отступы сверху и снизу от картинки в таблице
Не могу найти решения данной проблеме) отступы сверху и снизу от картинки в &lt;td&gt;

Переполнение сверху и снизу
Есть задача: создать класс &quot;Целое число&quot;, в котором нужно определить методы, которые могут...

Закладки сверху и снизу
Мне нужен код, чтобы закладки были сверху и снизу (закругленные), можно код без js. У меня есть...

Добавить классы сверху и снизу
Я делаю таблицу нужно добавить вокруг неё классы - то есть вокруг будет серая граница, слева и...

13
9 / 6 / 3
Регистрация: 31.08.2017
Сообщений: 22
31.12.2018, 17:25 2
CSS
1
2
3
4
5
6
7
8
9

/*Определяет цвет ссылок до и после нажатия.*/
a { 
   color: blue;
}
 
/*Определяет цвет ссылок после нажатия.*/
a:visited {
   color: blue;
}
Подробнее

Насчёт отступов не понял.
0
Модератор
Эксперт HTML/CSS
2275 / 1656 / 650
Регистрация: 07.08.2016
Сообщений: 3,970
31.12.2018, 17:32 3
Цитата Сообщение от integ Посмотреть сообщение
Я хотел сделать одинаковые отступы, но не получилось, почему?
Не совсем понятно про какие отступы вы говорите.
Цитата Сообщение от integ Посмотреть сообщение
Я хотел еще сделать, чтобы цвет ссылок был всегда одинаковым, вне зависимости от того, открывались они или нет
Цвет у всех состояний ссылок у вас одинаковый - green.
Цитата Сообщение от integ Посмотреть сообщение
Может есть еще какие-то комментарии по коду?
Используйте понятные наименования классов, а не ".my-flex-container-1" иначе сами запутаетесь.
Свойство "flex-direction: row;" можно не задавать, так как оно используется по умолчанию для флекс контейнера.
Зачем вы дублируете один и тот же код для ".my-flex-container" с первого по четвертый? В css можно просто указать эти классы через запятую и один раз написать общий код. Либо задать всем блокам один и тот же класс.
В хтмл у вас есть класс "flex-container-4", а стилей css для него нет, возможно вы хотели использовать просто "flex-container" и именно про эти отступы говорили?
Зачем вы везде используете неразрывные пробелы для отступов если для этих случаев придуманы паддинги и маржины?
Внимательней относитесь к комментариям, чтобы в результате не получалось ошибок синтаксиса.
На первый взгляд вроде все.
Цитата Сообщение от integ Посмотреть сообщение
И еще, можно ли здесь оставлять ссылки на codepen или так здесь не принято?
Код в любом случае должен быть выложен на данном форуме. Cсылки на сторонние ресурсы просто знак выражения уважения к тем кто будет разбирать ваш код.
1
9 / 6 / 3
Регистрация: 31.08.2017
Сообщений: 22
31.12.2018, 17:47 4
Кое-что заметил, селекторы у вас не работают т.к. тэг "a" указан в верхнем регистре. В jsfiddle всё нормально, в codepen нет.
0
0 / 0 / 0
Регистрация: 31.12.2018
Сообщений: 7
31.12.2018, 20:13  [ТС] 5
Спасибо большое за ответы.
Да, цвет у всех состояний в коде стоит green, но по факту отображается синий и фиолетовый. См здесь https://codepen.io/Nikolaevi4/pen/REjQLL
Весь вопрос в том, почему у меня цвета ссылок отображаются некорректно.
Извините, я некорректно выразился по поводу отступов. Я имел ввиду интервалы между строками почему-то у меня в коде стоят одинаковые, а отображаются по факту как различные из-за чего? margin одинаковый!

Про селекторы не понял и верхний регистр. Что это такое, где об этом можно почитать?
0
9 / 6 / 3
Регистрация: 31.08.2017
Сообщений: 22
31.12.2018, 20:44 6
integ, htmlbook/селекторы & htmlbook/псевдоклассы

CSS
1
2
3
4
5
6
7
8
9

    /*A -> a*/ a {
    color: green; /* Цвет ссылок */
   }
    /*A -> a*/ a:visited {
    color: green; /* Цвет посещенных ссылок */
   }
    /*A -> a*/ a:active {
    color: green; /* Цвет активных ссылок */
   }
P.S. - codepen не применяет свойства к селекторам в верхнем регистре, насколько я понял
2
Модератор
Эксперт HTML/CSS
2275 / 1656 / 650
Регистрация: 07.08.2016
Сообщений: 3,970
31.12.2018, 20:51 7
Цитата Сообщение от integ Посмотреть сообщение
Да, цвет у всех состояний в коде стоит green, но по факту отображается синий и фиолетовый.
Дело в том что вы используете синтаксис scss, а в песочнице выбран синтаксис нативного css, из-за этого у вас не работает часть свойств, например css правила для ссылок. Стоит выбрать синтаксис scss, а также удалить вот эти строки:
CSS
1
2
3

//*.my-flex-container-1 a{
    color:green;*//
}
Ну или привести данный комментарий к нормальному виду, помните я говорил о том, что нужно внимательно относится к комментариям? И ваши ссылки будут нормально работать.
Цитата Сообщение от integ Посмотреть сообщение
Я имел ввиду интервалы между строками почему-то у меня в коде стоят одинаковые, а отображаются по факту как различные из-за чего? margin одинаковый!
Маржин у вас не одинаковый. У вас указан верхний маржин 50 пикселей для ".flex-container" и нижний маржин в 30 пикселей для ".my-flex-container-1, .my-flex-container-2, .my-flex-container-3, .my-flex-container-4", а в коде хтмл вместо ".flex-container", в одном месте, используется "flex-container-4", в стилях у него нет верхнего маржина в 50px и соответственно отступ у этого контейнера меньше сем у всех остальных.
Цитата Сообщение от integ Посмотреть сообщение
Про селекторы не понял и верхний регистр. Что это такое, где об этом можно почитать?
Не обращайте внимания, селекторы тегов вы можете писать как в верхнем так и в нижнем регистре, да хоть с помощью camelCase. Регистр нужно соблюдать только при написании классов и идентификаторов.
0
0 / 0 / 0
Регистрация: 31.12.2018
Сообщений: 7
31.12.2018, 21:26  [ТС] 8
Ilterego
Не сработало, к сожалению https://codepen.io/Nikolaevi4/pen/GPOGaB
0
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
31.12.2018, 21:33 9
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
65
66
67
68
69
70

body {
    font-family: Georgia, sans-serif;
    padding: 0;
    margin: 0;
    color: #222222;
 
}
 
 a{
    color: green; 
   }
a:visited {
   color: green; 
   }
a:active {
    color: green; 
   }
 
.flex-container {
flex-direction: row;
margin-top: 50px; 
 
}
 
.my-flex-container-1{
  display: flex;
 color: green;
 margin-bottom:30px;
    flex-direction:row;
  justify-content: center;
  align-items:center;
  }
 
//*.my-flex-container-1 a{
    color:green;*//
 
 
}
.my-flex-block{
 margin-right:15px; 
}
 
 
  .my-flex-container-2{
  display: flex;
    flex-direction:row;
  justify-content: center;
  align-items:center;
   margin-bottom:30px;
}
 
.my-flex-container-2 {
    color: red;
}
.my-flex-container-3{
  display: flex;
    flex-direction:row;
  justify-content: center;
  align-items:center;
  margin-bottom:30px;
}
.my-flex-container-4{
  display: flex;
    flex-direction:row;
  justify-content: center;
  align-items:center;
  margin-bottom:30px;
 
 
}
0
0 / 0 / 0
Регистрация: 31.12.2018
Сообщений: 7
31.12.2018, 21:38  [ТС] 10
AlexZaw
Удалил строку про цвет, скорректировал комментарии https://codepen.io/Nikolaevi4/pen/KbyeOP
Здесь удалил комментарии вообще https://codepen.io/Nikolaevi4/pen/yGPqBy
Почему-то все равно не помогло(

Добавлено через 4 минуты
Fedor92
Спасибо большое!

P.S. Правда я все-таки все равно не понял, что конкретно помешало моему коду верно отображать содержимое

Вот так вроде как одинаковые интервалы между строк https://codepen.io/Nikolaevi4/pen/yGPqBy
0
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
31.12.2018, 21:40 11
Лучший ответ Сообщение было отмечено integ как решение

Решение

Цитата Сообщение от integ Посмотреть сообщение
Правда я все-таки все равно не понял, что конкретно помешало моему коду верно отображать содержимое
Сравните мой код с Вашим из предыдущего сообщения - всё поймёте... С НОВЫМ ГОДОМ! Надо идти за стол поближе к коньяку...
0
0 / 0 / 0
Регистрация: 31.12.2018
Сообщений: 7
01.01.2019, 04:04  [ТС] 12
Спасибо и Вас с Новым Годом!

Добавлено через 6 часов 23 минуты
Я понял свою ошибку, забыл в body закрыть скобку в css.
И еще, я попробовал сделать у каждой строчки ссылки разного цвета, но не вышло. Подскажите, пожалуйста, а почему не вышло, вроде как на этот раз все хорошо, может я что-то не так понимаю?
https://codepen.io/Nikolaevi4/pen/maqzax
0
Модератор
Эксперт HTML/CSS
2275 / 1656 / 650
Регистрация: 07.08.2016
Сообщений: 3,970
01.01.2019, 09:48 13
Цитата Сообщение от integ Посмотреть сообщение
И еще, я попробовал сделать у каждой строчки ссылки разного цвета, но не вышло
У вас в хтмл есть классы типа "my-flex-container-1", а стили вы указываете просто для ".flex-container-1". Аналогично и для остальных номеров. Ну и когда задаете цвет для не посещенной ссылки не нужно писать вот так " .my-flex-container-1 a:". У вас лишнее двоеточие, напишите " .my-flex-container-1 a" ну или " .my-flex-container-1 a:link"
1
9 / 6 / 3
Регистрация: 31.08.2017
Сообщений: 22
02.01.2019, 21:50 14
integ,
Про селекторы не понял и верхний регистр. Что это такое, где об этом можно почитать?
Я не обратил внимания на неверный синтаксис, нашёл другое, некорректное объяснение. Если желаете использовать подобный синтаксис - ознакомьтесь с css-препроцессорами.
0
02.01.2019, 21:50
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 02.01.2019, 21:50
Помогаю со студенческими работами здесь

Как сделать навигацию снизу и сверху?
Всем привет) Подскажите плиз) Как сделать навигацию снизу и сверху в андроиде например как в...

Создание новых объектов сверху а не снизу
Помогите сделать так, чтобы новые объекты добавлялись сверху а старые опускались вниз, а не...

Чёрные полосы сверху и снизу экрна
Эта проблема нетолько в Windows7 но и в xp и в viste это чёрные полосы сверху и снизу экрна когда...

Макросы вставки строки сверху/снизу...
Здравствуйте! Прошу вас помочь, сам я точно не справлюсь!! В таблице, скажем, из 4-х столбцов...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru