CSS colspan

0

Witam!

Borykam się ze znanym problemem. Oto kod:


<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!

0

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

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.

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

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?

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 ;)

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...

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):

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.

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.

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?

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?

0
dzek69 napisał(a):
  1. przeliczając korzystaj z scrollHeight, nie height() i podobnych

Można też clientHeight

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 ;)

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