Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2021, 00:16
Интересующийся
Отправить личное сообщение для FlyTen Посмотреть профиль Найти все сообщения от FlyTen
 
Регистрация: 02.03.2021
Сообщений: 17

Проблема с версткой меню
Всем привет!
Не могу понять , как в моем случае, можно нормально сверстать меню, создав только один класс 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, 23.07.2021 в 00:45.
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2021, 00:52
Интересующийся
Отправить личное сообщение для FlyTen Посмотреть профиль Найти все сообщения от FlyTen
 
Регистрация: 02.03.2021
Сообщений: 17

Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2021, 11:48
Gm5 Gm5 вне форума
Интересующийся
Отправить личное сообщение для Gm5 Посмотреть профиль Найти все сообщения от Gm5
 
Регистрация: 10.07.2021
Сообщений: 17

на флексе, при помощи улки с лишками. Имхо, я ж не хнаю над чем точно ты работаешь.
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2021, 12:00
Gm5 Gm5 вне форума
Интересующийся
Отправить личное сообщение для Gm5 Посмотреть профиль Найти все сообщения от Gm5
 
Регистрация: 10.07.2021
Сообщений: 17

то есть в хедере у тебя должен быть центровочный див, а внутри центровочного дива див с лого и див с улкой. И уже при помощи флекса, ты задаёшь стиль улке и лишкам со ссылками меню внутри, а при помощи отступов ты сам див с меню сможешь двигать. Как-то так, насколько я тебя понял.
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2021, 16:56
Gm5 Gm5 вне форума
Интересующийся
Отправить личное сообщение для Gm5 Посмотреть профиль Найти все сообщения от Gm5
 
Регистрация: 10.07.2021
Сообщений: 17

<!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, 25.07.2021 в 10:45.
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2021, 17:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,154

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #7 (permalink)  
Старый 24.07.2021, 18:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,154

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>
Ответить с цитированием
  #8 (permalink)  
Старый 24.07.2021, 18:40
Gm5 Gm5 вне форума
Интересующийся
Отправить личное сообщение для Gm5 Посмотреть профиль Найти все сообщения от Gm5
 
Регистрация: 10.07.2021
Сообщений: 17

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

Последний раз редактировалось Gm5, 24.07.2021 в 18:53.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает свое меню после AJAX AnonimS jQuery 6 07.02.2018 21:51
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Выпадающие меню like2dev Общие вопросы Javascript 9 21.10.2011 14:09
Проблема с меню акордеоном technokid Библиотеки/Тулкиты/Фреймворки 0 24.05.2011 15:15
проблема с ниспадающим меню в IE 7 adifucan Элементы интерфейса 0 18.04.2011 16:28