Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] rozciagajace tlo
dyktek
post 23.06.2006, 11:02:38
Post #1





Grupa: Zarejestrowani
Postów: 240
Pomógł: 0
Dołączył: 18.01.2004
Skąd: rzeszów / kraków

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

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ć?
Go to the top of the page
+Quote Post
Zajec
post 23.06.2006, 11:30:43
Post #2





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

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

Dwie możlwiości:

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

2) Dopisanie #content:after { display: block; content: ""; clear: both; }
Go to the top of the page
+Quote Post
dyktek
post 23.06.2006, 11:47:22
Post #3





Grupa: Zarejestrowani
Postów: 240
Pomógł: 0
Dołączył: 18.01.2004
Skąd: rzeszów / kraków

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

dzięki pomogło smile.gif
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 29.06.2025 - 23:55
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn