Перейти к содержимому


× Быстрый вопрос
Пользователь месяца
Андрей WPM Андрей WPM 1-й за Июль
Очков активности: 2 142 4 темы, 90 сообщений, 14 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография Rodiola
    #1

    Rodiola (rukodelkovo.ru)
    Очков активности: 310.5 1 тема, 66 сообщений, 3 балла репутации

  • Фотография maxnik
    #2

    maxnik (konovalovpavel.ru)
    Очков активности: 126 0 тем, 21 сообщение, 4 балла репутации

  • Фотография Андрей WPM
    #3

    Андрей WPM (wpmaster.kz)
    Очков активности: 103.5 Вне конкурса за определение пользователя месяца

  • Фотография annabum
    #4

    annabum
    Очков активности: 75 2 темы, 19 сообщений, 2 балла репутации

  • Фотография IxMaster
    #5

    IxMaster (site.ru)
    Очков активности: 60 2 темы, 14 сообщений, 2 балла репутации

  • Фотография Vmir
    #6

    Vmir
    Очков активности: 54 Вне конкурса за определение пользователя месяца

  • Фотография Megoydagi
    #7

    Megoydagi (24ho.ru)
    Очков активности: 43.5 5 тем, 14 сообщений, 1 балл репутации

  • Фотография lena220678
    #8

    lena220678
    Очков активности: 28.5 2 темы, 13 сообщений, 1 балл репутации

  • Фотография re-search
    #9

    re-search
    Очков активности: 24 4 темы, 4 сообщения, 1 балл репутации

  • Фотография BLIK
    #10

    BLIK
    Очков активности: 24 0 тем, 16 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 30.07.2019
  • Яндекс выдача: 19.08.2019
Топ 5 участников по репутации


Стиль навигационного меню

#1 Вито_052

Вито_052
  • Пользователь
  • 5 сообщений
  • Репутация: 0
0

Отправлено 21 Июль 2019 - 19:58

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

Прикрепленные изображения

  • Безымянный.jpg

 

 

Сообщение отредактировал Вито_052: 21 Июль 2019 - 20:01

  • 0

#2 web-coder

web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 18

Отправлено 21 Июль 2019 - 20:34

Меня интересует линии между словами, типа border-right: solid а как дальше не знаю, точнее не помню как сделать линию не на всю длину а посередине
 

Делается через псевдо-элемент :before (или :after).

как сделать чтобы текст был посередине и растянут на всю ширину
 

Можно сверстать на flexbox.


  • 0

#3 Artos

Artos
  • Пользователь
  • 100 сообщений
  • Репутация: 11

Отправлено 21 Июль 2019 - 23:54

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

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

И ещё есть много вариантов


  • 0

#4 Вито_052

Вито_052
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 22 Июль 2019 - 12:31

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

 

<ul>

<li> 

<li>

<li> и т. д.

 

Но суть я уловил. А что если просто вставить ту полоску как картинку в фон к тегу li дать ей float right. 


  • 0

#5 Artos

Artos
  • Пользователь
  • 100 сообщений
  • Репутация: 11

Отправлено 22 Июль 2019 - 14:00

Полоску вставить можно и фоном. Только правило для неё будет не флоат, а примерно так
background: url(strip.png) no-repeat right center;
  • 0

#6 Вито_052

Вито_052
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 22 Июль 2019 - 14:09

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

 

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

 

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

Прикрепленные изображения

  • меню.png

  • 0

#7 Artos

Artos
  • Пользователь
  • 100 сообщений
  • Репутация: 11

Отправлено 22 Июль 2019 - 14:32

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

Надо из списка 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>

  • 0

#8 web-coder

web-coder
  • Пользователь
  • 118 сообщений
  • Репутация: 18

Отправлено 22 Июль 2019 - 19:58

@Вито_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>

  • 0

#9 Вито_052

Вито_052
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 22 Июль 2019 - 21:42

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


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru