Jak ostylować obszar centralny pasa nawigacji?

0

Lewy pas zwany Navigation (menu, kategorie towarów, klientów, drzewko / spis treści bazy wiedzy, może mały bloczek do szukania), o stałej szerokości, obok przytulony centrum, zależnie od tego co system, wytworzy

Jak wspólcześnie to należało by stylować: absolute, fixed, float?.
Uprzedzę pytania: nie, nigdy nie było to formatowane przez table ;) chyba fixed jest w dotychczasowej wersji

Nie jest celem:
praca na komórkach na pewno nie jest celem.

Celem jest:
Ekrany komputerów, od studenckiego notebooka, po znaczne rozdzielczości
Przyspieszone drukowanie tego centrum - bez nawigacji - na papier (o ile konkretny moduł nie będzie tego robił lepiej własną impelmentacją)
BYĆ MOŻE kiedyś eksperymenty / prawo przeniesienia nawigacji na prawo, eksperyment z fruwająca nawigacją :hover, łatwe ukrywanie jej w zupełności np dla pokazania super treściwych arkuszy

2

jeśli nawigacja o stałej szerokości to dla nawigacji dajesz width: x np width:300px, a dla treści dajesz width: calc(100% - 300px).

1

Co do układu - zrobiłbym to we FLEX: menu stała szeokość, a pozostała część niech będzie się dopasowywać do wolnej przestrzeni.

Co do drukowania - tutaj bym skorzystał z CSS:

@media print {
  .nieDrukujTego {
  visibility: hidden;
}

a następnie w HTML dajesz do treści, które chcesz ukryć class = "nieDruujTego". Nie powinno pójść na drukarkę.
Możesz też ukryć poszczególne elementy z tego "legitnego" bloku - np. zamiast klasy "nieDrukujTego" możesz ukryć poszczególne elementy typu <H1>. Możesz też w ten sposób zmienić formatowanie tekstu na drukarkę - np. zmniejszyć czcionkę, usunąć różne ozdobniki itp.

0

Dzięki za podane pomysły.

Design wizualny ma może 15 lat genetycznej ciągłości. Wersja alfa wywodzi sie ode mnie (nad ksiazkami Myersa, razem z wersją alfa oprogramowania), potem kilka osób to rozwijało / uzupełniało.
Były macane preprocesory CSS, ale (szczęśliwie ???) nie weszły w wersje prod.

Nie zachodzi przypadek, ze "nie działa", ale chodzi o to, aby i w CSS nie zostać z długiem technicznym (w wizualnym też jest takie pojęcie?)

Na czym w swojej istocie polega rewolucja flex ? @cerrato Bo to co jest, to jest efektywnie flex (przynajmniej tak jak rozumiem), choć bez użycia tego słowa.
Na czym polegają święte wojny nad display: flex

1
AnyKtokolwiek napisał(a):

Bo to co jest, to jest efektywnie flex (przynajmniej tak jak rozumiem), choć bez użycia tego słowa.

flex to po prostu coś, co ma display: flex
i przeglądarka później może to fajnie pozycjonować:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Na czym w swojej istocie polega rewolucja flex ?

Na tym, że jeśli masz ciąg poziomy albo pionowy elementów (pojedynczy wiersz albo pojedynczą kolumnę - chociaż mogą się zawijać), to przeglądarka sama może ci to pozycjonować na różne sposoby, dostosować rozmiar elementów wedle tego, jaki "tryb" zadeklarujesz. Ogólnie tak, jak jest to wyjaśnione na obrazkach w linku wyżej.

Na czym polegają święte wojny nad display: flex

Na tym, na czym robić layout strony.

  • Dawno temu ludzie robili layout na tabelkach (<table>). Miało to swoje wady, było nieczytelne i nieelastyczne.
  • Później była era layoutu "na divach" (z użyciem właściwości CSS np. display, position, float, clear itp. albo... emulowali tabelki za pomocą display: table). Miało to tę wadę, że wymagało dużego skilla i robienia wszystkiego na około.
  • Potem wszedł display: flex i ludzie zajarani zaczęli robić layout na flexach (hierarchicznie wkładając flexa we flexa). Jednak flex też ma wady - wymaga zrozumienia jak działa. Plus nie wszystko da się elegancko wystylować flexem.
  • Potem wszedł display: grid, który jest trochę jak flex, ale dla siatek. Trochę jak powrót do layoutu przypominającego tabelki, tylko, że lepiej, bo grid jest specjalnie dostosowany do tego, żeby robić layout, jest elastyczny. Jednak również ma wady - podobnie jak flex wymaga zrozumienia jak działa i nie wszystko da się ładnie wystylować gridem (niektóre rodzaje gridów mogą być zbyt zaawansowane).

Natomiast wojny polegają na tym, że każdy kolejny wynalazek nie znosi przydatności pozostałych. Nawet elementy <table> mają dzisiaj sens, o ile robisz faktycznie tabelkę, która przedstawia jakieś tabularyczne dane (jak w Excelu).

Więc ktoś mówi: używam tylko flexa zawsze i wszędzie!
A ktoś odpowiada no dobra, ale flex nie zawsze się sprawdza i nie ma co tego nadużywać.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.