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

Odpowiedz Nowy wątek
2019-04-08 22:01
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.


"Jesteśmy karłami, którzy wspięli się na ramiona olbrzymów. W ten sposób widzimy więcej i dalej niż oni, ale nie dlatego, ażeby wzrok nasz był bystrzejszy, lub wzrost słuszniejszy, ale dlatego, iż to oni nas dźwigają w górę i podnoszą o całą gigantyczną wysokość" ~ Bernard z Chartes
edytowany 4x, ostatnio: PrezesiQ, 2019-04-08 22:02

Pozostało 580 znaków

2019-04-08 23:18
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ć?

Pozostało 580 znaków

2019-04-09 19:25
0

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


"Jesteśmy karłami, którzy wspięli się na ramiona olbrzymów. W ten sposób widzimy więcej i dalej niż oni, ale nie dlatego, ażeby wzrok nasz był bystrzejszy, lub wzrost słuszniejszy, ale dlatego, iż to oni nas dźwigają w górę i podnoszą o całą gigantyczną wysokość" ~ Bernard z Chartes

Pozostało 580 znaków

2019-04-09 20:03
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ć?

edytowany 2x, ostatnio: Silv, 2019-04-09 20:43

Pozostało 580 znaków

2019-04-10 20:07
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ć.


"Jesteśmy karłami, którzy wspięli się na ramiona olbrzymów. W ten sposób widzimy więcej i dalej niż oni, ale nie dlatego, ażeby wzrok nasz był bystrzejszy, lub wzrost słuszniejszy, ale dlatego, iż to oni nas dźwigają w górę i podnoszą o całą gigantyczną wysokość" ~ Bernard z Chartes
edytowany 1x, ostatnio: PrezesiQ, 2019-04-10 20:07

Pozostało 580 znaków

2019-04-11 00:40
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.

Pozostało 580 znaków

2019-04-12 16:51
0

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


"Jesteśmy karłami, którzy wspięli się na ramiona olbrzymów. W ten sposób widzimy więcej i dalej niż oni, ale nie dlatego, ażeby wzrok nasz był bystrzejszy, lub wzrost słuszniejszy, ale dlatego, iż to oni nas dźwigają w górę i podnoszą o całą gigantyczną wysokość" ~ Bernard z Chartes
Zobaczę, czy się da float. Ale fleksa możesz się nauczyć i tak. Ale w sumie nie ma czego się uczyć. Korzystasz z tego cały czas -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ i nauka sama przychodzi z praktyki. :) Najważniejsze display: flex. - Silv 2019-04-12 22:01

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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