Логотип и меню в одной строке

@nbkiller · Регистрация: 19.07.2016

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

Вообщем такая проблема, хочу поставить меню и лого в одну строчку. Мне казалось, что уже по стандарту вещи стоят в ряд, если, конечно, не написать какой-нить <br>.
Вот CSS:

CSS

    body{
    margin:50;
    padding:0;
    background:#191919;
    }
    header {
    
    margin: 0;
    padding:0;
    float:left;
    }
    #nav,#nav li {
        margin:0;
        padding:0;
        
    }
    #nav {
        text-align:center;
        background:#292929;
        width: 900px;
    }
    #nav li{
        width: 150px;
        display:inline-block;
        text-align:center;
    }
    #nav a{
        display: block;
        text-decoration:none;
        color:#fff;
        padding:7px 15px;
    }
    #nav a:hover {
        background: #404040;
    }

Вот HTML:

HTML5

<body>
    <header>
        <img class="logo" src="http://images.vfl.ru/ii/1468953734/0ea199cd/13438649.png" height="200"></img>
        
                <ul id="nav">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">NEWS</a></li>
                    <li><a href="#">RUSSIA</a></li>
                    <li><a href="#">ECONOMICS</a></li>
                    
                </ul>
    
        
    </header>
</body>

2 картинки:
Как сейчас выглядит:

Как хотелось бы:

Если не тяжело объясните новичку, как сделать, а не просто чистый ответ. Лазил по форуму, в большинстве случаев кидали ссылки с похожими случаями, но это не то.

@Janosense · 19.07.2016, 23:03

Сообщение от nbkiller

Если не тяжело объясните новичку, как сделать, а не просто чистый ответ

лично мое мнение - лучше когда сам человек разберется, чем ему кто-то расскажет. Могу посоветовать пройти курс (не сочтите за рекламу, я никакого отношения к этому не имею) он конкретно затрагивает ваши вопросы.
Что касается вашего примера то вы неправильно используете свойство float. Вам блок с меню необходимо "расположить справа", соответственно задать ему

CSS

1	float: right;

Блоку header вы задаёте float: left; - в вашей ситуации этого делать не нужно, вам необходимо правильно расположить элементы которые в нем.
И у <img> нет закрывающего тега, т.е. он пишется как:

HTML5

1	<img src="https://www.cyberforum.ru/html/html/html/..." alt="">

и все.

@nbkiller · 19.07.2016, 23:11 **[ТС]**

img закрыт, на этой же строке, а как правильно расположить в header?

@Janosense · 19.07.2016, 23:15

Сообщение от nbkiller

img закрыт, на этой же строке

я к тому что закрывающий тег </img> не нужен.

Сообщение от nbkiller

а как правильно расположить в header?

убрать у header float, задать блоку с меню:

CSS

#nav {
        text-align:center;
        background:#292929;
        width: 900px;
        float: right;
    }

и продолжать дальше экспериментировать.

@nbkiller · 19.07.2016, 23:26 **[ТС]**

рили хорошая идея) потом с маржин топ спустил, спасибо

@ntlinuxnt · 19.07.2016, 23:29

Или

CSS

1	display:inline-block

присвоить, думаю вам тоже понравится.

@nbkiller · 19.07.2016, 23:33 **[ТС]**

я ставил inline block для всех тегов меню, но из-за этого, вроде, она не становилась по центру. В итоге посмотрел на сайтах и исправил в a { на просто block. А если Вы говорите про присвоение к img, то у меня вообще ничего в css с img не работает, скорее всего я туплю)

@mrtoxas · 19.07.2016, 23:38

Сообщение от nbkiller

этого она не становилась по центру

Задаете родителю

CSS

1	text-align:center

и все становится как надо

@nbkiller · 19.07.2016, 23:46 **[ТС]**

извините за глупый вопрос, но на что это влияет, объективно? я знаю, что если не написать display в a {, то все что написано не будет применяться, например написал паддинг и нету разницы.

@mrtoxas · 19.07.2016, 23:56

<a> это строчный элемент. Чтобы применять к нему отступы, нужно сделать его блочно-строчным, или блочным.

@nbkiller · 19.07.2016, 23:58 **[ТС]**

спасибо за объяснение)

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.07.2016, 23:56	10
	<a> это строчный элемент. Чтобы применять к нему отступы, нужно сделать его блочно-строчным, или блочным. 1

Новые блоги и статьи
Как написать микросервис на C# с Kafka, MediatR, Redis и GitLab CI/CD InfoMaster 15.01.2025 В современной разработке программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот подход позволяет разделить сложную систему. . .	Что такое CQRS и как это реализовать на C# с MediatR InfoMaster 15.01.2025 Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .	Как настроить CI/CD с Azure DevOps InfoMaster 15.01.2025 CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .	Как настроить CI/CD с помощью Jenkins InfoMaster 15.01.2025 Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .	Как написать микросервис на Go/Golang с Kafka, REST и GitHub CI/CD InfoMaster 14.01.2025 Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .	Как написать микросервис с нуля на C# с RabbitMQ, CQRS, Swagger и CI/CD InfoMaster 14.01.2025 В современном мире разработки программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот архитектурный подход предполагает. . .
Как создать интернет-магазин на PHP и JavaScript InfoMaster 14.01.2025 В современном мире электронная коммерция стала неотъемлемой частью бизнеса. Создание собственного интернет-магазина открывает широкие возможности для предпринимателей, позволяя достичь большей. . .	Как написать Тетрис на Ассемблере InfoMaster 14.01.2025 Тетрис – одна из самых узнаваемых и популярных компьютерных игр, созданная в 1984 году советским программистом Алексеем Пажитновым. За прошедшие десятилетия она завоевала симпатии миллионы людей по. . .	Как создать игру "Танчики" на Unity3d и C# InfoMaster 14.01.2025 Разработка игр – это увлекательный процесс, сочетающий в себе творчество и технические навыки. В этой статье мы рассмотрим создание классической игры "Танчики" с использованием Unity3D и языка. . .	Организую платный онлайн микро-курс по доработке Android-клиента Telegram _Ivana 14.01.2025 Официальная версия и распространенные форки не полностью устраивают? Сделай свою кастомную версию клиента! 4 занятия по 2 часа (2 недели пн, ср 19:00-21:00 по Москве). Первое вводное занятие. . .	Как создать приложение для фитнеса для iOS/iPhone на Kotlin InfoMaster 14.01.2025 Создание собственного фитнес-приложения — это не только захватывающий, но и полезный процесс, ведь оно может стать вашим верным помощником на пути к здоровому и активному образу жизни. В современных. . .	Как создать приложение магазина для iOS/iPhone на Swift InfoMaster 14.01.2025 Введение в разработку iOS-приложений Разработка приложений для iPhone и других устройств на базе iOS открывает огромные возможности для создания инновационных мобильных решений. В данной статье мы. . .

@nbkiller 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 15
	19.07.2016, 23:11 [ТС]	3
	img закрыт, на этой же строке, а как правильно расположить в header? 0

@nbkiller 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 15
	19.07.2016, 23:26 [ТС]	5
	рили хорошая идея) потом с маржин топ спустил, спасибо 0

@nbkiller 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 15
	19.07.2016, 23:33 [ТС]	7
	я ставил inline block для всех тегов меню, но из-за этого, вроде, она не становилась по центру. В итоге посмотрел на сайтах и исправил в a { на просто block. А если Вы говорите про присвоение к img, то у меня вообще ничего в css с img не работает, скорее всего я туплю) 0

@nbkiller 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 15
	19.07.2016, 23:46 [ТС]	9
	извините за глупый вопрос, но на что это влияет, объективно? я знаю, что если не написать display в a {, то все что написано не будет применяться, например написал паддинг и нету разницы. 0

@nbkiller 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 15
	19.07.2016, 23:58 [ТС]	11
	спасибо за объяснение) 0

Логотип и меню в одной строке

Решение