Проблема с версткой меню
Вложений: 1
Всем привет!
Не могу понять , как в моем случае, можно нормально сверстать меню, создав только один класс 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 |
:help:
|
на флексе, при помощи улки с лишками. Имхо, я ж не хнаю над чем точно ты работаешь.
|
то есть в хедере у тебя должен быть центровочный див, а внутри центровочного дива див с лого и див с улкой. И уже при помощи флекса, ты задаёшь стиль улке и лишкам со ссылками меню внутри, а при помощи отступов ты сам див с меню сможешь двигать. Как-то так, насколько я тебя понял.
|
<!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,
а можно всё вместе? [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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>
|
рони,
Понял! Спасибо! Я обычно разными файлами привык, потому и не понял сразу. Да и сам я - тоже новичок пока что. |
| Часовой пояс GMT +3, время: 10:57. |