Jak wyrównać to menu do środka?

[jesu]

https://osiolki.net/tabelki/22navbars.html

[j_t_r]

Beata, wielkie dzięki za fatygę.

Widzę, że temat jest w miarę złożony, przynajmniej dla mnie. Problem w tym, że mam dużo takich menu i myślałem, że wyśrodkowanie ich to kwestia dopisania gdzieś "centera", a tu tyle zachodu z przerabianiem.

Chciałbym wziąć się na serio za css aby móc swobodnie robić sobie takie menu.

Spójrzcie na to menu: https://89.161.156.35/menucss3/. Podobają mi się tu te zaokrąglone narożniki. To menu posiada 2 pliki graficzne. Nie mogę dojść do tego jak to się dzieje, że grafika w tle jest rozciągana do szerokości tekstu, ale co ciekawe jest rozciągana tylko jej część. Jak to się robi, w sensie zapisu?

Na przykład tłem w tym menu jest ten obrazek

ale tylko jego część (bez prawej krawędzi). Jak to się zapisuje? Nigdzie w kursach css nie mogę znaleźć takich operacji.

pozdrawiam

[yavaho]

Podgladnij kod html i style

link jest zapisany tak:

<a><span>link</span></a>

Tag <a> ma ustawone tło do lewej

Tag <span> ma ustawione tło do prawej

Tam w dodatku jeszcze jest efekt rollover.

Tu jest duzo przykladów menu

https://www.cssplay.co.uk/menus/

[Beata_S]

Nie ma za co. Kiedyś ktoś mi pomógł, teraz ja pomagam – tak to się kręci w necie. Fajnie, nie?

Problem jest złożony, jak mówisz, i naprawdę trzeba to bardzo lubić, bo kodowanie stron, jak i budowanie samej nawigacji wymaga mnóstwo nauki, kombinowania, trenowania i… kopania po Googolu. W Googolu można znaleźć wszystko, ale nie zawsze się wie, jakie hasło wstawić, by otrzymać w wyniku to, czego się szuka.

Zaokrąglenia rogów, zarówno w menu jak i jakimś divie osiągnąć można na kilka sposobów:

• stosowne obrazki jako tło
  
• albo za pomocą border,
  
• albo skryptów
  
• albo jakoś po swojemu.
  

Znasz angielski?

Za pomocą skryptów jQuery:

https://malsup.com/jquery/corner/

Obrazkami:

https://complexspiral.com/publications/rounding-tabs/

A tu po polsku, jak wykorzystać jeden obrazek i jak go pozycjonować dla menu albo dla diva:

https://webhosting.pl/CSS.Sprites..Jak.wyko....na.stronie.WWW

To będzie odpowiedź na Twoje pytania to: „Nie mogę dojść do tego jak to się dzieje, że grafika w tle jest rozciągana do szerokości tekstu, ale co ciekawe jest rozciągana tylko jej część. Jak to się robi, w sensie zapisu?” Ten obrazek-tło, który wkleiłeś w swoim poście, pozycjonuje się w taki sposób, że albo widać tylko jego górną część, albo tylko dolną. Można też wypozycjonować tak, że widoczna będzie tylko lewa albo prawa strona, albo w ogóle jakikolwiek wybrany przez Ciebie fragment.

O rogach po polsku pisze też znany w necie Piotr Petrus:

https://art.webesteem.pl/16/wstd_rounded_corners.php

Pokazuje tu kilka sposobów, za pomocą obrazków, border i skryptów.

Myślę, że tak Cię naprowadzę na to, jak szukać tutoriali i jakichś artykułów opisujących techniki menu. Jest tego ogrom w necie. Jeszcze do tego postu potem wkleję jakieś linki, muszę u siebie w zbiorach nieco poszperać.

@yavaho podał tutaj pożytecznego linka, ale doradziłabym jedynie czerpać pomysły wyglądu menu z takich gotowych zbiorów, bo same kody bywają często niepotrzebnie skomplikowane. Lepiej jest samemu wypracować sobie kilka szablonów, korzystając z opisów takich ludzi jak Piotr Petrus:

https://perfectionorvanity.com/

Na tej stronie ma wyszukiwarkę własnych tematów. Poza tym warto uczyć się z kursu:

https://kurs.browsehappy.pl/

Jest tam spis tematów i też wyszukiwarka.

Jest też fajny kurs „boo”:

https://www.kurshtml.boo.pl/info/indeks.html?SZUKAJ=menu

Tu jest mnóstwo menusów i opisy.

Ale uważaj, bo także na boo można natrafić na błąd. Zdarza się, choć nie często, że coś Ci się rozwala po włączeniu menu pobranego z boo, a okazuje się, że z winy boo, a nie Twojej. Po prostu ucząc się wykonuj sobie własne szablony menusów. I korzystaj rzecz jasna z forum.

Dodatek do postu

O! widzę, że mam już pierwszego plusika na tym forum, dzięki @j_t_r . Mam taki link z przystępnie dość opisanym sposobem tworzenia menusów:

A tutaj podaję do ściągnięcia spakowane 3 przykłady menu, skąd je wzięłam, tam jest informacja. Są to menu przy użyciu obrazków piętrowych i niby-piętrowych. Zapraszam, kogo to interesuje:

A jeszcze tutaj ciekawe menu, płynne mimo że bez zastosowania skryptów. Sam css.

Pozdrawiam