Не передвигается меню на сайте

@Danil_Dezert · Регистрация: 10.06.2018

Студворк — интернет-сервис помощи студентам

Добрый день! Я учусь верёстке и мне нужна ваша помощь.
Пытаюсь сверстать меню и что-то не выходит...
Нужно вот так:
А получается только так:
Непонимаю как сделать правильно!? Все перепробовал , пробовал через "Display:block" , но не выходит. Помогите пожалуйста!
HTML:<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Organaisation</title>
<meta name="description" content="Our company can help you in management, design, branding..."/>
<meta name="keywords" content=""/>
<link rel="stylesheet" href="style.css">

</head>

<body>
<div class="main">

<div class="header">

<div class="menubar">
<ul class="menu">
<li class="menubar_content"><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

</div>

</div>

</body>

</html>

CSS:*{
margin: 0;
padding: 0;
}

/** Header_menubar **/
.header{
height: 689px;
background-color: #f6f2f2;
}

.menubar{
position: absolute;
width: 1252px;
height: 92px;
margin-top: 27px;
margin-left: 250px;
background-color: #313030;
}

ul.menu{
float: left;
}

ul.menu li{
float: right;
list-style: none;
border: 1px solid red;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 34px;
padding-top: 39px;
margin-right: 340px;

}

ul.menu li a{
color: #e0e0e0;
text-decoration: none;
font-family: "Open Sans";
font-size: 14px;
}

@freshxmp3 · 22.07.2018, 00:20

Тоже новичок, не судите строго:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="menu">
<nav>
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</nav>
</div>

</body>
</html>
.menu{
background-color: #313030;
height: 92px;
color:#fff;
}
nav {
width: 500px;
margin: 0 auto;
}
li{
display: block;
float: left;
height: 57px;
padding-right: 20px;
padding-top: 35px;
padding-left: 15px;

}
li:first-child {
background-color: #FF3F40;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Danil_Dezert 0 / 0 / 0 Регистрация: 10.06.2018 Сообщений: 6

	Не передвигается меню на сайте 21.07.2018, 14:32. Показов 711. Ответов 1 Метки нет (Все метки) Добрый день! Я учусь верёстке и мне нужна ваша помощь. Пытаюсь сверстать меню и что-то не выходит... Нужно вот так: А получается только так: Непонимаю как сделать правильно!? Все перепробовал , пробовал через "Display:block" , но не выходит. Помогите пожалуйста! HTML:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Organaisation</title> <meta name="description" content="Our company can help you in management, design, branding..."/> <meta name="keywords" content=""/> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="header"> <div class="menubar"> <ul class="menu"> <li class="menubar_content"><a href="#">HOME</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> </div> </body> </html> CSS:{ margin: 0; padding: 0; } /* Header_menubar **/ .header{ height: 689px; background-color: #f6f2f2; } .menubar{ position: absolute; width: 1252px; height: 92px; margin-top: 27px; margin-left: 250px; background-color: #313030; } ul.menu{ float: left; } ul.menu li{ float: right; list-style: none; border: 1px solid red; padding-left: 25px; padding-right: 25px; padding-bottom: 34px; padding-top: 39px; margin-right: 340px; } ul.menu li a{ color: #e0e0e0; text-decoration: none; font-family: "Open Sans"; font-size: 14px; } Миниатюры 0

@freshxmp3 29 / 21 / 9 Регистрация: 21.07.2018 Сообщений: 142
	22.07.2018, 00:20
	Тоже новичок, не судите строго: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="menu"> <nav> <ul> <li>HOME</li> <li>PORTFOLIO</li> <li>ABOUT US</li> <li>CONTACT</li> </ul> </nav> </div> </body> </html> .menu{ background-color: #313030; height: 92px; color:#fff; } nav { width: 500px; margin: 0 auto; } li{ display: block; float: left; height: 57px; padding-right: 20px; padding-top: 35px; padding-left: 15px; } li:first-child { background-color: #FF3F40; } Миниатюры 0