Вход

Просмотр полной версии : Проблема с версткой меню

FlyTen
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>


:help: :help: :help:
4644
FlyTen
22.07.2021, 23:52
:help:
Gm5
24.07.2021, 10:48
на флексе, при помощи улки с лишками. Имхо, я ж не хнаю над чем точно ты работаешь.
Gm5
24.07.2021, 11:00
то есть в хедере у тебя должен быть центровочный див, а внутри центровочного дива див с лого и див с улкой. И уже при помощи флекса, ты задаёшь стиль улке и лишкам со ссылками меню внутри, а при помощи отступов ты сам див с меню сможешь двигать. Как-то так, насколько я тебя понял.
Gm5
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>
рони
24.07.2021, 16:41
Gm5,
а можно всё вместе?


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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
рони
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
24.07.2021, 17:40
рони,
Понял! Спасибо! Я обычно разными файлами привык, потому и не понял сразу. Да и сам я - тоже новичок пока что.