Какой самый оптимальный вариант сделать меню с лого?

Question

[intriga93]

тоесть есть меню
в нем четыре пункта + лого
лого по центру (а два пункта по бокам)

или просто делается так - третьим пунктом меню - логотип?
https://jsfiddle.net/3nbajewc/

Comments

[Ankhena]

Лого абсолютом, в список пунктов меню оно логически не очень вписывается.
Меню флексом, 3 пункту левый margin auto.

[intriga93]

Ankhena, спасибо, а как можно подправить?
https://jsfiddle.net/5z1L6w9q/

[Ankhena]

intriga93, что именно, как оно должно выглядеть?

[intriga93]

Ankhena, лого почему то не видно ( точки вместо надписи озон)
и плюс как следствие (как мне кажется, тоесть ошибки связаны) расстояния между пунктами не одинаковые

[Ankhena]

intriga93, логотипу вы задали максимальную ширину 30 точек.
Расстояние между пунктами одинаковое, по 80px, как вы и задали.

[intriga93]

Ankhena, так суть в том, что не видные некоторые пункты. и соответсвенно расстояния нет https://jsfiddle.net/y3ev5fn1/2/

[intriga93]

Ankhena, просто кого не спрашиваю и мои попытки также безуспешны были

[Ankhena]

intriga93, сейчас вы всем элементам задаете одинаковый отступ. Раньше 80, сейчас 20.
Но ведь между 2 и 3 не 80.
А два раза по 80 + ширина логотипа.

[intriga93]

Ankhena, так дело в самой методике, чтобы потом можно было поменять. В макете вообще по 40

[Ankhena]

intriga93, хорошо, 40+40+ ширина лого.
Ширину лого можно узнавать на js и писать в css-переменную.

[intriga93]

Ankhena, я вот делаю
задаю через css, но не суть ( переделать не проблема, главное знать, что писать)

14 строкой в css задаю стили. НО как то все-равно нету расстояния везде одинакового

https://jsfiddle.net/bwpe38od/5/

[Ankhena]

intriga93, я сейчас заплачу.
Калькулятор даже на компе есть встроенный, никуда ходить не надо.

Вы ставите между ссылками 40px.

Между 2 и 3 ставите 245.
Ширина лого 175 (165+5+5).
Остается 245-175 = 70.
70 пополам это 35.

И да, 35 не равно 40.
Поэтому отступы не равны.
Посчитаете, чтобы были одинаковыми - будут одинаковыми.

[intriga93]

intriga93, вот вариант который был ранее
jsfiddle.net/bwpe38od

[Ankhena]

intriga93,

вот вариант который был ранее
jsfiddle.net/bwpe38od

А в этом варианте вы просто забыли убрать паддинг у ul.

Просто очень внимательно смотрите что показывает инспектор, обводите рамками, тенями, outline. Рамки бордером не лучший вариант, так как так или иначе влияет на ширину.
Хороший вариант outline и outline-offset с отрицательным значением на ширину outlin'а.

[intriga93]

Ankhena, ставлю 35
все-равно не так

https://jsfiddle.net/nspLkhze/2/

[intriga93]

Ankhena,outline
https://jsfiddle.net/nspLkhze/3/

[intriga93]

Ankhena, вроде выравнивается как нужно если дать последниму пункту меню в списке margin-right: 80px
не знаю насколько тут это корректно

[Ankhena]

intriga93, потому что нет симметрии у пунктов меню...

[intriga93]

Ankhena, так маргин райт нормально тут? последнему элементу

Answer 1

[Евгений Голубев]

1. То есть пишется раздельно
2. Кто вам мешает вставить логотип между li со своим css?


Ну на крайняк сделать 3 дива. сложится при адаптиве спокойно если в 3 столбца.

Правда нормальные люди li просто в ul оборачивают и между ними пихают лого, но кто сказал что я нормальный?!

<div id='nav'>
  <ul class='navigation'>
    <li class='navigation-4len1'><a href='#'>Твое меню1</a></li>
  </ul>
  <img src="Тво картинка.jpg" id="logo" />
  <ul class="navigation">
    <li class='navigation-4len2'><a href='#'>Твое меню2</a></li>
  </ul>
</div>

Comments

[Ankhena]

2. Кто вам мешает вставить логотип между li со своим css?

Спецификация...

А с другими вариантами семантика.

[Евгений Голубев]

Ankhena, Не совсем понятен ваш ответ если честно. Все оборачивают li в ul и ставят между двумя ul угодный им див лого.

[Ankhena]

Евгений Голубев,

Не совсем понятен ваш ответ если честно.

Не понятно, где спецификация? Или что конкретно?

Дочерними элементами ul могут быть только li.

Все оборачивают li в ul и ставят между двумя ul угодный им див лого.

Даже не хочу знать, кто эти "все".

Даже если современные очень добрые браузеры сделают вид, что поняли, что имел в виду нерадивый верстальщик не значит, что так делать хорошо.

[Евгений Голубев]

Ankhena, Все - это значит все. Вам никто и не говорит оборачивать div в li...
Вы код выше то посмотрели?
Открываешь ul, в нем твои 2 li, закрываешь ul.
Ставишь свое лого.
Открываешь второй ul, ставить остальные 2 li, закрываешь.
Все это в в одном диве. Не понимаю в чем вы увидели проблему.

<div id='nav'>
  <ul</b> class='navigation'>
    <li class='navigation-4len1'><a href='#'>Твое меню1</a></li>
</ul>
|
|
<div class='logoinnav'>
<img src="Тво картинка.jpg" id="logo" />
</div>
|
|
  <ul</b> class="navigation">
    <li class='navigation-4len2'><a href='#'>Твое меню2</a></li>
</ul>
</div>

Странно задавать вопрос и кричать что так нельзя... Когда гугл прекрасно говорит об обратном.
И да, вы свою пикчу хоть в li можете впхинуть. Без всяких дивов промеж ul

[Ankhena]

Евгений Голубев, про спеку было к этому скрину


Про семантику - к разбиению на два списка или про лого как элемент списка меню.

[Евгений Голубев]

Ankhena, Ну блин) если сударь прямого юмора не понимает с пометкой "Правда нормальные люди li просто в ul оборачивают и между ними пихают лого, но кто сказал что я нормальный?!"

Это уж не моя вина)

Интересно как человек это себе представляет если НЕ вставлять пикчу в ли, НЕ бить на 2 списка и НЕ делать вообще как 3 независимых элемента)))

[Ankhena]

Евгений Голубев,

Интересно как человек это себе представляет

Я это написала почти час назад в комментарии к вопросу.
Более того, у меня с этим справляются даже студенты первого курса верстки. Даже с переполнением такого меню.

Про сударя вообще ерунда какая-то вышла.

[Антон Литвиненко]

Ankhena, так какой же вариант правильный? Я тоже последний раз делал два меню, лучшего варианта для последующей интеграции с вордпресс не придумал и не нагуглил

[Ankhena]

Антон Литвиненко, я написала свой вариант в комментарии к вопросу.