Выстроить блоки один под другим
Здравствуйте. Для закрепления теории решил сделать простенькое меню, которое бы перекидывало с помощью кнопок на нужные поисковые системы(скрин).
1) Как сделать эти элементы один под другим, а не в ряд?
2) Дайте рекомендации по оптимизации кода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
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>
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; }
Почему блоки на одном уровне, должны быть один под другим
Подскажите, пожалуйста, у меня блок класса menuDiv должен быть под классом headerDiv. Сейчас они на.
Расположить блоки разной высоты один под другим, в несколько столбцов
Добрый день. Есть блоки разной высоты. Нужно расположить их один под другим в несколько.
Как из ДИВ-блоков верстают сайты с двумя и более колонками, ведь по умолчанию ДИВ-блоки располагаются один под другим?
Большинство сайтов имеют боковые колонки (так называемые сайтбары), как их делают с помощью блочной.
Как сделать один фон под другим
Скрин макета — Мне нужно что бы один фон был под другим выше ссылка на скрин макета <!DOCTYPE.
ul> li>/li> li>/li> li>/li> li>/li> /ul>
TM1596, Добрый вечер!
1.) Используйте display:block для li;
2.)Много лишнего кода, можно всё было сделать намного проще;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
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>
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; }
CSS. Кнопки наезжают одна на другую.
a.button8 position: absolute;
top:50%;
left: 100px;
display: inline-block;
color: white;
font-weight: 700;
text-decoration: none;
user-select: none;
padding: .5em 2em;
outline: none;
border: 2px solid;
border-radius: 1px;
transition: 0.2s;
>
Когда пытаюсь вывести кнопки в HTML:
У меня кнопки наезжают друг на друга.
В чем причина я вижу и понимаю, но не понимаю как исправить. Мне нужно поставить кнопки в определенном месте, и чтобы они шли в ряд друг за другом (3,4,5,6 кнопок).
Чтобы одна вставала там, где она встает сейчас, а остальные вставали правее.
Помогите, пожалуйста, исправить! Пробовал по-разному — ничего не получается.
[a href=»#» ]Установить [/a][a href=»#» ]удалить [/a]
Разумеется, наезжают. У тебя же position: absolute; И при этом совершенно одинаковые координаты обеих кнопок: top:50%; left: 100px;
Каждый блок position: absolute ничего не знает о соседних блоках и позиционируется независимо от них.
Либо сделай для одной из кнопок left: 500px; (или сколько там тебе надо).
Либо делай абсолютной позиционирование не кнопок, а блока div, в который эти кнопки завёрнуты.
P.S. Сочетание position: absolute; и display: inline-block; выглядит по меньшей мере странно.
Да я понимаю это. Просто все, что сейчас там написано — это попытки раздвинуть кнопки в разные стороны))