Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Wysokość div'a
banpl
post
Post #1





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 2.11.2005
Skąd: Radomsko

Ostrzeżenie: (0%)
-----

Witam Wszystkich (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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
(IMG:http://i48.tinypic.com/2cr7re8.jpg)

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 (IMG:style_emoticons/default/questionmark.gif)
Oraz dlaczego nie wyświetla się prawy bok całości (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
lamcpp
post
Post #2





Grupa: Zarejestrowani
Postów: 372
Pomógł: 2
Dołączył: 10.05.2009

Ostrzeżenie: (0%)
-----

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


Ten post edytował lamcpp 20.11.2009, 00:23:38
Go to the top of the page
+Quote Post
banpl
post
Post #3





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 2.11.2005
Skąd: Radomsko

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
athei
post
Post #4





Grupa: Zarejestrowani
Postów: 389
Pomógł: 141
Dołączył: 11.04.2009

Ostrzeżenie: (0%)
-----

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

Ten post edytował athei 20.11.2009, 08:57:03
Go to the top of the page
+Quote Post
DarKhangel
post
Post #5





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 20.11.2009

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
banpl
post
Post #6





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 2.11.2005
Skąd: Radomsko

Ostrzeżenie: (0%)
-----

testowałem to tylko pod firefox'em

na chwile obecną w wygląda to tak:

IE:
(IMG:http://i49.tinypic.com/r9eads.jpg)

OPERA:
(IMG:http://i49.tinypic.com/2cxc0zo.jpg)

FIREFOX:
(IMG:http://i50.tinypic.com/55r0gp.jpg)

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ę.
Go to the top of the page
+Quote Post
askone
post
Post #7





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

Ostrzeżenie: (0%)
-----

Hej

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

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

Pozdro
Go to the top of the page
+Quote Post
230005
post
Post #8





Grupa: Zarejestrowani
Postów: 316
Pomógł: 36
Dołączył: 2.04.2008

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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.
Go to the top of the page
+Quote Post
banpl
post
Post #9





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 2.11.2005
Skąd: Radomsko

Ostrzeżenie: (0%)
-----

Ostatnie 2 odpowiedzi przekonały mnie do użycia jednak tabeli, dziękuję bardzo za wszystkie sugestie i odpowiedzi.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 4.10.2025 - 16:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn