X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Стиль навигационного меню
Вито_052
Вито_052
Topic Starter сообщение 21.7.2019, 20:58; Ответить: Вито_052
Сообщение #1


Всем привет! Ребят подскажите пожалуйста как сделать навигационное меню как на картинке. Меня интересует линии между словами, типа border-right: solid а как дальше не знаю, точнее не помню как сделать линию не на всю длину а посередине) И ещё интересует как сделать чтобы текст был посередине и растянут на всю ширину, короче как на картинке. Помогите пожалуйста) 


Сообщение отредактировал Вито_052 - 21.7.2019, 21:01
Эскизы прикрепленных изображений
Прикрепленное изображение
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 21.7.2019, 21:34; Ответить: icoder
Сообщение #2


(Вито_052 @ 21.7.2019, 23:58) *
Меня интересует линии между словами, типа border-right: solid а как дальше не знаю, точнее не помню как сделать линию не на всю длину а посередине
 
Делается через псевдо-элемент :before (или :after).
(Вито_052 @ 21.7.2019, 23:58) *
как сделать чтобы текст был посередине и растянут на всю ширину
 
Можно сверстать на flexbox.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artos_mw
Artos_mw
сообщение 22.7.2019, 0:54; Ответить: Artos_mw
Сообщение #3


Вот ещё вариант.

<style>
#tbl {background: blue; color: white; display: table; width: 100%;}
#str {display: table-row}
#tbl .td {display: table-cell; padding: 10px 0; text-align: center;}
#tbl .sel {background: white; color: blue}
#tbl .sel span {border-right: 0}
#tbl span {border-right: 1px solid white; display: block; width: 100%;}
</style>
<div id="tbl">
<div id="str">
<div class="td"><span>Первое</span></div>
<div class="td"><span>Второе</span></div>
<div class="td sel"><span>Выбрано</span></div>
<div class="td"><span>И ещё</span></div>
</div>
</div>

И ещё есть много вариантов
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Вито_052
Вито_052
Topic Starter сообщение 22.7.2019, 13:31; Ответить: Вито_052
Сообщение #4


Спасибо за подсказки)) там идет код

<ul>
<li> 
<li>
<li> и т. д.

Но суть я уловил. А что если просто вставить ту полоску как картинку в фон к тегу li дать ей float right. 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artos_mw
Artos_mw
сообщение 22.7.2019, 15:00; Ответить: Artos_mw
Сообщение #5


Полоску вставить можно и фоном. Только правило для неё будет не флоат, а примерно так
background: url(strip.png) no-repeat right center;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Вито_052
Вито_052
Topic Starter сообщение 22.7.2019, 15:09; Ответить: Вито_052
Сообщение #6


ну да, я уже сделал)) А что насчет позиций, можно разобраться без flexbox/ у меня сейчас весь текст жмется к левому краю. Стиль для тега

li: float: left;  position: relative; Может padding или margin прописать? но нужно чтобы все было пропорционально)

У меня сейчас так:

Эскизы прикрепленных изображений
Прикрепленное изображение
 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artos_mw
Artos_mw
сообщение 22.7.2019, 15:32; Ответить: Artos_mw
Сообщение #7


Не надо ни флоат ни позишн. На то он и флоат, чтобы прижимать куда-нибудь.
Надо из списка ul и li правилами стилей, как написано выше, сделать таблицу

<div id="tbl">
<ul id="str">
<li class="td"><span>Первое</span></li>
<li class="td"><span>Второе</span></li>
<li class="td sel"><span>Выбрано</span></li>
<li class="td"><span>И ещё</span></li>
</ul>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 22.7.2019, 20:58; Ответить: icoder
Сообщение #8


Вито_052, вот готовый пример

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.menu{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background: #1d1d78;
padding: 0;
margin: 0;
list-style: none;
}
.menu>li{
margin: 0;
padding: 0;
position: relative;
flex-grow: 1;
}
.menu>li+li:before{
content: '';
display: block;
position: absolute;
width: 1px;
top: 7px;
bottom: 7px;
left: 0;
background: #aaa;
}
.menu>li>a{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
padding: 0 15px;
text-decoration: none;
}
.menu>li>a:hover{
background: #aaa;
color: #222;
}
</style>
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="">Последние новинки</a></li>
<li><a href="">Свежие новости</a></li>
<li><a href="">Фильмы</a></li>
<li><a href="">Сериалы</a></li>
<li><a href="">Мультфильмы</a></li>
<li><a href="">Расписание сериалов</a></li>
<li><a href="">Игры</a></li>
</ul>
</div>
</body>
</html>


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Вито_052
Вито_052
Topic Starter сообщение 22.7.2019, 22:42; Ответить: Вито_052
Сообщение #9


ещё раз спасибо огромное ребята, завтра попробую все сделать)


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыДизайн презентаций PDF, сайтов и лендингов, фирменный стиль
опыт+, портфолио+, отзывы+
0 Tatyana_S 1326 17.2.2021, 5:46
автор: Tatyana_S
Открытая тема (нет новых ответов) Логотипы в векторе, фирменный стиль, визитки, брендирование и реклама
Web графика и наружная реклама - высокое качество, скромные цены
19 Alyona 21564 8.1.2020, 7:41
автор: traveliver
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОтдельные Css-стиль для приложения Android (под сайт)
3 Вито_052 910 31.10.2019, 22:01
автор: Вито_052
Открытая тема (нет новых ответов) Magic — разработка логотипов и фирменный стиль
5 azmonsta 4401 19.8.2019, 6:30
автор: -aidarmagic-
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1452 28.8.2018, 0:10
автор: TimurR


 



RSS Текстовая версия Сейчас: 28.3.2024, 15:32
Дизайн