Nierówny box-shadow przy dwóch cieniach w headerze

0

Cześć.

Powróciłem na jakiś czas do CSS/HTML/JS (w zasadzie to tak naprawdę zacząłem się go uczyć, a JS jeszcze nie tknąłem) i już na początku mam problem:

Mam header w którym jest nav (niekompletny, for now), nav i header mają inne cienie, ponieważ gdyby miały jeden brzydko by to wyglądało.
Wygląda to tak
Gdyby przybliżyć na granicę tego jasnego nav'a z headerem, to widać, że ten cień z headera lekko nacina na ten z nav'a, wygląda to brzydko i zastanawiam się, czy da się tego jakoś pozbyć.

Z góry dziękuję za wskazówki dotyczące problemu.

Pozdrawiam.

0

Patrząc na kod, to ja bym to zrobił tak: ten tytuł strony (tekst, który jest obok .menu) wsadziłbym w kontener, i temu kontenerowi nadał cień. Tylko sprawa się komplikuje, jak poprawnie ustawić szerokość tego nowego kontenera (żeby nie wjeżdżał ani nad, ani pod .menu, które pływa). .menu ma ustawiony float – czy musi być, może można z tego zrezygnować?

0

Jeśli chodzi o coś takiego, to wszystko działa, a efekt ten sam.

0

Efekt jest ten sam, ponieważ kontener wjeżdża pod menu, ponieważ .menu ma float. Zobacz tu: https://jsfiddle.net/0j3pxwfo/1/ – po uruchomieniu wypisuje w okienku alert szerokość body oraz tego nowego kontenera. Nie zostaje miejsca na .menu.

Czy z float można zrezygnować?

0

Wcześniej float'a używałem, bo ten nav przyklejał się do tekstu, teraz jak go usuwam, to jest na swoim miejscu, więc super.. Choć nie do końca, bo w ten sposób nie widać tekstu.

@Edit:
Tekst jest, tylko na dole.. Bo można go zaznaczyć.

0

Wykomenowałem float: left, dodałem width: 90% do header div oraz display: flex do header: https://jsfiddle.net/nts0hgx6/ i wydaje się działać poprawnie. Sprawdź dokładnie, czy przy najechaniu kursorem np. nie wychodzi poza ekran.

0

To ja się może najpierw flexa nauczę..

1 użytkowników online, w tym zalogowanych: 0, gości: 1