Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Wysokość div'a
Forum PHP.pl > Forum > Przedszkole
banpl
20.11.2009, 00:07:37
Witam Wszystkich smile.gif

Mam problem z pewnym div'em. Szukałem jakiegoś rozwiązania w głowie oraz w internecie ale jakoś takowego nie znalazłem, dlatego piszę tutaj smile.gif

Kod HTML
[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. 	<head>
  4. 		<link rel="stylesheet" href="style.css" type="text/css">
  5. 	</head>
  6.  
  7. 	<body>
  8.  
  9. 		<div class="tabela">
  10.  
  11. 			<div class="row">
  12. 				<div class="cell_dzienTygodnia">Wt</div>
  13. 				<div class="cell_colspan2">1</div>
  14. 				<div class="cell_colspan2">3</div>
  15. 				<div class="cell_colspan2">5</div>
  16. 				<div class="cell_colspan2">7</div>
  17. 				<div class="cell">9</div>
  18. 				<div class="cell">10</div>
  19. 				<div class="cell">11</div>
  20. 				<div class="cell">12</div>
  21. 			</div>
  22.  
  23. 			<div class="row">
  24. 				<div class="cell_dzienTygodnia_rowspan">Śr</div>
  25. 				<div class="cell_rowspan">
  26. 					<div class="row">
  27. 						<div class="cell">1</div>
  28. 						<div class="cell">2</div>
  29. 						<div class="cell_colspan2">3</div>
  30. 						<div class="cell_colspan2">5</div>
  31. 						<div class="cell_colspan2">7</div>
  32. 						<div class="cell">9</div>
  33. 						<div class="cell">10</div>
  34. 						<div class="cell">11</div>
  35. 						<div class="cell">12</div>
  36. 					</div>
  37. 					<div class="row">
  38. 						<div class="cell">1</div>
  39. 						<div class="cell">2</div>
  40. 						<div class="cell">3</div>
  41. 						<div class="cell">4</div>
  42. 						<div class="cell">5</div>
  43. 						<div class="cell">6</div>
  44. 						<div class="cell">7</div>
  45. 						<div class="cell_colspan2">8</div>
  46. 						<div class="cell">10</div>
  47. 						<div class="cell">11</div>
  48. 						<div class="cell">12</div>
  49. 					</div>
  50. 				</div>
  51. 			</div>
  52.  
  53. 			<div class="row">
  54. 				<div class="cell_dzienTygodnia">Czw</div>
  55. 				<div class="cell_colspan2">1</div>
  56. 				<div class="cell_colspan2">3</div>
  57. 				<div class="cell_colspan2">5</div>
  58. 				<div class="cell_colspan4">7</div>
  59. 				<div class="cell">11</div>
  60. 				<div class="cell">12</div>
  61. 			</div>
  62.  
  63. 		</div>
  64.  
  65. 	</body>
  66.  
  67. </html>
[HTML] pobierz, plaintext


plik style.css
[CSS] pobierz, plaintext 
  1. div.tabela
  2. {
  3. 	display: block;
  4. 	width: 1000px;
  5. 	border-top: 1px solid #000;
  6. 	border-right: 1px solid #000;
  7. }
  8.  
  9. div.row
  10. {
  11. 	display: block;
  12. 	width: 100%;
  13. }
  14.  
  15. div.cell_dzienTygodnia
  16. {
  17. 	display: inline-block;
  18. 	width: 39px;
  19. 	border-left: 1px solid #000;
  20. 	border-bottom: 1px solid #000;
  21. 	text-align: center;
  22. 	float: left;
  23. }
  24.  
  25. div.cell
  26. {
  27. 	display: inline-block;
  28. 	width: 79px;
  29. 	border-left: 1px solid #000;
  30. 	border-bottom: 1px solid #000;
  31. 	text-align: center;
  32. 	background-color: #CCC;
  33. 	float: left;
  34. }
  35.  
  36. div.cell_colspan2
  37. {
  38. 	display: inline-block;
  39. 	width: 159px;
  40. 	border-left: 1px solid #000;
  41. 	border-bottom: 1px solid #000;
  42. 	text-align: center;
  43. 	background-color: #9CC;
  44. 	float: left;
  45. }
  46.  
  47. div.cell_colspan3
  48. {
  49. 	display: inline-block;
  50. 	width: 239px;
  51. 	border-left: 1px solid #000;
  52. 	border-bottom: 1px solid #000;
  53. 	text-align: center;
  54. 	float: left;
  55. }
  56.  
  57. div.cell_colspan4
  58. {
  59. 	display: inline-block;
  60. 	width: 319px;
  61. 	border-left: 1px solid #000;
  62. 	border-bottom: 1px solid #000;
  63. 	text-align: center;
  64. 	float: left;
  65. }
  66.  
  67. div.cell_dzienTygodnia_rowspan
  68. {
  69. 	width: 39px;
  70. 	border-left: 1px solid #000;
  71. 	border-bottom: 1px solid #000;
  72. 	background-color: #09F;
  73. 	text-align: center;
  74. 	float: left;
  75. }
  76.  
  77. div.cell_rowspan
  78. {
  79. 	width: 960px;
  80. 	float: left;
  81. }
[CSS] pobierz, plaintext


Gdyby komuś nie chciało się przekopiowywać do pliku, zamieszczam zdjęcie


Problem jest div'em, w którym znajduje się napis Śr.
Otóż jak zrobić aby wypełniał całą wysokość, żeby nie było białego odstępu questionmark.gif
Oraz dlaczego nie wyświetla się prawy bok całości questionmark.gif
lamcpp
20.11.2009, 00:23:13
a nie wystarczy w arkuszu stylów dodać atrybut height
np.
[PHP] pobierz, plaintext 
  1. div.cell_dzienTygodnia_rowspan
  2. {
  3.     width: 39px;
  4.     height: 41px;
  5.     border-left: 1px solid #000;
  6.     border-bottom: 1px solid #000;
  7.     background-color: #09F;
  8.     text-align: center;
  9.     float: left;
  10. }
[PHP] pobierz, plaintext
banpl
20.11.2009, 00:39:31
no niby można ale jeśli zmieni się wysokość którejkolwiek z linii to pomysł już pada, chodzi o to aby wysokość tego div'a sama się dostosowywała.
athei
20.11.2009, 08:56:46
Jaki jest sens robienia tego na divach, skoro widać, że najlepiej nadawałaby się tabela?
DarKhangel
20.11.2009, 12:46:35
Witam.
Nie lepiej dodać border-left do głównego DIV'a? Wówczas zawsze będzie obramowanie po lewej stronie niezależnie od rozmiaru tabeli. Nie wiem czemu nie masz obramowania po prawej stronie. Podaj na jakiej przeglądarce zauważyłeś taki błąd.
Tak wyglądałby Twój kod po zmianach.
[CSS] pobierz, plaintext 
  1. div.tabela
  2. {
  3. 	display: block;
  4. 	width: 1000px;
  5. 	border-top: 1px solid #000;
  6. 	border-right: 1px solid #000;
  7. 	border-left: 1px solid #000;
  8. }
  9. div.cell_dzienTygodnia
  10. {
  11. 	display: inline-block;
  12. 	width: 39px;
  13. 	border-bottom: 1px solid #000;
  14. 	text-align: center;
  15. 	float: left;
  16. }
  17. div.cell_dzienTygodnia_rowspan
  18. {
  19. 	width: 39px;
  20. 	border-bottom: 1px solid #000;
  21. 	background-color: #09F;
  22. 	text-align: center;
  23. 	float: left;
  24. }
[CSS] pobierz, plaintext
banpl
20.11.2009, 13:00:55
testowałem to tylko pod firefox'em

na chwile obecną w wygląda to tak:

IE:


OPERA:


FIREFOX:


Cytat
Jaki jest sens robienia tego na divach, skoro widać, że najlepiej nadawałaby się tabela?

Pomyślałem sobie że na divach będzie jakoś bardziej przejrzyście i łatwiejsze w edycji. Ale jeśli nie uda znaleźć się rozwiązania to zastosuje tabelę.
askone
20.11.2009, 13:07:12
Hej

Tabele są po to by przedstawiać dane tabelaryczne, a w Twoim przypadku o takich danych mówimy - więc... winksmiley.jpg

ps. Divy są dobre, ale jak wszystko w nadmiarze mogą tylko zaszkodzić

Pozdro
230005
20.11.2009, 13:10:41
Nie wiem w jaki sposób na divach miałoby być bardziej przejrzyście, lub łatwiejsze w edycji oraz dlaczego od samego początku nie zrobiłeś tego jako tabeli smile.gif. Przecież nawet głównemu divovi przypisałeś klasę tabela, a komórkom "cell*". Tabele są przeznaczone do przedstawiania danych tabelarycznych, a jak sam przyznałeś poprzez nazewnictwo klas ten kalendarzyk doskonale odpowiada ich przeznaczeniu smile.gif. No i pomyśl sobie, że chciałbyś dodać do tego jakiś js, np do sortowania, albo przesuwania mychą kolumn - znacznie łatwiej będzie to zaimplementować z tabelami.
banpl
20.11.2009, 13:30:36
Ostatnie 2 odpowiedzi przekonały mnie do użycia jednak tabeli, dziękuję bardzo za wszystkie sugestie i odpowiedzi.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.