Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] rozciagajace tlo
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
dyktek
23.06.2006, 11:02:38
mam kodzik:

[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. <title>cms</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/>
  6. <link href="styl.css" rel="stylesheet" type="text/css"/>
  7. </head>
  8. <body>
  9.  
  10. <div id="top"></div>
  11. <div id="content">
  12. 	<div id="left">
  13. 		<ul>
  14. 			<li><a href="#">Artykuły</a></li>
  15. 			<li><a href="#">Filmy</a></li>
  16. 			<li><a href="#">Galeria</a></li>
  17. 			<li><a href="#">Logi</a></li>
  18. 			<li><a href="#">Moduły</a></li>
  19. 			<li><a href="#">Użytkownicy</a></li>
  20. 			<li class="bottom"></li>
  21. 		</ul>
  22.  
  23. 	</div><div id="right">
  24. 				<div class="gl_obr">jakis tekst tutaj bedzie hadzia ... jakis tekst tutaj bedzie hadzia ... jakis tekst tutaj bedzie hadzia ... jakis tekst tutaj bedzie hadzia ... jakis tekst tutaj bedzie hadzia ... jakis tekst tutaj bedzie hadzia ... jakis tekst tutaj bedzie hadzia ... jakis tekst tutaj bedzie hadzia ... </div>
  25. 		  </div>
  26. </div>
  27. <div id="footer">footer</div>
  28.  
  29. </body>
  30. </html>
  31.  
  32.  
  33. /** CMS 
  34. * domyslny szablon
  35. * dyktek/hadzia...
  36. */
  37.  
  38. body {
  39. 	font-family: Arial, Verdana, Tahoma;
  40. 	font-size: 13px;
  41. 	margin: 0px;
  42. }
  43.  
  44. /* szkielet szablonu */
  45.  
  46. #top {
  47. 	background-image: url(img/backg_right_top.gif);
  48. 	background-repeat: repeat-x;
  49. 	height: 88px;
  50. }
  51. #content {
  52. 	background-color: #95B9DD;	
  53. 	height: 100%;
  54. }
  55.  
  56. #left {
  57. 	width: 178px;
  58. 	height: 100%;
  59. 	float: left;
  60. }
  61. #left ul {
  62. 	background-image: url(img/gora_menu.gif); background-repeat: no-repeat;
  63. 	margin: 12px;
  64. 	padding: 20px 0px 14px 0px;
  65. 	width: 144px;
  66. }
  67. #left li {
  68. 	list-style: none;
  69. 	background-image: url(img/backg_menu.gif);
  70. 	background-repeat: repeat-y;
  71. 	border-top: 1px solid #2C609A;
  72. 	border-bottom: 1px solid white;
  73. 	border-left: 1px solid #2C609A;
  74. 	border-right: 1px solid #2C609A;
  75. 	padding: .4em;
  76. 	cursor: pointer;
  77. }
  78. #left li:hover {
  79. 	background-image: url(img/backg_menu_hover.gif);
  80. }
  81. #left li.bottom {
  82. 	border: 0px;
  83. 	background-image: url(img/dol_menu.gif); background-repeat: no-repeat;
  84. 	width: 144px;
  85. 	height: 31px;
  86. 	cursor: auto;
  87. }
  88. #left a, a:hover {
  89. 	background-image: url(img/lista_strzal.gif); background-repeat: no-repeat; background-position: left center;
  90. 	font-family: Tahoma, Arial, Verdana;
  91. 	font-size: 17px;
  92. 	color: #004180;
  93. 	padding: 0px 0px 0px 14px;
  94. 	text-decoration: none;
  95. }
  96. #left a:hover {
  97. 	background-image: url(img/lista_strzal_hover.gif);
  98. 	color: #0076E8;
  99. }
  100. #right {
  101. 	padding: 20px 0px 14px 0px;
  102. 	margin: 0px 8px 0px 180px; 
  103. 	min-width: 500px;
  104. }
  105. #right .gl_obr{
  106. 	border: 1px solid  #2C609A;
  107. 	background-color: #C9DCEF;
  108. 	background-image: url(img/tlo_menu_gl.gif); background-repeat: repeat-x;
  109. 	padding: 24px 4px 4px 4px;
  110. }
  111. #right .ozd_dziubek {
  112. 	background-image: url(img/ozd_dziubek_glowne.gif); background-repeat: no-repeat; background-position: right;
  113. 	height: 24px;
  114. 	position: relative;
  115. }
  116. #footer {
  117.    clear: both;
  118. 	background-color: #95B9DD;
  119. 	height: 20px;
  120. }
  121.  
  122. /* koniec szkieletu */
[HTML] pobierz, plaintext


i problem mam tego typu w divie content mam dwa divy lef i right div left ma ustawione 
[HTML] pobierz, plaintext 
  1. float: left;
[HTML] pobierz, plaintext
co powoduje że tło diva content nie rozciąga się względem najdluzszego i tło jest niekompletne. W IE w sumie to działa bo dodałem do content height: 100%; w FF i Operze niestety już nie jak temu zaradzić?
Zajec
23.06.2006, 11:30:43
Dwie możlwiości:

1) Dodanie <br clear="all" /> przed zamknięciem diva container

2) Dopisanie #content:after { display: block; content: ""; clear: both; }
dyktek
23.06.2006, 11:47:22
dzięki pomogło smile.gif
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.