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

Выстроить блоки один под другим

10.12.2016, 21:08. Показов 8460. Ответов 5
Метки нет (Все метки)
Здравствуйте. Для закрепления теории решил сделать простенькое меню, которое бы перекидывало с помощью кнопок на нужные поисковые системы(скрин).

1) Как сделать эти элементы один под другим, а не в ряд?
2) Дайте рекомендации по оптимизации кода.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Панель</title>
   <link href="styles/site.css" rel="stylesheet">
</head>
 
    <body>
    <div id= "sites1">
        <p><a href="http://google.com.ua">Гугл</a></p>
    </div>
    <div id= "sites2">
        <p><a href="http://yandex.ua">Яндекс</a></p>
    </div>
    <div id= "sites3">
        <p><a href="https://www.yahoo.com">Yahoo</a></p>
    </div>
    <div id= "sites4">
        <p><a href="http://go.mail.ru">Поиск MAIL.RU</a></p>
    </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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

@font-face {
    font-family: v_CCAdamKubert;
    src: url('../fonts/v_CCAdamKubert.ttf');
}
 
#sites1 {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#sites1 a {
    display: inline;
    color: #E02F15;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
#sites1 a:hover {
    background: #D5D5D5;
}
#sites2 {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#sites2 a {
    display: inline;
    color: #DBC91A;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
#sites2 a:hover {
    background: #D5D5D5;
}
#sites3 {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#sites3 a {
    display: inline;
    color: #710CBB;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
#sites3 a:hover {
    background: #D5D5D5;
}
#sites4 {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#sites4 a {
    display: inline;
    color: #125AD6;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
#sites4 a:hover {
    background: #D5D5D5;
}
Миниатюры
Выстроить блоки один под другим  
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Лучшие ответы (1)
Сообщение: #9881237
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 10.12.2016, 21:08
Ответы с готовыми решениями:

Почему блоки на одном уровне, должны быть один под другим
Подскажите, пожалуйста, у меня блок класса menuDiv должен быть под классом headerDiv. Сейчас они на...

Расположить блоки разной высоты один под другим, в несколько столбцов
Добрый день. Есть блоки разной высоты. Нужно расположить их один под другим в несколько...

Как из ДИВ-блоков верстают сайты с двумя и более колонками, ведь по умолчанию ДИВ-блоки располагаются один под другим?
Большинство сайтов имеют боковые колонки (так называемые сайтбары), как их делают с помощью блочной...

Как сделать один фон под другим
Скрин макета - Мне нужно что бы один фон был под другим выше ссылка на скрин макета &lt;!DOCTYPE...

5
2 / 2 / 2
Регистрация: 23.06.2016
Сообщений: 73
10.12.2016, 21:20 2
Если делаешь меню, лучше использовать
HTML5
1
2
3
4
5
6

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Добавлено через 3 минуты
Для <li> используй
CSS
1

display: inline-block;
1
16 / 16 / 9
Регистрация: 02.04.2016
Сообщений: 143
11.12.2016, 01:52 3
TM1596, Добрый вечер!
1.) Используйте display:block для li;
2.)Много лишнего кода, можно всё было сделать намного проще;
1
2 / 2 / 0
Регистрация: 10.12.2016
Сообщений: 50
11.12.2016, 11:01  [ТС] 4
Сделал через тег <li>.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Панель</title>
   <link href="styles/site.css" rel="stylesheet">
</head>
 
    <body>
    <ul>
    <li id= "google"> <a href="http://google.com.ua">Гугл</a></li>
    <li id= "yandex"> <a href="http://yandex.ua">Яндекс</a></li>
    <li id= "yahoo"> <a href="https://www.yahoo.com">Yahoo</a></li>
    <li id= "mail"> <a href="http://go.mail.ru">Поиск MAIL.RU</a></li>
    </ul>
    </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
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

@font-face {
    font-family: v_CCAdamKubert;
    src: url('../fonts/v_CCAdamKubert.ttf');
}
 
#google {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#google a {
    display: block;
    color: #E02F15;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
 
#google a:hover {
    background: #D5D5D5;
}
 
#yandex {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#yandex a {
    display: block;
    color: #DBC91A;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
#yandex a:hover {
    background: #D5D5D5;
}
 
#yahoo {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#yahoo a {
    display: block;
    color: #710CBB;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
 
#yahoo a:hover {
    background: #D5D5D5;
}
 
#mail {
    height: 50px;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: row;
    Font-family: "v_CCAdamKubert", sans-serif;
}
 
#mail a {
    display: block;
    color: #125AD6;
    text-decoration: none;
    padding: 0 20px;
    height: 25px;
    line-height: 70px;
    border-radius: 10px;
}
#mail a:hover {
    background: #D5D5D5;
}
Но не добился желаемого результата(выстроить блоки один под одним).
0
Эксперт HTML/CSS
2960 / 2578 / 1068
Регистрация: 15.12.2012
Сообщений: 9,733
Записей в блоге: 11
11.12.2016, 12:00 5
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

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

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Панель</title>
   <link href="styles/site.css" rel="stylesheet">
   <style>
   @font-face {
        font-family: v_CCAdamKubert;
        src: url('../fonts/v_CCAdamKubert.ttf');
    }
     
    #links{list-style: none; margin:0}
    #links li a{display: inline-block; text-decoration: none; height:25px; padding:0 20px; border-radius: 10px; font:16px/25px "v_CCAdamKubert", sans-serif;} 
    #links li a:hover{background: #D5D5D5}
 
    #google a {
        color: #E02F15
    }
 
    #yandex a {
        color: #DBC91A
    }
 
    #yahoo a {
        color: #710CBB
    }
     
     
    #mail a {
        color: #125AD6
    }
   </style>
</head>
<body>
    <ul id="links">
        <li id= "google"> <a href="http://google.com.ua">Гугл</a></li>
        <li id= "yandex"> <a href="http://yandex.ua">Яндекс</a></li>
        <li id= "yahoo"> <a href="https://www.yahoo.com">Yahoo</a></li>
        <li id= "mail"> <a href="http://go.mail.ru">Поиск MAIL.RU</a></li>
    </ul>
</body>
</html>
1
2 / 2 / 2
Регистрация: 23.06.2016
Сообщений: 73
11.12.2016, 12:13 6
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

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Панель</title>
   <style>
   @font-face {
        font-family: v_CCAdamKubert;
        src: url('../fonts/v_CCAdamKubert.ttf');
    }
     
    #links{list-style: none}
/*    #links li{display: inline-block}*/
    #links li a{display: block; text-decoration: none; height:25px; padding:10px; border-radius: 10px; font:16px/25px "v_CCAdamKubert", sans-serif;} 
    #links li a:hover{background: #D5D5D5}
 
    #google a {
        color: #E02F15
    }
 
    #yandex a {
        color: #DBC91A
    }
 
    #yahoo a {
        color: #710CBB
    }
     
     
    #mail a {
        color: #125AD6
    }
   </style>
</head>
<body>
    <ul id="links">
        <li id= "google"> <a href="http://google.com.ua">Гугл</a></li>
        <li id= "yandex"> <a href="http://yandex.ua">Яндекс</a></li>
        <li id= "yahoo"> <a href="https://www.yahoo.com">Yahoo</a></li>
        <li id= "mail"> <a href="http://go.mail.ru">Поиск MAIL.RU</a></li>
    </ul>
</body>
</html>
Добавлено через 8 минут
Вы запутали всех своей темой) в названии темы пишите как выстроить вряд, а пофакту нужно один под другим =)
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 11.12.2016, 12:13
Помогаю со студенческими работами здесь

Как сделать один фон под другим
пожалуйста подскажите как сделать один фон под другим у меня подключен только один фон background1...

При масштабирование сдвигаються блоки один под другой
При масштабирование сдвигаються блоки один под другой....Как сделать что бы они не сдвигались, а...

Блоки не выравниваются в ряд, а сползают один под другой
Пол дня мучаюсь, не найду решения. Есть код: &lt;style&gt; #main {width: 960px} #left {width:...

Выстроить блоки в ряд
Помогите разобраться. Почему у меня блоки идут в столбец , а не в строку? &lt;div...


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

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

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