Ktoś ma pomysł jak ugryźć taki motyw: chodzi o to, że logo w lewym rogu menu jest przezroczyste, czyli plik png z czarnym konturem i i pustym środkiem. Gdyby szerokość menu była stała nie byłoby problemu, wtedy robimy dla logo float:left + konkretna szerokość, dla menu float: right + konkretna szerokość i tyle, ale menu ma się dostosować do szerokości ekranu. Czy możliwe jest uzyskanie takiego efektu bez js?
Wizual w załączniku.
Na oko to flexbox powinien się sprawdzić.
Z flexem nie warto kombinować, bo nie jest jeszcze obsługiwany dobrze.
Ale tutaj nawet nie trzeba flexa. Jeśli dobrze rozumiem, to wystarczy, że (no właśnie - różnie można to zrozumieć):
<div id="wrapper">
<img src="przezoczysty.png">
<div id="menu">...</div>
</div>
Img ma konkretną szerokość, więc nie mogę podać jej procentowo. Natomiast #menu ma się dostosować do szerokości ekranu.
Ehh... prosiłem o wrzucenie na jsfiddle... Tak zgadywać można o co Ci chodzi...
Może o coś takiego? https://jsfiddle.net/d9uzckoc/
Dokładnie o to chodziło, ale to calc to chyba jeszcze niezbyt dobrze działa. Widzę, że zostaje js, chyba, że ktoś zna inne rozwiązanie.
Buka77 napisał(a):
Dokładnie o to chodziło, ale to calc to chyba jeszcze niezbyt dobrze działa. Widzę, że zostaje js, chyba, że ktoś zna inne rozwiązanie.
A nie stykłoby takie coś, tzn. szerokość div na logo i na menu w procentach, a na zdjęcie wewnątrz logo max-width ?
Skayfer napisał(a):
Buka77 napisał(a):
Dokładnie o to chodziło, ale to calc to chyba jeszcze niezbyt dobrze działa. Widzę, że zostaje js, chyba, że ktoś zna inne rozwiązanie.
A nie stykłoby takie coś, tzn. szerokość div na logo i na menu w procentach, a na zdjęcie wewnątrz logo max-width ?
Wtedy logo będzie zniekształcone, klient by żyć nie dał :)
Pozostaje wykorzystanie calc, albo zabawa jsem. Dzięki za odpowiedzi.
@jarekosm:
W tak trywialnym prostym przypadku nie ma opcji, że to będzie inaczej wyglądać na różnych przeglądarkach.
A chciałbym zwrócić uwagę, że flexbox obsługiwany jest w większej liczbie przeglądarek niż calc.