CSS colspan

pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
0

Witam!

Borykam się ze znanym problemem. Oto kod:

Kopiuj

<html>
  <head>

    <style>
	
      #block{
        font-size:24px;
		width:100%;
      }

      #left{
        background-color:#DDD;
        min-height:150px;
        width:25%;
      }
	  
	  #right{
        background-color:lightblue;
        min-height:150px;
        width:75%;
      }
	 
	  .row{
	  display:table-row;
	  }
	  
	  .cell{
	  display:table-cell;
	  }
	  
	  .table{
	  display:table;
	  }

    </style>

  </head>

<body>

  <div id="block" class="table">
	
	<div class="row">
		<div id="left" class="cell">to jest lewa kolumna<br /><br /></div>
		<div id="right" class="cell">to jest prawa kolumna</div>
	</div>
	
  </div>

</body>

</html>


Webmasterzy pewnie już wiedzą o co mi będzie chodziło ;) Moim marzeniem jest, aby dodać do tego układu nagłówek ponad istniejącymi już dwiema kolumnami oraz stopkę poniżej. Stopka i nagłówek oczywiście muszą zajmować 100% długości obu kolumn, czyli tak, jak gdybyśmy zrobili kolejną komórkę i ustawili collspan="2" w zwykłej tabeli html. Szukałem już na wielu forach i nie znalazłem odpowiedzi, jak to zrobić.
Stosuję "rozwiązanie kolumnowe", ponieważ chcę, aby wysokości tych dwóch divów (left i right) były takie same niezależnie od treści w każdym z nich. W jaki sposób mogę dodać tutaj nagłówek i stopkę, aby nie była to siermięga i szablon był na poziomie?

Pozdrawiam!

ŁF
Moderator
  • Rejestracja:ponad 22 lata
  • Ostatnio:3 dni
0

display może przyjmować całą gamę wartości - sprawdź, jakie. Nazwy wartości są dość czytelne.


edytowany 1x, ostatnio: ŁF
pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
0

Tak jak mówiłem, szukałem już na wielu forach, również i na kursach, nie znalazłem odpowiedzi. Wyobraź sobie, że raczyłem sprawdzić wartości dla display zanim napisałem posta.

dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Rzeszów
0

@pavon147: nie ma. albo robisz normalną tabelę i masz dostęp do wszystkich ficzerów tabelki, albo nie robisz tabeli i masz ograniczone możliwości.

edit: przeczytałem całego posta. do takiej samej wysokości kolumn masz hacki css, javascript, tabele, udawane tabele (ale bez colspan), albo... flexbox: http://codepen.io/imohkay/pen/gpard

Browser support:
http://caniuse.com/flexbox


edytowany 1x, ostatnio: dzek69
pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
0

@dzek69 Przecież na tabeli nie zrobię strony. Czyli nie da się? A jeżeli będę miał te dwie kolumny jako divy z float:left, to jest jakiś sposób na to, aby ich wysokość była taka sama, aby zwiększała się dynamicznie jedna kolumna względem drugiej?

dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Rzeszów
0

@pavon147: edytowałem wyżej

jeżeli robisz z display: table to równie dobrze możesz wstawić <table> ;p semantyka nie ma większego znaczenia widzę, skoro używasz tylko divów, więc ;)


pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
0

No z tymi hackami css to chyba jest kiepsko, bo nawet na stackoverflow wymiękają :D Chyba będę musiał później w jQuery to jakoś zrobić. Ale muszę powiedzieć, że przykro mi się zrobiło, gdy się przekonałem, że nie można tak po ludzku zrobić szablonu... Zawsze robiłem szablony przez position:absolute, relative. Okazało się, że tak się nie robi. Przekonwertowałem swój mózg i robię według prawidłowych zasad, no to znowu jaja z wysokością divów...

ŁF
Moderator
  • Rejestracja:ponad 22 lata
  • Ostatnio:3 dni
1

Bardzo rzadko robię layout w ten sposób, ale do tej pory było to banalne, stąd mój nietrafiony pomysł na table-caption :-)
Jednakże da się z użyciem właśnie tej wartości, tylko w zupełnie inny sposób (testowałem tylko na ff):

Kopiuj
kontener display:table-caption
  nagłówek (dopasowany do automatycznej szerokości tabeli)
  tabela display:table
    wiersz display:table-row
      komórka display:table-cell
      komórka display:table-cell
      ...
    ...
  stopka (dopasowana do automatycznej szerokości tabeli)

Każdy z elementów to div.


mr_jaro
  • Rejestracja:prawie 14 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
0

Teraz strzelam, ale może by ruszyło jakby tym 2 divom nadać min-height:100%; ? Z pozycjonowaniem elementów to są takie jaja, że nigdy nie wiesz na 100%, że coś będzie działał tak jak myślisz, że będzie więc może to ruszy.


It's All About the Game.
dzek69
nie będzie działało. (min-)height zadziała tylko, gdy rodzic będzie miał ustaloną (nie automatyczną) wysokość.
pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
0

Na razie zostawiłem ten problem i sposób "tabelowy", stwierdziłem, że będę później próbował ustawiać te kolumny (ich wysokość) za pomocą jQuery. W tej chwili ustawiłem jednakowe tło dla kontenera i kolumn, a wewnątrz nich znajdują się dodatkowe divy z własnym formatowaniem i póki co może to takie być. Ale tak na szybko mam jeszcze pytanie odnośnie hackowania tego w jQuery. Czy wyrównywanie tych wysokości kolumn będzie się odbywało mniej więcej na takiej zasadzie:

  1. Pobierz wysokości kolumn i sprawdź, która jest wyższa.
  2. Przypisz wysokość wyższej kolumny do niższej.
  3. Ciesz się wyrównanymi kolumnami.

Będzie tak wesoło, czy nie bardzo?

dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Rzeszów
1

Będzie wesoło, ale:

  1. jeżeli masz obrazki - wtedy wysokości przeliczaj na window.load nie na document.ready, inaczej możliwe, że Ci przeliczy nie uwzględniając wysokości obrazków
  2. jeżeli masz treść zmienną (ajax, zmiana treści w DOM z innych powodów) - musisz to przeliczać przy każdej zmianie
  3. przeliczając korzystaj z scrollHeight, nie height() i podobnych

A sztuczka z display:table-caption nie działa?


mr_jaro
  • Rejestracja:prawie 14 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
0
dzek69 napisał(a):
  1. przeliczając korzystaj z scrollHeight, nie height() i podobnych

Można też clientHeight


It's All About the Game.
pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
0

@ŁF W wolnej chwili sprawdzę, czy to faktycznie działa, ale wydaje się to interesujące, dzięki ;)

@dzek69 Dzięki za rady odnośnie jQuery ;)

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.