Reklama
Pokazuje wyniki od 1 do 5 z 5

Temat: [html] tabelki a małe ekrany/planowanie strony

  1. #1
    Avatar Andaryel
    Data rejestracji
    2006
    Posty
    1,279
    Siła reputacji
    18

    Domyślny [html] tabelki a małe ekrany/planowanie strony

    Hej Torgi,

    przebudowuję sobie stronę zbudowaną na joomli. Tam, gdzie to możliwe używam oczywiście gotowych modułów albo jakoś z nich korzystam, bo to potem dobrze działa i responsivness na małe ekrany też jest dobrze ogarnięty.

    Natomiast niestety w footerze wymyśliłem sobie poziomą tabelkę, która na małym ekranie psuje układ.

    Stąd moje pytanie, jak zrobić coś taki układ jak na screenie, tylko bez uzycia tabelki. Czy łatwiej zrobić tak żeby ta tabelka się 'przerzucała w pion' na małych ekranach? Bo reszte css do niej mam ok, w sensie jakiś ładny i pasujący hover effect itd.

    [html] tabelki a małe ekrany/planowanie strony-picrel.jpg

  2. #2
    Avatar Decretis
    Data rejestracji
    2004
    Wiek
    31
    Posty
    4,878
    Siła reputacji
    23

    Domyślny

    Display: inline-block albo
    Display: block; float: left albo Flexbox.
    Ja bym to zrobił tak:
    <ul>
    <li>About us</li>
    ...
    </ul>

    Dla ul list-style: none; overflow: hidden;
    Dla li display: block; float: left; width: calc(100% / 6) - tu możesz podać przybliżoną wartość 16.667%. Potem media-queries i zwiększasz szerokość li im mniejsza szerokość okna.
    Jak chcesz coś na dole jeszcze dodać to najpierw dorzuć element z clear: both.
    Ostatnio zmieniony przez Decretis : 13-01-2017, 19:27

  3. Reklama
  4. #3
    Avatar Andaryel
    Data rejestracji
    2006
    Posty
    1,279
    Siła reputacji
    18

    Domyślny

    @Decretis ;
    dzieki!

    i rozumiem ze dla tych bloczków moge tak samo sobie zrobić klasy o określonych stylach w css?

  5. #4
    Avatar Decretis
    Data rejestracji
    2004
    Wiek
    31
    Posty
    4,878
    Siła reputacji
    23

    Domyślny

    Możesz, jak najbardziej.
    Jakbyś miał jakiś problem to zrobiłem na szybko fiddle: https://jsfiddle.net/wq3o2gb3/ przesuwaj to okienko z prawego dolnego rogu żeby zobaczyć jak działają media queries (breakpointy ustawiłem tak żeby dało się to zobaczyć na fiddlu, ale u siebie lepiej zrób standardowe).

  6. #5
    Avatar Andaryel
    Data rejestracji
    2006
    Posty
    1,279
    Siła reputacji
    18

    Domyślny

    dzieki wielkie @Decretis ;

    wszystko cacy (troche pozmienialem ten kod fiddlowy ale to było superprzydatne)

Reklama

Informacje o temacie

Użytkownicy przeglądający temat

Aktualnie 1 użytkowników przegląda ten temat. (0 użytkowników i 1 gości)

Podobne tematy

  1. Dwa ekrany a przeskakujący kursor
    Przez Rajan w dziale Sprzęt i oprogramowanie
    Odpowiedzi: 9
    Ostatni post: 06-06-2017, 17:40
  2. HTML - stawianie strony.
    Przez Xat4Gamers w dziale Programowanie
    Odpowiedzi: 8
    Ostatni post: 16-06-2016, 08:56
  3. ogarnia ktos tabelki bbcode?
    Przez rosen w dziale O wszystkim i o niczym
    Odpowiedzi: 4
    Ostatni post: 24-04-2016, 23:25
  4. Tabelki w wordzie
    Przez konto usunięte w dziale Sprzęt i oprogramowanie
    Odpowiedzi: 3
    Ostatni post: 30-07-2015, 12:50
  5. Odpowiedzi: 2
    Ostatni post: 05-10-2013, 22:39

Zakładki

Zakładki

Zasady postowania

  • Nie możesz pisać nowych tematów
  • Nie możesz pisać postów
  • Nie możesz używać załączników
  • Nie możesz edytować swoich postów
  •