Форум

FlyTen · #1 (**permalink**) 22.07.2021, 23:16

Всем привет!
Не могу понять , как в моем случае, можно нормально сверстать меню, создав только один класс menu , вместо menu_left и menu_right.

<div class="menu_left" >
    
    
                <div class="menu__item">
                    <a href="#" title="Shop" class="menu__item__link"><span class="menu__item__link__text">SHOP</span></a>
                </div>
        
                <div class="menu__item">
                    <a href="" title="about" class="menu__item__link"><span class="menu__item__link__text">ABOUT</span></a>
                </div>
            </div>
                <a href=""  class="logo">
                    <img src="assets/sds.jpgf" class="logo__image">
    
                </a>
                    <div class ="menu_right">
                <div class="menu__item">
                    <a href="" title="cart" class="menu__item__link"><span class="menu__item__link__text">CART</span></a>
                </div>
                <div class="menu__item">
                    <a href="" title="eur" class="menu__item__link "><span class="menu__item__link__text">EUR</span></a>
                </div>
            </div>

Screenshot .png

FlyTen · #2 (**permalink**) 22.07.2021, 23:52

Gm5 · #3 (**permalink**) 24.07.2021, 10:48

на флексе, при помощи улки с лишками. Имхо, я ж не хнаю над чем точно ты работаешь.

Gm5 · #4 (**permalink**) 24.07.2021, 11:00

то есть в хедере у тебя должен быть центровочный див, а внутри центровочного дива див с лого и див с улкой. И уже при помощи флекса, ты задаёшь стиль улке и лишкам со ссылками меню внутри, а при помощи отступов ты сам див с меню сможешь двигать. Как-то так, насколько я тебя понял.

Gm5 · #5 (**permalink**) 24.07.2021, 15:56

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .wrapper{
    width:400px;/*Задав ширину главного дива, делаем его по центру*/
    margin: 0 auto;
}
ul{

    list-style-type:none;/*убираем маркеры улки(кружочки пунктов меню) и сбрасываем отступы на ноль*/
    margin:0;
    padding-left: 0;
}
li{
    border: 1px solid black;/*граница для наглядности, но можно и без неё*/
    display:inline-block;/*задаём строчно-блочные элементы, чтобы сделать горизонталь*/
    padding:5px;/*отступы внутри пунктов меню*/
    margin-right: 15px;/*отступы снаружи пунктов меню(справа)*/
}
li a{
    text-decoration: none;/*убираем подчёркивание текста ссылки*/
}
</style>
</head>
<body>
<div class="wrapper">
            <div class="menu">
                <ul>
                    <li><a href="#">SHOP</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#"  class="logo">
                        <img src="assets/sds.jpgf" class="logo__image"></a></li>
                    <li><a href="#">CART</a></li>
                    <li><a href="#">EUR</a></li>
                </ul>
            </div>
        </div>
</body>
</html>

рони · #6 (**permalink**) 24.07.2021, 16:41

Gm5,
а можно всё вместе?

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #7 (**permalink**) 24.07.2021, 17:19

Gm5,

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .wrapper{
    width:400px;/*Задав ширину главного дива, делаем его по центру*/
    margin: 0 auto;
}
ul{

    list-style-type:none;/*убираем маркеры улки(кружочки пунктов меню) и сбрасываем отступы на ноль*/
    margin:0;
    padding-left: 0;
}
li{
    border: 1px solid black;/*граница для наглядности, но можно и без неё*/
    display:inline-block;/*задаём строчно-блочные элементы, чтобы сделать горизонталь*/
    padding:5px;/*отступы внутри пунктов меню*/
    margin-right: 15px;/*отступы снаружи пунктов меню(справа)*/
}
li a{
    text-decoration: none;/*убираем подчёркивание текста ссылки*/
}
    </style>
</head>
<body>
<div class="wrapper">
            <div class="menu">
                <ul>
                    <li><a href="#">SHOP</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#"  class="logo">
                        <img src="assets/sds.jpgf" class="logo__image"></a></li>
                    <li><a href="#">CART</a></li>
                    <li><a href="#">EUR</a></li>
                </ul>
            </div>
        </div>
</body>
</html>

Gm5 · #8 (**permalink**) 24.07.2021, 17:40

рони,
Понял! Спасибо! Я обычно разными файлами привык, потому и не понял сразу. Да и сам я - тоже новичок пока что.

Форум

Справочник

Discord чат

Курсы javascript