Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Kotwica ucina zawartość strony
Forum PHP.pl > Forum > Po stronie przeglądarki
Savage.Mephisto
5.07.2010, 20:39:22
Witam.
Natrafiłem na mały problem przy budowie strony - po kliknięciu na kotwicę (z odnośnikiem do punktu na stronie -> #cokolwiek, przenosi do elementu o id cokolwiek) przechodzi mi do owego elementu, ale przy okazji "ucina" prawie cala stronę - aż do elementu. Nie powiem - zgłupiałem.
Prawdopodobnie błąd leży po stronie CSS, w tym wypadku: overflow: hidden.
Podaję fragmenty kodu:

CSS:

[HTML] pobierz, plaintext 
  1. * { margin: 0; padding: 0; }
  2.  
  3. body {
  4. 	font-family: Arial, Helvetica, sans-serif;
  5. 	font-size: 12px;
  6. 	text-align: left;
  7. 	background-color: #010000;
  8. }
  9.  
  10. div#layout {
  11. 	width: 1024px;
  12. 	margin: auto;
  13. 	height: auto;
  14. 	overflow: hidden;
  15. 	background-color: transparent;
  16. 	text-align: center;
  17. }
  18.  
  19. div#center {
  20. 	margin: 0 auto;
  21. 	width: 1024px;
  22. 	height: auto;
  23. 	background-color: transparent;
  24. 	overflow: hidden;
  25. }
  26.  
  27. div#center_mid {
  28. 	margin: 0 auto;
  29. 	overflow: hidden;
  30. 	width: 1024px;
  31. 	height: auto;
  32. 	background-color: #221e1f;
  33. }
  34.  
  35. div#left {
  36. 	float: left;
  37. 	padding: 0px 0px 20px 0px;
  38. 	width: 255px;
  39. 	min-height: 450px;
  40. 	height: auto !important;
  41. 	height: 450px;
  42. 	background: #221e1f url("../images/left_menu_bcg.jpg") repeat-x;
  43. }
  44.  
  45. div#content_top {
  46. 	margin: 0 auto;
  47. 	overflow: hidden;
  48. 	height: auto;
  49. 	background-color: #343233;
  50. }
  51.  
  52. div#content {
  53. 	float: left;
  54. 	padding: 0px 10px 0px 10px;
  55. 	width: 749px !important;
  56. 	width: 748px;
  57. 	min-height: 450px;
  58. 	height: auto !important;
  59. 	height: 450px;
  60. 	text-align: left;
  61. 	color: #9a9a9c;
  62. 	background: #e9e9eb url("../images/content_top.jpg") repeat-x left top;
  63. }
  64.  
  65. div#left, div#content { padding-bottom: 20000px; margin-bottom: -20000px; }
  66.  
  67. div#footer {
  68. 	margin: 0 auto;
  69. 	clear: both;
  70. 	width: 1024px;
  71. 	height: 30px;
  72. 	background-color: #202123;
  73. }
[HTML] pobierz, plaintext


========================

HTML:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
  3. <head>
  4. <base href="http://designgroup.nazwa.pl/PAC/" />
  5. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. <title>Pioneer Arms Corp.</title>
  8. <!-- htmlCSS start -->
  9. <link rel="stylesheet" href="css/style.css" type="text/css" />
  10. <!-- htmlCSS end -->
  11. </head>
  12. <body>
  13.  
  14. <div id="layout">
  15.  
  16. 	<div id="center">
  17.  
  18. 		<!-- htmlContent start -->
  19. 		<div id="center_mid">
  20.  
  21. 			<!-- htmlMenu start -->
  22. 			<div id="left"></div>
  23. 			<!-- htmlMenu end -->
  24.  
  25. 			<div id="content_top"></div>
  26.  
  27. 			<div id="content">
  28.  
  29. 				<!-- htmlShowArtNoH start -->
  30. 				<div class="naglowek">SALES</div>
  31. 				<div style="padding: 20px 10px 20px 10px;"><p><strong>Click on the State Abbreviations to see Pioneer Dealer nearby you:</strong></p>
  32. <p>&nbsp;</p>
  33. <p style="text-align: center;"><a href="http://designgroup.nazwa.pl/PAC/sales.html#alabama">AL</a></p>
  34. <p><strong><a name="alabama">ALABAMA</a></strong></p>
  35. <p>POBOYS GUNS AND AMMO</p>
  36. <p>2147 S OATES STREET</p>
  37. <p>DOTHAN AL 36301</p>
  38. <p>334-702-9161</p>
  39. <p><br /> <br /></p>
  40. <p><strong><a name="arizona">ARIZONA</a></strong></p>
  41. <p>SECOND AMENDMENT SPORTS</p>
  42. 				<!-- htmlShowArtNoH end -->
  43.  
  44. 			</div>
  45.  
  46. 		</div>
  47. 		<!-- htmlContent end -->
  48.  
  49. 	</div>
  50.  
  51. </div>
  52.  
  53. <!-- htmlFooter start -->
  54. <div id="footer"></div>
  55. <!-- htmlFooter end -->
  56.  
  57. </body>
  58. </html>
[HTML] pobierz, plaintext



========================

Link do strony -> http://designgroup.nazwa.pl/PAC/sales.html
Z góry dziękuję za pomoc.
Matiash
15.07.2010, 19:05:13
Nie wiem w czym problem. Tak działają kotwice. Robisz #link i przenosi Cię do miejsca na stronie w którym jest np <div id="link">, i zawsze znajduje się u samej góry strony ten div.
Savage.Mephisto
15.07.2010, 21:20:40
W tej chwili działa, gdyż zmieniłem nieco wpisy w pliku style.css. 

[HTML] pobierz, plaintext 
  1. * { margin: 0; padding: 0; }
  2.  
  3. body {
  4. 	font-family: Arial, Helvetica, sans-serif;
  5. 	font-size: 12px;
  6. 	text-align: left;
  7. 	background-color: #010000;
  8. }
  9.  
  10. div#layout {
  11. 	width: 1024px;
  12. 	margin: auto;
  13. 	height: auto;
  14. 	overflow: hidden;
  15. 	background-color: #221e1f;
  16. 	text-align: center;
  17. }
  18.  
  19. div#center {
  20. 	margin: 0 auto;
  21. 	width: 1024px;
  22. 	height: auto;
  23. }
  24.  
  25. div#center_mid {
  26. 	margin: 0 auto;
  27. 	width: 1024px;
  28. 	min-height: 770px;
  29. 	background-color: #221e1f;
  30. }
  31.  
  32. div#left {
  33. 	float: left;
  34. 	padding: 0px 0px 20px 0px;
  35. 	width: 255px;
  36. 	height: 100%;
  37. 	background: #221e1f url("../images/left_menu_bcg.jpg") repeat-x;
  38. }
  39.  
  40. div#content {
  41. 	float: left;
  42. 	padding: 0px 10px 0px 10px;
  43. 	width: 749px !important;
  44. 	width: 748px;
  45. 	min-height: 450px;
  46. 	height: auto !important;
  47. 	height: 450px;
  48. 	text-align: left;
  49. 	color: #9a9a9c;
  50. 	background: #e9e9eb url("../images/content_top.jpg") repeat-x left top;
  51. }
  52.  
  53. div#content_top {
  54. 	margin: 0 auto;
  55. 	overflow: hidden;
  56. 	height: auto;
  57. 	background-color: #343233;
  58. }
  59.  
  60. div#footer {
  61. 	margin: 0 auto;
  62. 	clear: both;
  63. 	width: 1024px;
  64. 	height: 30px;
  65. 	background-color: #202123;
  66. }
[HTML] pobierz, plaintext


Pozostaje tylko problem wysokości warstwy o nazwie content, kiedy warstwa left ma wysokość większą niż 450px. Poprzednim razem regułka: 

[HTML] pobierz, plaintext 
  1. div#left, div#content { padding-bottom: 20000px; margin-bottom: -20000px; }
[HTML] pobierz, plaintext


wyrównywała w pionie powyższe warstwy, ale musiałem ją usunąć ze względu na kotwice, które "ucinały" stronę.
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.