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:dzień
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:19 dni
  • 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:19 dni
  • 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:dzień
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:19 dni
  • 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 ;)

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)