Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты
Категории Все вопросы проекта Компьютеры, Интернет Темы для взрослых Авто, Мото Красота и Здоровье Товары и Услуги Бизнес, Финансы Наука, Техника, Языки Философия, Непознанное Города и Страны Образование Фотография, Видеосъемка Гороскопы, Магия, Гадания Общество, Политика, СМИ Юридическая консультация Досуг, Развлечения Путешествия, Туризм Юмор Еда, Кулинария Работа, Карьера О проектах Mail.ru Животные, Растения Семья, Дом, Дети Другое Знакомства, Любовь, Отношения Спорт Золотой фонд Искусство и Культура Стиль, Мода, Звезды Полный список Спросить Лидеры
Поиск по вопросам

Как сделать верхнее меню в HTML & CSS

AMA_Lucifer Ученик (13), закрыт 1 год назад
У меня есть <li>Download</li> с ссылкой и мне нужно её на черной полосе в центре красиво оформить как это сделать ?
Лучший ответ
Пользователь удален Высший разум (616758) 1 год назад
Есть прекрасный визуальный редактор - WYSIWYG Web Builder 17.
За 10 минут сделаешь!
Остальные ответы
Андрей Панарин Искусственный Интеллект (225301) 1 год назад
Думаю, первым делом нужно добавить логики в разметку.
Сейчас у вас div с логотипом содержит внутри себя div с меню, это не имеет смысла.
Может быть смысл поставить их рядом.
А уже потом при помощи CSS разместить их в одной строчке.
Например, для div с логотипом задать конкретные размеры и float: left, чтобы блок меню обтекал логотип справа.

Но это я вслепую говорю. Для работающего решения нужно пробовать.
Jacob G. Искусственный Интеллект (264409) 1 год назад
Для начала, перемести весь тег .menu из раздела .logo в .head. Потому что это как минимум очень странная структура получается. А если учесть, что ты использовал flex, который я ранее советовал, это совсем неправильно получается. У тебя уже сам .head, это flex контейнер, так что там дело пары свойств.

При такой структуре....
И таким оформлением картинки...
 header .head {  
   display: flex;  
   justify-content: flex-start;  
   gap: 20px;  
   width: 100%;  
   height: 100px;  
   padding: 0 20px;  
   box-sizing: border-box;  
   background-color: #000;  
} 
  
header .head .logo {  
   width: 100px; 
   height: 100%;  
}  
 
header .logo img {  
   height: 100%;  
}
Меню будет выглядеть примерно так...
 header .head .menu ul { 
   display: flex;  
   gap: 20px;  
   height: 100%;  
} 
 
header .head .menu a { 
   display: flex; 
   justify-content: center;  
   align-items: center; 
   height: 100%; 
   padding: 0 20px; 
   background-color: #fff; 
}
Остается только адекватно украсить.

Если тебе нужно само меню выровнять по центру отдельно от логотипа, то придется отрезать его от флекса через position: absolute.
AMA_LuciferУченик (13) 1 год назад
Вот теперь мне нужно ссылку Download переместить в центр и сделать её красивее убрав синее подчёркивание под ней и добавить border-raduis
Jacob G. Искусственный Интеллект (264409) Украшательство, это дело вкуса. К тому же база, тут flex уже ни при чем.
 header .head {  
   position: relative;  
   display: flex;  
   justify-content: center;  
   gap: 20px;  
   width: 100%;  
   height: 100px;  
   padding: 0 20px;  
   box-sizing: border-box;  
   background-color: #000;  
}

header .head .logo {
   position: absolute;
   left: 20px;
   height: 100%;
} 

header .logo img {
   height: 100%;
} 
 
header .head .menu ul { 
   display: flex;  
   align-items: center; 
   gap: 20px;  
   height: 100%;  
} 
 
header .head .menu a { 
   display: flex; 
   justify-content: center;  
   align-items: center; 
   padding: 20px 40px; 
   border-radius: 40px; 
   color: #252525; 
   font-size: 1.2em; 
   text-decoration: none; 
   background-color: #DADADA; 
}
AMA_LuciferУченик (13) 1 год назад
А как добавить в центре блок с белым фоном в котором будет текст ? А еще я добавил 2 тэга li, но теперь там какие то точки, если присмотреться!
AMA_LuciferУченик (13) 1 год назад
и еще я увидел что при изменение ширины родителя логотип движется ? что делать
Jacob G. Искусственный Интеллект (264409) От точек избавиться легко, добавь свойство обнуления стилей списка...
 header .head .menu ul { 
   display: flex;  
   align-items: center; 
   gap: 20px;  
   height: 100%;  
   list-style: none; 
}
А что до размера, то это более сложная тема. Чтобы меню всегда выглядело красиво, нужно использовать относительные единицы измерения (проценты для самих блоков и em для текста)... тут я ничем не помогу, потому что все настраивается под шаблон... читать надо про единицы измерения в CSS. https://learn.javascript.ru/css-units
AMA_LuciferУченик (13) 1 год назад
А как добавить в центре блок с белым фоном в котором будет текст ? А еще я добавил 2 тэга li, но теперь там какие то точки, если присмотреться!
Похожие вопросы