Несколько вопросов по верстке заголовка лендинга. Как сверстать меню?

Question

[lahomie93]

Здравствуйте. Я верстаю свой первый макет и для тренировки выбрал это: www.freepsdhtml.com/download-mogo-free-one-page-ps... На данный момент я верстаю заголовок страницы (крупный план):

spoiler

На данный момент я застрял в самом начале и у меня не получается сделать меню. В хроме шапка выглядит так:

spoiler

Вот что я успел накодить:

spoiler

<header>
    <div class="container">
        <div class="header_menu clearfix">
                <p>MoGo</p>
                <ul>
                    <li class="text_menu_item">
                        <a href="#">about</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">service</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">work</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">blog</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">contact</a>
                    </li>
                    <img src="images/1) header/shopping-cart-menu.png" id=cart_icon height="15" width="18"/>
                    <img src="images/1) header/magnifying-glass-menu.png" id=glass_icon" height="18" width="18"/>
                </ul>
            </nav>
        </div>
    </div>
</header>

body {
    padding: 0px;
    margin: 0px;
}

header {
    background: url("../images/1) header/header.jpg") no-repeat center top/cover;
    height: 600px;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

.container .header_menu {
    font-family: 'Montserrat', sans-serif;
    color: white;
}

.clearfix:after {
    content: '';
    display: table;
    width: 100%;
    clear: both;
}

.container .header_menu p{
    font-size: 30px;
    font-weight: bold;
    float: left;
}

nav{
    float: right;
}

#cart_icon{
    list-style: none;
    float: left;
    margin-right: 40px;
}

#glass_icon{
    list-style: none;
    float: left;
    margin-left: 55px;
}

.text_menu_item{
    list-style: none;
    float: left;
    margin-right: 40px;
}

.text_menu_item a{
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
}

Как можно увидеть из рисунка у меня не очень похоже получается. И у меня возникли следующие вопросы:
1) в блоке header_menu каким образом можно разместить абзац p и список ul таким образом чтобы они располагались на одной строчки?
2) как я могу растянуть компонеты p и ul так чтобы логотим MoGo был у правого края контейнера, а меню в ul у левого?
3) каким образом я могу выровнять логотип MoGo и опции меню чтобы они находились на одной линии?
4)Ну и последний вопрос: можете порекомендовать мне как сделать подсвечивающиеся меню с полоской как на макете?

Answer 1

[boga-net]

У вас разметка html хромает. Пропущен открывающий тег nav
Картинки внутри тега ul

Что это такое ....? ((

<img src="images/1) header/shopping-cart-menu.png" id=cart_icon height="15" width="18"/>
<img src="images/1) header/magnifying-glass-menu.png" id=glass_icon" height="18" width="18"/>

images/1) header/shopping-cart-menu.png - впервые вижу такой путь

id=cart_icon height="15"

Вам не кажется, что пропущены кавычки ?

В CSS что-то такое страшное, что в fiddle ничего не работает )

https://jsfiddle.net/ouodkeLn/204/

Это что касается выравнивания меню по центру

Comments

[lahomie93]

Спасибо за подробный ответ. Синтаксис подправил. Непривычно работать в HTML после well formed XML, когда тебя в косяки носом тыкают. По поводу пути: я разложил фотки разных блоков по папкам. images-корневая папка. 1) header папка с фотками для первого блока. Это мое ноу хау)) Как лучше мне организовать путь для фото тогда?

[boga-net]

lahomie93, использовать универальный путь images/pic-1.jpg - это значит, что картинка будет искаться в папке images, которая лежит на том же уровне, что и файл html. Если работаете в sublime text, то у него нсть плагин, который сам прописывает путь к элементу

Answer 2

[Ankhena]

Завязывайте с флоатами. Верстайте с помощью flex. По дороге изучайте гриды.

1. Итак,

display:flex;
justify-content: space-between;

https://html5book.ru/css3-flexbox/
2.
justify-content: space-between;
3.
align-items: center;
4. эмммм... border-color? В чем сложность?
Можно псевдоэлементом еще, если полоска уже, чем текст.

Answer 3

[lahomie93]

Всем спасибо за ваши ответы. Я познакомился с flex и он в разы лучше, чем работа с float и clearfix:

теперь мой код и страница выглядят вот так

html

:

<header>
    <div class="container">
        <div class="header_full">
            <p>MoGo</p>
            <div class="header_menu">
                <nav>
                    <li class="text_menu_item">
                        <a href="#">about</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">service</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">work</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">blog</a>
                    </li>
                    <li class="text_menu_item">
                        <a href="#">contact</a>
                    </li>
                </nav>
                <img src="images/1) header/shopping-cart-menu.png" id="cart_icon" height="15" width="18"/>
                <img src="images/1) header/magnifying-glass-menu.png" id="glass_icon" height="18" width="18"/>
            </div>
        </div>
    </div>
</header>

css

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

header {
    background: url("../images/1) header/header.jpg") no-repeat center top/cover;
    height: 600px;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

.container .header_full {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Montserrat', sans-serif;
    color: white;
}

.container .header_menu{
    display: flex;
    align-items: normal;
}

.container .header_menu nav{
    display: flex;
    align-items: baseline;
}

.container .header_full p{
    font-size: 30px;
    font-weight: bold;
    margin-top: 20px;
}

#cart_icon{
    margin-right: 55px;
}

.text_menu_item{
    list-style: none;
    margin-right: 40px;
}

.text_menu_item a{
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
}

скриншот